Upgrade to angularjs 1.2.0 rc1
This commit is contained in:
Colin Frei
parent
d223dfd662
commit
d6b021bfaf
674 changed files with 79667 additions and 62269 deletions
337
lib/angular/docs/partials/guide/concepts.html
Normal file → Executable file
337
lib/angular/docs/partials/guide/concepts.html
Normal file → Executable file
|
|
@ -1,11 +1,10 @@
|
|||
<h1><code ng:non-bindable=""></code>
|
||||
<span class="hint"></span>
|
||||
<a href="http://github.com/angular/angular.js/edit/master/docs/content/guide/concepts.ngdoc" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable=""></code>
|
||||
<div><span class="hint"></span>
|
||||
</div>
|
||||
</h1>
|
||||
<div><a href="http://github.com/angular/angular.js/edit/master/docs/content/guide/concepts.ngdoc" class="improve-docs btn btn-primary">Improve this doc</a><h2>Overview</h2>
|
||||
|
||||
<div><div class="conceptual-overview-page"><h2>Overview</h1>
|
||||
<p>This document gives a quick overview of the main angular components and how they work together.
|
||||
These are:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="guide/concepts#startup">startup</a> - bring up hello world</li>
|
||||
<li><a href="guide/concepts#runtime">runtime</a> - overview of angular runtime</li>
|
||||
|
|
@ -19,15 +18,10 @@ These are:</p>
|
|||
<li><a href="guide/concepts#module">module</a> - configures the injector</li>
|
||||
<li><a href="guide/concepts#angular_namespace"><code>$</code></a> - angular namespace</li>
|
||||
</ul>
|
||||
|
||||
<p><a name="startup"></a></p>
|
||||
|
||||
<h2>Startup</h2>
|
||||
|
||||
<h1>Startup</h1>
|
||||
<p>This is how we get the ball rolling (refer to the diagram and example below):</p>
|
||||
|
||||
<p><img class="pull-right" style="padding-left: 3em;" src="img/guide/concepts-startup.png"></p>
|
||||
|
||||
<ol>
|
||||
<li>The browser loads the HTML and parses it into a DOM</li>
|
||||
<li>The browser loads <code>angular.js</code> script</li>
|
||||
|
|
@ -35,134 +29,124 @@ These are:</p>
|
|||
<li>Angular looks for <a href="api/ng.directive:ngApp"><code>ng-app</code></a>
|
||||
<a href="guide/directive">directive</a>, which designates the application boundary</li>
|
||||
<li>The <a href="guide/module">Module</a> specified in <a href="api/ng.directive:ngApp"><code>ng-app</code></a> (if any) is used to configure
|
||||
the <a href="api/AUTO.$injector"><code>$injector</code></a></li>
|
||||
the <a href="api/AUTO.$injector"><code>$injector</code></a></li>
|
||||
<li>The <a href="api/AUTO.$injector"><code>$injector</code></a> is used to create the <a href="api/ng.$compile"><code>$compile</code></a> service as well as <a href="api/ng.$rootScope"><code>$rootScope</code></a></li>
|
||||
<li>The <a href="api/ng.$compile"><code>$compile</code></a> service is used to compile the DOM and link
|
||||
it with <a href="api/ng.$rootScope"><code>$rootScope</code></a></li>
|
||||
it with <a href="api/ng.$rootScope"><code>$rootScope</code></a></li>
|
||||
<li>The <a href="api/ng.directive:ngInit"><code>ng-init</code></a> <a href="guide/directive">directive</a> assigns <code>World</code> to the <code>name</code> property on the <a href="guide/scope">scope</a></li>
|
||||
<li>The <code>{{name}}</code> <a href="api/ng.$interpolate"><code>interpolates</code></a> the expression to
|
||||
<code>Hello World!</code></li>
|
||||
<code>Hello World!</code></li>
|
||||
</ol>
|
||||
|
||||
<div class="clear">
|
||||
</div>
|
||||
|
||||
<h3>Source</h3>
|
||||
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-17" source-edit-css="" source-edit-js="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<h3>Source</h2>
|
||||
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-180" source-edit-css="" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-17" ng-html-wrap=" angular.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-17">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-180" ng-html-wrap=" angular.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-180">
|
||||
<p ng-init=" name='World' ">Hello {{name}}!</p>
|
||||
</script>
|
||||
</div>
|
||||
</div><h3>Demo</h3>
|
||||
<div class="well doc-example-live animator-container" ng-embed-app="" ng-set-html="index.html-17" ng-eval-javascript=""></div>
|
||||
</div><h2>Demo</h2>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-180" ng-eval-javascript=""></div>
|
||||
|
||||
<p><a name="runtime"></a></p>
|
||||
|
||||
<h2>Runtime</h2>
|
||||
<a name="runtime"></a>
|
||||
# Runtime
|
||||
|
||||
<p><img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-runtime.png"></p>
|
||||
<img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-runtime.png">
|
||||
|
||||
<p>The diagram and the example below describe how Angular interacts with the browser's event loop.</p>
|
||||
The diagram and the example below describe how Angular interacts with the browser's event loop.
|
||||
|
||||
<ol>
|
||||
<li>The browser's event-loop waits for an event to arrive. An event is a user interactions, timer event,
|
||||
or network event (response from a server).</li>
|
||||
<li>The event's callback gets executed. This enters the JavaScript context. The callback can
|
||||
modify the DOM structure.</li>
|
||||
<li>Once the callback executes, the browser leaves the JavaScript context and
|
||||
re-renders the view based on DOM changes.</li>
|
||||
</ol>
|
||||
1. The browser's event-loop waits for an event to arrive. An event is a user interaction, timer event,
|
||||
or network event (response from a server).
|
||||
2. The event's callback gets executed. This enters the JavaScript context. The callback can
|
||||
modify the DOM structure.
|
||||
3. Once the callback executes, the browser leaves the JavaScript context and
|
||||
re-renders the view based on DOM changes.
|
||||
|
||||
<p>Angular modifies the normal JavaScript flow by providing its own event processing loop. This
|
||||
Angular modifies the normal JavaScript flow by providing its own event processing loop. This
|
||||
splits the JavaScript into classical and Angular execution context. Only operations which are
|
||||
applied in Angular execution context will benefit from Angular data-binding, exception handling,
|
||||
property watching, etc... You can also use $apply() to enter Angular execution context from JavaScript. Keep in
|
||||
mind that in most places (controllers, services) $apply has already been called for you by the
|
||||
directive which is handling the event. An explicit call to $apply is needed only when
|
||||
implementing custom event callbacks, or when working with a third-party library callbacks.</p>
|
||||
implementing custom event callbacks, or when working with third-party library callbacks.
|
||||
|
||||
<ol>
|
||||
<li>Enter Angular execution context by calling <a href="guide/scope">scope</a><code>.</code><a href="api/ng.$rootScope.Scope#$apply"><code>$apply</code></a><code>(stimulusFn)</code>. Where <code>stimulusFn</code> is
|
||||
the work you wish to do in Angular execution context.</li>
|
||||
<li>Angular executes the <code>stimulusFn()</code>, which typically modifies application state.</li>
|
||||
<li>Angular enters the <a href="api/ng.$rootScope.Scope#$digest"><code>$digest</code></a> loop. The
|
||||
loop is made up of two smaller loops which process <a href="api/ng.$rootScope.Scope#$evalAsync"><code>$evalAsync</code></a> queue and the <a href="api/ng.$rootScope.Scope#$watch"><code>$watch</code></a> list. The <a href="api/ng.$rootScope.Scope#$digest"><code>$digest</code></a> loop keeps iterating until the model
|
||||
stabilizes, which means that the <a href="api/ng.$rootScope.Scope#$evalAsync"><code>$evalAsync</code></a> queue is empty and the <a href="api/ng.$rootScope.Scope#$watch"><code>$watch</code></a> list does not detect any changes.</li>
|
||||
<li>The <a href="api/ng.$rootScope.Scope#$evalAsync"><code>$evalAsync</code></a> queue is used to
|
||||
schedule work which needs to occur outside of current stack frame, but before the browser's
|
||||
view render. This is usually done with <code>setTimeout(0)</code>, but the <code>setTimeout(0)</code> approach
|
||||
suffers from slowness and may cause view flickering since the browser renders the view after
|
||||
each event.</li>
|
||||
<li>The <a href="api/ng.$rootScope.Scope#$watch"><code>$watch</code></a> list is a set of expressions
|
||||
which may have changed since last iteration. If a change is detected then the <code>$watch</code>
|
||||
function is called which typically updates the DOM with the new value.</li>
|
||||
<li>Once the Angular <a href="api/ng.$rootScope.Scope#$digest"><code>$digest</code></a> loop finishes
|
||||
the execution leaves the Angular and JavaScript context. This is followed by the browser
|
||||
re-rendering the DOM to reflect any changes.</li>
|
||||
</ol>
|
||||
1. Enter Angular execution context by calling <a href="guide/scope">scope</a><code>.</code><a href="api/ng.$rootScope.Scope#$apply"><code>$apply</code></a><code>(stimulusFn)</code>. Where <code>stimulusFn</code> is
|
||||
the work you wish to do in Angular execution context.
|
||||
2. Angular executes the <code>stimulusFn()</code>, which typically modifies application state.
|
||||
3. Angular enters the <a href="api/ng.$rootScope.Scope#$digest"><code>$digest</code></a> loop. The
|
||||
loop is made up of two smaller loops which process <a href="api/ng.$rootScope.Scope#$evalAsync"><code>$evalAsync</code></a> queue and the <a href="api/ng.$rootScope.Scope#$watch"><code>$watch</code></a> list. The <a href="api/ng.$rootScope.Scope#$digest"><code>$digest</code></a> loop keeps iterating until the model
|
||||
stabilizes, which means that the <a href="api/ng.$rootScope.Scope#$evalAsync"><code>$evalAsync</code></a> queue is empty and the <a href="api/ng.$rootScope.Scope#$watch"><code>$watch</code></a> list does not detect any changes.
|
||||
4. The <a href="api/ng.$rootScope.Scope#$evalAsync"><code>$evalAsync</code></a> queue is used to
|
||||
schedule work which needs to occur outside of current stack frame, but before the browser's
|
||||
view render. This is usually done with <code>setTimeout(0)</code>, but the <code>setTimeout(0)</code> approach
|
||||
suffers from slowness and may cause view flickering since the browser renders the view after
|
||||
each event.
|
||||
5. The <a href="api/ng.$rootScope.Scope#$watch"><code>$watch</code></a> list is a set of expressions
|
||||
which may have changed since last iteration. If a change is detected then the <code>$watch</code>
|
||||
function is called which typically updates the DOM with the new value.
|
||||
6. Once the Angular <a href="api/ng.$rootScope.Scope#$digest"><code>$digest</code></a> loop finishes
|
||||
the execution leaves the Angular and JavaScript context. This is followed by the browser
|
||||
re-rendering the DOM to reflect any changes.
|
||||
|
||||
<p>Here is the explanation of how the <code>Hello wold</code> example achieves the data-binding effect when the
|
||||
user enters text into the text field.</p>
|
||||
|
||||
<ol>
|
||||
<li>During the compilation phase:
|
||||
<ol><li>the <a href="api/ng.directive:ngModel"><code>ng-model</code></a> and <a href="api/ng.directive:input"><code>input</code></a> <a href="guide/directive">directive</a> set up a <code>keydown</code> listener on the <code><input></code> control.</li>
|
||||
<li>the <a href="api/ng.$interpolate"><code>{{name}}</code></a> interpolation
|
||||
sets up a <a href="api/ng.$rootScope.Scope#$watch"><code>$watch</code></a> to be notified of
|
||||
<code>name</code> changes.</li></ol></li>
|
||||
<li>During the runtime phase:
|
||||
<ol><li>Pressing an '<code>X</code>' key causes the browser to emit a <code>keydown</code> event on the input control.</li>
|
||||
<li>The <a href="api/ng.directive:input"><code>input</code></a> directive
|
||||
captures the change to the input's value and calls <a href="api/ng.$rootScope.Scope#$apply"><code>$apply</code></a><code>("name = 'X';")</code> to update the
|
||||
application model inside the Angular execution context.</li>
|
||||
<li>Angular applies the <code>name = 'X';</code> to the model.</li>
|
||||
<li>The <a href="api/ng.$rootScope.Scope#$digest"><code>$digest</code></a> loop begins</li>
|
||||
<li>The <a href="api/ng.$rootScope.Scope#$watch"><code>$watch</code></a> list detects a change
|
||||
on the <code>name</code> property and notifies the <a href="api/ng.$interpolate"><code>{{name}}</code></a> interpolation, which in turn updates the DOM.</li>
|
||||
<li>Angular exits the execution context, which in turn exits the <code>keydown</code> event and with it
|
||||
the JavaScript execution context.</li>
|
||||
<li>The browser re-renders the view with update text.</li></ol></li>
|
||||
</ol>
|
||||
Here is the explanation of how the <code>Hello world</code> example achieves the data-binding effect when the
|
||||
user enters text into the text field.
|
||||
|
||||
1. During the compilation phase:
|
||||
1. the <a href="api/ng.directive:ngModel"><code>ng-model</code></a> and <a href="api/ng.directive:input"><code>input</code></a> <a href="guide/directive">directive</a> set up a <code>keydown</code> listener on the <code><input></code> control.
|
||||
2. the <a href="api/ng.$interpolate"><code>{{name}}</code></a> interpolation
|
||||
sets up a <a href="api/ng.$rootScope.Scope#$watch"><code>$watch</code></a> to be notified of
|
||||
<code>name</code> changes.
|
||||
2. During the runtime phase:
|
||||
1. Pressing an '<code>X</code>' key causes the browser to emit a <code>keydown</code> event on the input control.
|
||||
2. The <a href="api/ng.directive:input"><code>input</code></a> directive
|
||||
captures the change to the input's value and calls <a href="api/ng.$rootScope.Scope#$apply"><code>$apply</code></a><code>("name = 'X';")</code> to update the
|
||||
application model inside the Angular execution context.
|
||||
3. Angular applies the <code>name = 'X';</code> to the model.
|
||||
4. The <a href="api/ng.$rootScope.Scope#$digest"><code>$digest</code></a> loop begins
|
||||
5. The <a href="api/ng.$rootScope.Scope#$watch"><code>$watch</code></a> list detects a change
|
||||
on the <code>name</code> property and notifies the <a href="api/ng.$interpolate"><code>{{name}}</code></a> interpolation, which in turn updates the DOM.
|
||||
6. Angular exits the execution context, which in turn exits the <code>keydown</code> event and with it
|
||||
the JavaScript execution context.
|
||||
7. The browser re-renders the view with update text.
|
||||
|
||||
<div class="clear">
|
||||
</div>
|
||||
|
||||
<h3>Source</h3>
|
||||
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-18" source-edit-css="" source-edit-js="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<h2>Source</h2>
|
||||
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-181" source-edit-css="" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-18" ng-html-wrap=" angular.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-18">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-181" ng-html-wrap=" angular.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-181">
|
||||
<input ng-model="name">
|
||||
<p>Hello {{name}}!</p>
|
||||
</script>
|
||||
</div>
|
||||
</div><h3>Demo</h3>
|
||||
<div class="well doc-example-live animator-container" ng-embed-app="" ng-set-html="index.html-18" ng-eval-javascript=""></div>
|
||||
</div><h2>Demo</h2>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-181" ng-eval-javascript=""></div>
|
||||
|
||||
<p><a name="scope"></a></p>
|
||||
<a name="scope"></a>
|
||||
#Scope
|
||||
|
||||
<h2>Scope</h2>
|
||||
|
||||
<p>The <a href="guide/scope">scope</a> is responsible for detecting changes to the model section and
|
||||
The <a href="guide/scope">scope</a> is responsible for detecting changes to the model section and
|
||||
provides the execution context for expressions. The scopes are nested in a hierarchical structure
|
||||
which closely follow the DOM structure. (See individual directive documentation to see which
|
||||
directives cause a creation of new scopes.)</p>
|
||||
directives cause a creation of new scopes.)
|
||||
|
||||
<p>The following example demonstrates how <code>name</code> <a href="guide/expression">expression</a> will evaluate
|
||||
into different value depending on which scope it is evaluated in. The example is followed by
|
||||
a diagram depicting the scope boundaries.</p>
|
||||
The following example demonstrates how the <code>name</code> <a href="guide/expression">expression</a> will evaluate
|
||||
into a different value depending on which scope it is evaluated in. The example is followed by
|
||||
a diagram depicting the scope boundaries.
|
||||
|
||||
<div class="clear">
|
||||
</div>
|
||||
|
||||
<div class="show-scope">
|
||||
<h3>Source</h3>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-19" source-edit-css="style.css-21" source-edit-js="script.js-20" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<h2>Source</h2>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-182" source-edit-css="style.css-184" source-edit-js="script.js-183" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-19" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-19">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-182" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-182">
|
||||
<div ng-controller="GreetCtrl">
|
||||
Hello {{name}}!
|
||||
</div>
|
||||
|
|
@ -174,8 +158,8 @@ a diagram depicting the scope boundaries.</p>
|
|||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="style.css">
|
||||
<pre class="prettyprint linenums" ng-set-text="style.css-21"></pre>
|
||||
<style type="text/css" id="style.css-21">
|
||||
<pre class="prettyprint linenums" ng-set-text="style.css-184"></pre>
|
||||
<style type="text/css" id="style.css-184">
|
||||
.show-scope .doc-example-live.ng-scope,
|
||||
.show-scope .doc-example-live .ng-scope {
|
||||
border: 1px solid red;
|
||||
|
|
@ -184,8 +168,8 @@ a diagram depicting the scope boundaries.</p>
|
|||
</style>
|
||||
</div>
|
||||
<div class="tab-pane" title="script.js">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-20"></pre>
|
||||
<script type="text/ng-template" id="script.js-20">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-183"></pre>
|
||||
<script type="text/ng-template" id="script.js-183">
|
||||
function GreetCtrl($scope) {
|
||||
$scope.name = 'World';
|
||||
}
|
||||
|
|
@ -195,25 +179,19 @@ a diagram depicting the scope boundaries.</p>
|
|||
}
|
||||
</script>
|
||||
</div>
|
||||
</div><h3>Demo</h3>
|
||||
<div class="well doc-example-live animator-container" ng-embed-app="" ng-set-html="index.html-19" ng-eval-javascript="script.js-20"></div>
|
||||
</div><h2>Demo</h2>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-182" ng-eval-javascript="script.js-183"></div>
|
||||
</div>
|
||||
|
||||
<p><img class="center" src="img/guide/concepts-scope.png"></p>
|
||||
|
||||
<p><a name="controller"></a></p>
|
||||
|
||||
<h2>Controller</h2>
|
||||
|
||||
<h1>Controller</h1>
|
||||
<p><img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-controller.png"></p>
|
||||
|
||||
<p>A controller is the code behind the view. Its job is to construct the model and publish it to the
|
||||
view along with callback methods. The view is a projection of the scope onto the template (the
|
||||
HTML). The scope is the glue which marshals the model to the view and forwards the events to the
|
||||
controller.</p>
|
||||
|
||||
<p>The separation of the controller and the view is important because:</p>
|
||||
|
||||
<ul>
|
||||
<li>The controller is written in JavaScript. JavaScript is imperative. Imperative is a good fit
|
||||
for specifying application behavior. The controller should not contain any rendering
|
||||
|
|
@ -224,15 +202,13 @@ specifying UI. The View should not contain any behavior.</li>
|
|||
controller. This is important for re-skinning, device specific views (i.e. mobile vs desktop),
|
||||
and testability.</li>
|
||||
</ul>
|
||||
|
||||
<div class="clear">
|
||||
</div>
|
||||
|
||||
<h3>Source</h3>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-22" source-edit-css="" source-edit-js="script.js-23" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<h2>Source</h2>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-185" source-edit-css="" source-edit-js="script.js-186" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-22" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-22">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-185" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-185">
|
||||
<div ng-controller="MyCtrl">
|
||||
Hello {{name}}!
|
||||
<button ng-click="action()">
|
||||
|
|
@ -242,8 +218,8 @@ and testability.</li>
|
|||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="script.js">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-23"></pre>
|
||||
<script type="text/ng-template" id="script.js-23">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-186"></pre>
|
||||
<script type="text/ng-template" id="script.js-186">
|
||||
function MyCtrl($scope) {
|
||||
$scope.action = function() {
|
||||
$scope.name = 'OK';
|
||||
|
|
@ -253,34 +229,32 @@ and testability.</li>
|
|||
}
|
||||
</script>
|
||||
</div>
|
||||
</div><h3>Demo</h3>
|
||||
<div class="well doc-example-live animator-container" ng-embed-app="" ng-set-html="index.html-22" ng-eval-javascript="script.js-23"></div>
|
||||
</div><h2>Demo</h2>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-185" ng-eval-javascript="script.js-186"></div>
|
||||
|
||||
<p><a name="model"></a></p>
|
||||
|
||||
<h2>Model</h2>
|
||||
<a name="model"></a>
|
||||
# Model
|
||||
|
||||
<p><img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-model.png"></p>
|
||||
<img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-model.png">
|
||||
|
||||
<p>The model is the data which is used merged with the template to produce the view. To be able to
|
||||
The model is the data which is merged with the template to produce the view. To be able to
|
||||
render the model into the view, the model has to be able to be referenced from the scope. Unlike many
|
||||
other frameworks Angular makes no restrictions or requirements on the model. There are no classes
|
||||
to inherit from or special accessor methods for accessing or changing the model. The model can be
|
||||
primitive, object hash, or a full object Type. In short the model is a plain JavaScript object.</p>
|
||||
primitive, object hash, or a full object Type. In short the model is a plain JavaScript object.
|
||||
|
||||
|
||||
<div class="clear">
|
||||
</div>
|
||||
|
||||
|
||||
<p><a name="view"></a></p>
|
||||
|
||||
<h2>View</h2>
|
||||
|
||||
<h1>View</h1>
|
||||
<p><img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-view.png"></p>
|
||||
|
||||
<p>The view is what the user sees. The view begins its life as a template, is merged with the
|
||||
model and finally rendered into the browser DOM. Angular takes a very different approach to
|
||||
rendering the view compared to most other templating systems.</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Others</strong> - Most templating systems begin as an HTML string with special templating markup.
|
||||
Often the template markup breaks the HTML syntax which means that the template can not be
|
||||
|
|
@ -298,15 +272,14 @@ looks for <a href="guide/directive">directives</a> which in turn set up <a href=
|
|||
continuously updating view which does not need template model re-merging. Your model becomes
|
||||
the single source-of-truth for your view.</li>
|
||||
</ul>
|
||||
|
||||
<div class="clear">
|
||||
</div>
|
||||
|
||||
<h3>Source</h3>
|
||||
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-24" source-edit-css="" source-edit-js="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<h2>Source</h2>
|
||||
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-187" source-edit-css="" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-24" ng-html-wrap=" angular.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-24">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-187" ng-html-wrap=" angular.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-187">
|
||||
<div ng-init="list = ['Chrome', 'Safari', 'Firefox', 'IE'] ">
|
||||
<input ng-model="list" ng-list> <br>
|
||||
<input ng-model="list" ng-list> <br>
|
||||
|
|
@ -319,30 +292,26 @@ the single source-of-truth for your view.</li>
|
|||
</div>
|
||||
</script>
|
||||
</div>
|
||||
</div><h3>Demo</h3>
|
||||
<div class="well doc-example-live animator-container" ng-embed-app="" ng-set-html="index.html-24" ng-eval-javascript=""></div>
|
||||
|
||||
</div><h2>Demo</h2>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-187" ng-eval-javascript=""></div>
|
||||
<p><a name="directives"></a></p>
|
||||
|
||||
<h2>Directives</h2>
|
||||
|
||||
<h1>Directives</h1>
|
||||
<p>A directive is a behavior or DOM transformation which is triggered by the presence of a custom attribute,
|
||||
element name, or a class name. A directive allows you to extend the HTML vocabulary in a
|
||||
element name, class name or comment. A directive allows you to extend the HTML vocabulary in a
|
||||
declarative fashion. Following is an example which enables data-binding for the <code>contenteditable</code>
|
||||
in HTML.</p>
|
||||
|
||||
<h3>Source</h3>
|
||||
<div source-edit="directive" source-edit-deps="angular.js script.js" source-edit-html="index.html-26" source-edit-css="style.css-27" source-edit-js="script.js-25" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<h2>Source</h2>
|
||||
<div source-edit="directive" source-edit-deps="angular.js script.js" source-edit-html="index.html-189" source-edit-css="style.css-190" source-edit-js="script.js-188" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-26" ng-html-wrap="directive angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-26">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-189" ng-html-wrap="directive angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-189">
|
||||
<div contentEditable="true" ng-model="content">Edit Me</div>
|
||||
<pre>model = {{content}}</pre>
|
||||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="style.css">
|
||||
<pre class="prettyprint linenums" ng-set-text="style.css-27"></pre>
|
||||
<style type="text/css" id="style.css-27">
|
||||
<pre class="prettyprint linenums" ng-set-text="style.css-190"></pre>
|
||||
<style type="text/css" id="style.css-190">
|
||||
div[contentEditable] {
|
||||
cursor: pointer;
|
||||
background-color: #D0D0D0;
|
||||
|
|
@ -352,14 +321,14 @@ in HTML.</p>
|
|||
</style>
|
||||
</div>
|
||||
<div class="tab-pane" title="script.js">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-25"></pre>
|
||||
<script type="text/ng-template" id="script.js-25">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-188"></pre>
|
||||
<script type="text/ng-template" id="script.js-188">
|
||||
angular.module('directive', []).directive('contenteditable', function() {
|
||||
return {
|
||||
require: 'ngModel',
|
||||
link: function(scope, elm, attrs, ctrl) {
|
||||
// view -> model
|
||||
elm.bind('blur', function() {
|
||||
elm.on('blur', function() {
|
||||
scope.$apply(function() {
|
||||
ctrl.$setViewValue(elm.html());
|
||||
});
|
||||
|
|
@ -377,22 +346,18 @@ in HTML.</p>
|
|||
});
|
||||
</script>
|
||||
</div>
|
||||
</div><h3>Demo</h3>
|
||||
<div class="well doc-example-live animator-container" ng-embed-app="directive" ng-set-html="index.html-26" ng-eval-javascript="script.js-25"></div>
|
||||
|
||||
</div><h2>Demo</h2>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="directive" ng-set-html="index.html-189" ng-eval-javascript="script.js-188"></div>
|
||||
<p><a name="filters"></a></p>
|
||||
|
||||
<h2>Filters</h2>
|
||||
|
||||
<h1>Filters</h1>
|
||||
<p><a href="api/ng.$filter"><code>Filters</code></a> perform data transformation. Typically
|
||||
they are used in conjunction with the locale to format the data in locale specific output.
|
||||
They follow the spirit of UNIX filters and use similar syntax <code>|</code> (pipe).</p>
|
||||
|
||||
<h3>Source</h3>
|
||||
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-28" source-edit-css="" source-edit-js="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<h2>Source</h2>
|
||||
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-191" source-edit-css="" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-28" ng-html-wrap=" angular.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-28">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-191" ng-html-wrap=" angular.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-191">
|
||||
<div ng-init="list = ['Chrome', 'Safari', 'Firefox', 'IE'] ">
|
||||
Number formatting: {{ 1234567890 | number }} <br>
|
||||
array filtering <input ng-model="predicate">
|
||||
|
|
@ -400,27 +365,20 @@ They follow the spirit of UNIX filters and use similar syntax <code>|</code> (pi
|
|||
</div>
|
||||
</script>
|
||||
</div>
|
||||
</div><h3>Demo</h3>
|
||||
<div class="well doc-example-live animator-container" ng-embed-app="" ng-set-html="index.html-28" ng-eval-javascript=""></div>
|
||||
|
||||
</div><h2>Demo</h2>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-191" ng-eval-javascript=""></div>
|
||||
<p><a name="module"></a>
|
||||
<a name="injector"></a></p>
|
||||
|
||||
<h2>Modules and the Injector</h2>
|
||||
|
||||
<h1>Modules and the Injector</h1>
|
||||
<p><img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-module-injector.png"></p>
|
||||
|
||||
<p>The <a href="api/AUTO.$injector"><code>injector</code></a> is a service locator. There is a single
|
||||
<a href="api/AUTO.$injector"><code>injector</code></a> per Angular <a href="api/ng.directive:ngApp"><code>application</code></a>. The <a href="api/AUTO.$injector"><code>injector</code></a> provides a way to look up an object instance by its
|
||||
name. The injector keeps an internal cache of all objects so that repeated calls to get the same
|
||||
object name result in the same instance. If the object does not exist, then the <a href="api/AUTO.$injector"><code>injector</code></a> asks the instance factory to create a new instance.</p>
|
||||
|
||||
<p>A <a href="api/angular.Module"><code>module</code></a> is a way to configure the injector's instance factory, known
|
||||
<p>A <a href="api/angular.Module"><code>module</code></a> is a way to configure the injector's instance factory, known
|
||||
as a <a href="api/AUTO.$provide"><code>provider</code></a>.</p>
|
||||
|
||||
<div class='clear'>
|
||||
<p><div class='clear'>
|
||||
</div>
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
// Create a module
|
||||
var myModule = angular.module('myModule', [])
|
||||
|
|
@ -441,11 +399,9 @@ as a <a href="api/AUTO.$provide"><code>provider</code></a>.</p>
|
|||
// always true because of instance cache
|
||||
$injector.get('serviceA') === $injector.get('serviceA');
|
||||
</pre>
|
||||
|
||||
<p>But the real magic of the <a href="api/AUTO.$injector"><code>injector</code></a> is that it can be
|
||||
used to <a href="api/AUTO.$injector#invoke"><code>call</code></a> methods and <a href="api/AUTO.$injector#instantiate"><code>instantiate</code></a> types. This subtle feature is what
|
||||
allows the methods and types to ask for their dependencies instead of having to look for them.</p>
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
// You write functions such as this one.
|
||||
function doSomething(serviceA, serviceB) {
|
||||
|
|
@ -468,29 +424,26 @@ allows the methods and types to ask for their dependencies instead of having to
|
|||
// the $injector will supply the arguments to the function automatically
|
||||
$injector.invoke(doSomething); // This is how the framework calls your functions
|
||||
</pre>
|
||||
|
||||
<p>Notice that the only thing you needed to write was the function, and list the dependencies in the
|
||||
function arguments. When angular calls the function, it will use the <a href="api/AUTO.$injector#invoke"><code>call</code></a> which will automatically fill the function
|
||||
arguments.</p>
|
||||
|
||||
<p>Examine the <code>ClockCtrl</code> bellow, and notice how it lists the dependencies in the constructor. When the
|
||||
<p>Examine the <code>ClockCtrl</code> below, and notice how it lists the dependencies in the constructor. When the
|
||||
<a href="api/ng.directive:ngController"><code>ng-controller</code></a> instantiates
|
||||
the controller it automatically provides the dependencies. There is no need to create
|
||||
dependencies, look for dependencies, or even get a reference to the injector.</p>
|
||||
|
||||
<h3>Source</h3>
|
||||
<div source-edit="timeExampleModule" source-edit-deps="angular.js script.js" source-edit-html="index.html-29" source-edit-css="" source-edit-js="script.js-30" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<h2>Source</h2>
|
||||
<div source-edit="timeExampleModule" source-edit-deps="angular.js script.js" source-edit-html="index.html-192" source-edit-css="" source-edit-js="script.js-193" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-29" ng-html-wrap="timeExampleModule angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-29">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-192" ng-html-wrap="timeExampleModule angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-192">
|
||||
<div ng-controller="ClockCtrl">
|
||||
Current time is: {{ time.now }}
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="script.js">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-30"></pre>
|
||||
<script type="text/ng-template" id="script.js-30">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-193"></pre>
|
||||
<script type="text/ng-template" id="script.js-193">
|
||||
angular.module('timeExampleModule', []).
|
||||
// Declare new object called time,
|
||||
// which will be available for injection
|
||||
|
|
@ -511,13 +464,11 @@ dependencies, look for dependencies, or even get a reference to the injector.</p
|
|||
}
|
||||
</script>
|
||||
</div>
|
||||
</div><h3>Demo</h3>
|
||||
<div class="well doc-example-live animator-container" ng-embed-app="timeExampleModule" ng-set-html="index.html-29" ng-eval-javascript="script.js-30"></div>
|
||||
|
||||
</div><h2>Demo</h3>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="timeExampleModule" ng-set-html="index.html-192" ng-eval-javascript="script.js-193"></div>
|
||||
<p><a name="angular_namespace"></a></p>
|
||||
|
||||
<h2>Angular Namespace</h2>
|
||||
|
||||
<h1>Angular Namespace</h2>
|
||||
<p>To prevent accidental name collision, Angular prefixes names of objects which could potentially
|
||||
collide with <code>$</code>. Please do not use the <code>$</code> prefix in your code as it may accidentally collide
|
||||
with Angular code.</p></div>
|
||||
with Angular code.</p>
|
||||
</div></div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue