I discovered the difference when checking to see what the requests looked like to download the JavaScript files from the server. I just wanted to see what the link looked like in the HTML, but when I checked in the inspector, I couldn’t find any references to any JavaScript. When I checked the source, they were certainly there.
You can see the example here: http://todomvc.com/architecture-examples/angularjs/#/
I can’t seem to figure out why.
Here it is in Firebug’s inspector:
And here it is when viewing it from the source:
There are also some element attributes that seem to disappear between the two.
Can someone explain why?
Edit:
Here’s the complete markup from source:
<!doctype html>
<html lang="en" data-framework="angularjs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AngularJS • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<style>[ng-cloak] { display: none; }</style>
</head>
<body ng-app="todomvc">
<ng-view />
<script type="text/ng-template" id="todomvc-index.html">
<section id="todoapp" ng-controller="TodoCtrl">
<header id="header">
<h1>todos</h1>
<form id="todo-form" ng-submit="addTodo()">
<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
</form>
</header>
<section id="main" ng-show="todos.length" ng-cloak>
<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng-repeat="todo in todos | filter:statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
<div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed">
<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" ng-click="removeTodo(todo)"></button>
</div>
<form ng-submit="doneEditing(todo)">
<input class="edit" ng-trim="false" ng-model="todo.title" todo-escape="revertEditing(todo)" ng-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
</form>
</li>
</ul>
</section>
<footer id="footer" ng-show="todos.length" ng-cloak>
<span id="todo-count"><strong>{{remainingCount}}</strong>
<ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
</span>
<ul id="filters">
<li>
<a ng-class="{selected: status == ''} " href="#/">All</a>
</li>
<li>
<a ng-class="{selected: status == 'active'}" href="#/active">Active</a>
</li>
<li>
<a ng-class="{selected: status == 'completed'}" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" ng-click="clearCompletedTodos()" ng-show="completedCount">Clear completed ({{completedCount}})</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Credits:
<a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>,
<a href="http://ericbidelman.com">Eric Bidelman</a>,
<a href="http://jacobmumm.com">Jacob Mumm</a> and
<a href="http://igorminar.com">Igor Minar</a>
</p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
</script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/todoCtrl.js"></script>
<script src="js/services/todoStorage.js"></script>
<script src="js/directives/todoFocus.js"></script>
<script src="js/directives/todoEscape.js"></script>
</body>
</html>
And here’s what the markup looks like in the inspector:
<!DOCTYPE html>
<html lang="en" data-framework="angularjs">
<head>
<style type="text/css">
@charset "UTF-8";
[ng:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{
display:none !important;
}ng:form{
display:block;
}
</style>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>
AngularJS • TodoMVC
</title>
<link href="bower_components/todomvc-common/base.css" rel="stylesheet">
<style>
[ng-cloak] {
display: none;
}
</style>
</head>
<body class="learn-bar ng-scope" ng-app="todomvc">
<aside class="learn">
<header>
<h3>
AngularJS
</h3>
<span class="source-links">
<h5>
Architecture Example
</h5>
<a href="https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/angularjs">
Source
</a>
<h5>
Dependency Example
</h5>
<a class="demo-link" href="http://todomvc.com/labs/dependency-examples/angularjs_require">
Demo
</a>
,
<a href="https://github.com/tastejs/todomvc/tree/gh-pages/labs/dependency-examples/angularjs_require">
Source
</a>
<h5>
AngularJS Optimized
</h5>
<a class="demo-link" href="http://todomvc.com/architecture-examples/angularjs-perf">
Demo
</a>
,
<a href="https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/angularjs-perf">
Source
</a>
<h5>
TypeScript & AngularJS
</h5>
<a class="demo-link" href="http://todomvc.com/labs/architecture-examples/typescript-angular">
Demo
</a>
,
<a href="https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/typescript-angular">
Source
</a>
</span>
</header>
<hr>
<blockquote class="quote speech-bubble">
<p>
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
</p>
<footer>
<a href="http://angularjs.org">
AngularJS
</a>
</footer>
</blockquote>
<hr>
<h4>
Official Resources
</h4>
<ul>
<li>
<a href="http://docs.angularjs.org/tutorial">
Tutorial
</a>
</li>
<li>
<a href="http://docs.angularjs.org/api">
API Reference
</a>
</li>
<li>
<a href="http://docs.angularjs.org/guide">
Developer Guide
</a>
</li>
<li>
<a href="http://builtwith.angularjs.org">
Applications built with AngularJS
</a>
</li>
<li>
<a href="http://blog.angularjs.org">
Blog
</a>
</li>
<li>
<a href="http://docs.angularjs.org/misc/faq">
FAQ
</a>
</li>
<li>
<a href="http://www.youtube.com/angularjs">
AngularJS Meetups
</a>
</li>
</ul>
<h4>
Articles and Guides
</h4>
<ul>
<li>
<a href="http://www.codeschool.com/code_tv/angularjs-part-1">
Code School AngularJS course
</a>
</li>
<li>
<a href="http://net.tutsplus.com/tutorials/javascript-ajax/5-awesome-angularjs-features">
5 Awesome AngularJS Features
</a>
</li>
<li>
<a href="http://briantford.com/blog/angular-yeoman.html">
Using Yeoman with AngularJS
</a>
</li>
<li>
<a href="http://stephenplusplus.github.io/meangular">
me&ngular - an introduction to MVW
</a>
</li>
</ul>
<h4>
Community
</h4>
<ul>
<li>
<a href="http://www.youtube.com/playlist?list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz">
Walkthroughs and Tutorials on YouTube
</a>
</li>
<li>
<a href="https://groups.google.com/forum/?fromgroups#!forum/angular">
Google Groups mailing list
</a>
</li>
<li>
<a href="http://stackoverflow.com/questions/tagged/angularjs">
angularjs on Stack Overflow
</a>
</li>
<li>
<a href="https://twitter.com/angularjs">
AngularJS on Twitter
</a>
</li>
<li>
<a href="https://plus.google.com/+AngularJS/posts">
AngularjS on Google +
</a>
</li>
</ul>
<footer>
<hr>
<em>
If you have other helpful links to share, or find any of the links above no longer work, please
<a href="https://github.com/tastejs/todomvc/issues">
let us know
</a>
.
</em>
</footer>
</aside>
<ng-view class="ng-scope">
<section id="todoapp" class="ng-scope" ng-controller="TodoCtrl">
<header id="header">
<h1>
todos
</h1>
<form id="todo-form" class="ng-pristine ng-valid" ng-submit="addTodo()">
<input id="new-todo" class="ng-pristine ng-valid" autofocus="" ng-model="newTodo" placeholder="What needs to be done?">
</form>
</header>
<section id="main" class="ng-hide" ng-show="todos.length">
<input id="toggle-all" class="ng-pristine ng-valid" type="checkbox" ng-click="markAll(allChecked)" ng-model="allChecked">
<label for="toggle-all">
Mark all as complete
</label>
<ul id="todo-list">
</ul>
</section>
<footer id="footer" class="ng-hide" ng-show="todos.length">
<span id="todo-count">
<strong class="ng-binding">
0
</strong>
<ng-pluralize when="{ one: 'item left', other: 'items left' }" count="remainingCount">
items left
</ng-pluralize>
</span>
<ul id="filters">
<li>
<a class="selected" href="#/" ng-class="{selected: status == ''} ">
All
</a>
</li>
<li>
<a href="#/active" ng-class="{selected: status == 'active'}">
Active
</a>
</li>
<li>
<a href="#/completed" ng-class="{selected: status == 'completed'}">
Completed
</a>
</li>
</ul>
<button id="clear-completed" class="ng-binding ng-hide" ng-show="completedCount" ng-click="clearCompletedTodos()">
Clear completed (0)
</button>
</footer>
</section>
<footer id="info" class="ng-scope">
<p>
Double-click to edit a todo
</p>
<p>
Credits:
<a href="http://twitter.com/cburgdorf">
Christoph Burgdorf
</a>
,
<a href="http://ericbidelman.com">
Eric Bidelman
</a>
,
<a href="http://jacobmumm.com">
Jacob Mumm
</a>
and
<a href="http://igorminar.com">
Igor Minar
</a>
</p>
<p>
Part of
<a href="http://todomvc.com">
TodoMVC
</a>
</p>
</footer>
</ng-view>
</body>
</html>
Inspector = current state of the dom (May be modfied by scripts), source code = original data send by server.
Certain elements like scripts that where used to store templates or other data , are often removed from dom by the libraries after their content was read to keep the dom clean.
That’s why they don’t appear in the inspector.