Update Angular to 1.2.0 RC2
This commit is contained in:
Colin Frei
parent
7416269494
commit
0d3a40980e
184 changed files with 17993 additions and 21133 deletions
|
|
@ -51,9 +51,8 @@ and follow the instructions for setting up your computer.</p>
|
|||
<pre class="prettyprint linenums">npm install -g karma</pre>
|
||||
<li><p>You'll also need Git, which you can get from
|
||||
<a href="http://git-scm.com/download">the Git site</a>.</p></li>
|
||||
<li><p>Clone the angular-phonecat repository located at <a href="a
|
||||
href="https://github.com/angular/angular-phonecat"">a
|
||||
href="https://github.com/angular/angular-phonecat"</a>Github</a> by running the following command:</p>
|
||||
<li><p>Clone the angular-phonecat repository located at
|
||||
<a href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
|
||||
<pre class="prettyprint linenums">git clone git://github.com/angular/angular-phonecat.git</pre>
|
||||
<p>This command creates the <code>angular-phonecat</code> directory in your current
|
||||
directory.</p></li>
|
||||
|
|
|
|||
|
|
@ -22,19 +22,15 @@ angular-seed, and run the application in the browser.</p>
|
|||
<ul>
|
||||
<li><b>For node.js users:</b>
|
||||
<ol>
|
||||
<li>In a <i>separate</i> terminal tab or window, run
|
||||
<code>node ./scripts/web-server.js</code> to start the web server.</li>
|
||||
<li>Open a browser window for the app and navigate to <a href="a
|
||||
href="http://localhost:8000/app/index.html"">a
|
||||
href="http://localhost:8000/app/index.html"</a><a href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></a></li>
|
||||
<li>In a <i>separate</i> terminal tab or window, run <code>node ./scripts/web-server.js</code> to start the web server.</li>
|
||||
<li>Open a browser window for the app and navigate to <a
|
||||
href="http://localhost:8000/app/index.html"><a href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></a></li>
|
||||
</ol>
|
||||
</li>
|
||||
<li><b>For other http servers:</b>
|
||||
<ol>
|
||||
<li>Configure the server to serve the files in the <code>angular-phonecat</code>
|
||||
directory.</li>
|
||||
<li>Navigate in your browser to
|
||||
<code><a href="http://localhost:[port-number]/[context-path]/app/index.html">http://localhost:[port-number]/[context-path]/app/index.html</a></code>.</li>
|
||||
<li>Configure the server to serve the files in the <code>angular-phonecat</code> directory.</li>
|
||||
<li>Navigate in your browser to <code><a href="http://localhost:[port-number]/[context-path]/app/index.html">http://localhost:[port-number]/[context-path]/app/index.html</a></code>.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -55,19 +51,14 @@ directory.</li>
|
|||
<ul>
|
||||
<li><b>For node.js users:</b>
|
||||
<ol>
|
||||
<li>In a <i>separate</i> terminal tab or window, run <code>node
|
||||
scripts\web-server.js</code> to start the web server.</li>
|
||||
<li>Open a browser window for the app and navigate to <a href="a
|
||||
href="http://localhost:8000/app/index.html"">a
|
||||
href="http://localhost:8000/app/index.html"</a><a href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></a></li>
|
||||
<li>In a <i>separate</i> terminal tab or window, run <code>node scripts\web-server.js</code> to start the web server.</li>
|
||||
<li>Open a browser window for the app and navigate to <a href="http://localhost:8000/app/index.html"><a href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></a></li>
|
||||
</ol>
|
||||
</li>
|
||||
<li><b>For other http servers:</b>
|
||||
<ol>
|
||||
<li>Configure the server to serve the files in the <code>angular-phonecat</code>
|
||||
directory.</li>
|
||||
<li>Navigate in your browser to
|
||||
<code><a href="http://localhost:[port-number]/[context-path]/app/index.html">http://localhost:[port-number]/[context-path]/app/index.html</a></code>.</li>
|
||||
<li>Configure the server to serve the files in the <code>angular-phonecat</code> directory.</li>
|
||||
<li>Navigate in your browser to <code><a href="http://localhost:[port-number]/[context-path]/app/index.html">http://localhost:[port-number]/[context-path]/app/index.html</a></code>.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -102,9 +93,11 @@ The code contains some key Angular elements that we will need going forward.</p>
|
|||
<ul>
|
||||
<li><p><code>ng-app</code> directive:</p>
|
||||
<pre><code> <html ng-app></code></pre>
|
||||
<p>The <code>ng-app</code> attribute represents an Angular directive (named <code>ngApp</code>; Angular uses
|
||||
<code>name-with-dashes</code> for attribute names and <code>camelCase</code> for the corresponding directive name)
|
||||
used to flag an element which Angular should consider to be the root element of our application.
|
||||
<p>The <code>ng-app</code> attribute represents an Angular directive named <code>ngApp</code> (Angular uses
|
||||
<code>name-with-dashes</code> for its custom attributes and <code>camelCase</code> for the corresponding directives
|
||||
that implements them).
|
||||
This directive is used to flag the html element that Angular should consider to be the root element
|
||||
of our application.
|
||||
This gives application developers the freedom to tell Angular if the entire html page or only a
|
||||
portion of it should be treated as the Angular application.</p>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -52,9 +52,9 @@ tag as the template.</p>
|
|||
<li><p>As we've learned in step 0, the curly braces around <code>phone.name</code> and <code>phone.snippet</code> denote
|
||||
bindings. As opposed to evaluating constants, these expressions are referring to our application
|
||||
model, which was set up in our <code>PhoneListCtrl</code> controller.</p>
|
||||
<pre><code><img class="diagram" src="img/tutorial/tutorial_02.png"></code></pre>
|
||||
</li>
|
||||
</ul>
|
||||
<p><img class="diagram" src="img/tutorial/tutorial_02.png"></p>
|
||||
<h2>Model and Controller</h2>
|
||||
<p>The data <strong>model</strong> (a simple array of phones in object literal notation) is instantiated within
|
||||
the <code>PhoneListCtrl</code> <strong>controller</strong>:</p>
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@ template into what we call a "layout template". This is a template tha
|
|||
our application. Other "partial templates" are then included into this layout template depending on
|
||||
the current "route" — the view that is currently displayed to the user.</p>
|
||||
<p>Application routes in Angular are declared via the
|
||||
<a href="api/ng.$routeProvider"><code>$routeProvider</code></a>, which is the provider of the
|
||||
<a href="api/ng.$route"><code>$route service</code></a>. This service makes it easy to wire together
|
||||
<a href="api/ngRoute.$routeProvider">$routeProvider</a>, which is the provider of the
|
||||
<a href="api/ngRoute.$route">$route service</a>. This service makes it easy to wire together
|
||||
controllers, view templates, and the current
|
||||
URL location in the browser. Using this feature we can implement <a href="http://en.wikipedia.org/wiki/Deep_linking">deep linking</a>, which lets us utilize the browser's
|
||||
history (back and forward navigation) and bookmarks.</p>
|
||||
|
|
@ -45,7 +45,7 @@ that can be used to control the creation and runtime behavior of a service. In c
|
|||
service, the <code>$routeProvider</code> exposes APIs that allow you to define routes for your application.</p>
|
||||
<p>Angular modules solve the problem of removing global state from the application and provide a way
|
||||
of configuring the injector. As opposed to AMD or require.js modules, Angular modules don't try to
|
||||
solve the problem of script load ordering or lazy script fetching. These goals are orthogonal and
|
||||
solve the problem of script load ordering or lazy script fetching. These goals are totally independent and
|
||||
both module systems can live side by side and fulfil their goals.</p>
|
||||
<h2>The App Module</h2>
|
||||
<p><strong><code>app/js/app.js</code>:</strong>
|
||||
|
|
@ -81,7 +81,7 @@ the browser address doesn't match either of our routes.</p>
|
|||
<p>Note the use of the <code>:phoneId</code> parameter in the second route declaration. The <code>$route</code> service uses
|
||||
the route declaration — <code>'/phones/:phoneId'</code> — as a template that is matched against the current
|
||||
URL. All variables defined with the <code>:</code> notation are extracted into the
|
||||
<a href="api/ng.$routeParams"><code>$routeParams</code></a> object.</p>
|
||||
<a href="api/ngRoute.$routeParams">$routeParams</a> object.</p>
|
||||
<p>In order for our application to bootstrap with our newly created module we'll also need to specify
|
||||
the module name as the value of the <a href="api/ng.directive:ngApp"><code>ngApp</code></a>
|
||||
directive:</p>
|
||||
|
|
@ -102,7 +102,7 @@ function PhoneDetailCtrl($scope, $routeParams) {
|
|||
//PhoneDetailCtrl.$inject = ['$scope', '$routeParams'];
|
||||
</pre>
|
||||
<h2>Template</h2>
|
||||
<p>The <code>$route</code> service is usually used in conjunction with the <a href="api/ng.directive:ngView"><code>ngView</code></a> directive. The role of the <code>ngView</code> directive is to include the view template for the current
|
||||
<p>The <code>$route</code> service is usually used in conjunction with the <a href="api/ngRoute.directive:ngView">ngView</a> directive. The role of the <code>ngView</code> directive is to include the view template for the current
|
||||
route into the layout template, which makes it a perfect fit for our <code>index.html</code> template.</p>
|
||||
<p><strong><code>app/index.html</code>:</strong>
|
||||
<pre class="prettyprint linenums">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue