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
33
lib/angular/docs/partials/cookbook/advancedform.html
Normal file → Executable file
33
lib/angular/docs/partials/cookbook/advancedform.html
Normal file → Executable file
|
|
@ -1,14 +1,14 @@
|
|||
<h1><code ng:non-bindable=""></code>
|
||||
<span class="hint"></span>
|
||||
<a href="http://github.com/angular/angular.js/edit/master/docs/content/cookbook/advancedform.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/cookbook/advancedform.ngdoc" class="improve-docs btn btn-primary">Improve this doc</a><p>Here we extend the basic form example to include common features such as reverting, dirty state
|
||||
<div><div class="cookbook-page cookbook-advanced-form-page"><p>Here we extend the basic form example to include common features such as reverting, dirty state
|
||||
detection, and preventing invalid form submission.</p>
|
||||
|
||||
<h3>Source</h3>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-1" source-edit-css="" source-edit-js="script.js-0" source-edit-unit="" source-edit-scenario="scenario.js-2"></div>
|
||||
<h3>Source</h2>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-160" source-edit-css="" source-edit-js="script.js-159" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-161"></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-1" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-1">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-160" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-160">
|
||||
|
||||
<div ng-controller="UserForm">
|
||||
|
||||
|
|
@ -48,8 +48,8 @@ detection, and preventing invalid form submission.</p>
|
|||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="script.js">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-0"></pre>
|
||||
<script type="text/ng-template" id="script.js-0">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-159"></pre>
|
||||
<script type="text/ng-template" id="script.js-159">
|
||||
function UserForm($scope) {
|
||||
var master = {
|
||||
name: 'John Smith',
|
||||
|
|
@ -102,8 +102,8 @@ detection, and preventing invalid form submission.</p>
|
|||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="End to end test">
|
||||
<pre class="prettyprint linenums" ng-set-text="scenario.js-2"></pre>
|
||||
<script type="text/ng-template" id="scenario.js-2">
|
||||
<pre class="prettyprint linenums" ng-set-text="scenario.js-161"></pre>
|
||||
<script type="text/ng-template" id="scenario.js-161">
|
||||
it('should enable save button', function() {
|
||||
expect(element(':button:contains(Save)').attr('disabled')).toBeTruthy();
|
||||
input('form.name').enter('');
|
||||
|
|
@ -123,11 +123,9 @@ detection, and preventing invalid form submission.</p>
|
|||
});
|
||||
</script>
|
||||
</div>
|
||||
</div><h3>Demo</h3>
|
||||
<div class="well doc-example-live animator-container" ng-embed-app="" ng-set-html="index.html-1" ng-eval-javascript="script.js-0"></div>
|
||||
|
||||
</div><h2>Demo</h3>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-160" ng-eval-javascript="script.js-159"></div>
|
||||
<h2>Things to notice</h2>
|
||||
|
||||
<ul>
|
||||
<li>Cancel & save buttons are only enabled if the form is dirty — there is something to cancel or
|
||||
save.</li>
|
||||
|
|
@ -136,4 +134,5 @@ save.</li>
|
|||
<li>Save updates the internal model of the form.</li>
|
||||
<li>Debug view shows the two models. One presented to the user form and the other being the pristine
|
||||
copy master.</li>
|
||||
</ul></div>
|
||||
</ul>
|
||||
</div></div>
|
||||
|
|
|
|||
31
lib/angular/docs/partials/cookbook/buzz.html
Normal file → Executable file
31
lib/angular/docs/partials/cookbook/buzz.html
Normal file → Executable file
|
|
@ -1,24 +1,24 @@
|
|||
<h1><code ng:non-bindable=""></code>
|
||||
<span class="hint"></span>
|
||||
<a href="http://github.com/angular/angular.js/edit/master/docs/content/cookbook/buzz.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/cookbook/buzz.ngdoc" class="improve-docs btn btn-primary">Improve this doc</a><p>External resources are URLs that provide JSON data, which are then rendered with the help of
|
||||
<div><div class="cookbook-page cookbook-resources-buzz-page"><p>External resources are URLs that provide JSON data, which are then rendered with the help of
|
||||
templates. Angular has a resource factory that can be used to give names to the URLs and then
|
||||
attach behavior to them. For example you can use the
|
||||
<a href="http://code.google.com/apis/buzz/v1/getting_started.html#background-operations|">Google Buzz API</a>
|
||||
to retrieve Buzz activity and comments.</p>
|
||||
|
||||
<h3>Source</h3>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html" source-edit-css="" source-edit-js="script.js" source-edit-unit="" source-edit-scenario="scenario.js"></div>
|
||||
<h3>Source</h2>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-163" source-edit-css="" source-edit-js="script.js-162" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-164"></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-163" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-163">
|
||||
|
||||
<div ng-controller="BuzzController">
|
||||
<input ng-model="userId"/>
|
||||
<button ng-click="fetch()">fetch</button>
|
||||
<hr/>
|
||||
<div class="buzz" ng-repeat="item in activities.data.items">
|
||||
<h1 style="font-size: 15px;">
|
||||
<h2 style="font-size: 15px;">
|
||||
<img ng-src="{{item.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
|
||||
<a ng-href="{{item.actor.profileUrl}}">{{item.actor.name}}</a>
|
||||
<a href ng-click="expandReplies(item)" style="float: right;">
|
||||
|
|
@ -36,8 +36,8 @@ to retrieve Buzz activity and comments.</p>
|
|||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="script.js">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js"></pre>
|
||||
<script type="text/ng-template" id="script.js">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-162"></pre>
|
||||
<script type="text/ng-template" id="script.js-162">
|
||||
BuzzController.$inject = ['$scope', '$resource'];
|
||||
function BuzzController($scope, $resource) {
|
||||
$scope.userId = 'googlebuzz';
|
||||
|
|
@ -59,8 +59,8 @@ to retrieve Buzz activity and comments.</p>
|
|||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="End to end test">
|
||||
<pre class="prettyprint linenums" ng-set-text="scenario.js"></pre>
|
||||
<script type="text/ng-template" id="scenario.js">
|
||||
<pre class="prettyprint linenums" ng-set-text="scenario.js-164"></pre>
|
||||
<script type="text/ng-template" id="scenario.js-164">
|
||||
xit('fetch buzz and expand', function() {
|
||||
element(':button:contains(fetch)').click();
|
||||
expect(repeater('div.buzz').count()).toBeGreaterThan(0);
|
||||
|
|
@ -69,5 +69,6 @@ to retrieve Buzz activity and comments.</p>
|
|||
});
|
||||
</script>
|
||||
</div>
|
||||
</div><h3>Demo</h3>
|
||||
<div class="well doc-example-live animator-container" ng-embed-app="" ng-set-html="index.html" ng-eval-javascript="script.js"></div></div>
|
||||
</div><h2>Demo</h3>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-163" ng-eval-javascript="script.js-162"></div>
|
||||
</div></div>
|
||||
|
|
|
|||
62
lib/angular/docs/partials/cookbook/deeplinking.html
Normal file → Executable file
62
lib/angular/docs/partials/cookbook/deeplinking.html
Normal file → Executable file
|
|
@ -1,43 +1,36 @@
|
|||
<h1><code ng:non-bindable=""></code>
|
||||
<span class="hint"></span>
|
||||
<a href="http://github.com/angular/angular.js/edit/master/docs/content/cookbook/deeplinking.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/cookbook/deeplinking.ngdoc" class="improve-docs btn btn-primary">Improve this doc</a><p>Deep linking allows you to encode the state of the application in the URL so that it can be
|
||||
<div><div class="cookbook-page cookbook-deep-linking-page"><p>Deep linking allows you to encode the state of the application in the URL so that it can be
|
||||
bookmarked and the application can be restored from the URL to the same state.</p>
|
||||
|
||||
<p>While Angular does not force you to deal with bookmarks in any particular way, it has services
|
||||
which make the common case described here very easy to implement.</p>
|
||||
|
||||
<h2>Assumptions</h2>
|
||||
|
||||
<h2>Assumptions</h1>
|
||||
<p>Your application consists of a single HTML page which bootstraps the application. We will refer
|
||||
to this page as the chrome.
|
||||
Your application is divided into several screens (or views) which the user can visit. For example,
|
||||
the home screen, settings screen, details screen, etc. For each of these screens, we would like to
|
||||
assign a URL so that it can be bookmarked and later restored. Each of these screens will be
|
||||
associated with a controller which define the screen's behavior. The most common case is that the
|
||||
associated with a controller which define the screen's behavior. The most common case is that the
|
||||
screen will be constructed from an HTML snippet, which we will refer to as the partial. Screens can
|
||||
have multiple partials, but a single partial is the most common construct. This example makes the
|
||||
partial boundary visible using a blue line.</p>
|
||||
|
||||
<p>You can make a routing table which shows which URL maps to which partial view template and which
|
||||
controller.</p>
|
||||
|
||||
<h2>Example</h2>
|
||||
|
||||
<h1>Example</h1>
|
||||
<p>In this example we have a simple app which consist of two screens:</p>
|
||||
|
||||
<ul>
|
||||
<li>Welcome: url <code>welcome</code> Show the user contact information.</li>
|
||||
<li>Settings: url <code>settings</code> Show an edit screen for user contact information.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Source</h3>
|
||||
<div source-edit="deepLinking" source-edit-deps="angular.js angular-sanitize.js script.js" source-edit-html="index.html-7 settings.html welcome.html" source-edit-css="style.css" source-edit-js="script.js-6" source-edit-unit="" source-edit-scenario="scenario.js-8"></div>
|
||||
<h3>Source</h2>
|
||||
<div source-edit="deepLinking" source-edit-deps="angular.js angular-route.js angular-sanitize.js script.js" source-edit-html="index.html-170 settings.html welcome.html" source-edit-css="style.css-169" source-edit-js="script.js-168" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-171"></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-7" ng-html-wrap="deepLinking angular.js angular-sanitize.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-7">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-170" ng-html-wrap="deepLinking angular.js angular-route.js angular-sanitize.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-170">
|
||||
<div ng-controller="AppCntl">
|
||||
<h2>Your App Chrome</h2>
|
||||
<h1>Your App Chrome</h1>
|
||||
[ <a href="welcome">Welcome</a> | <a href="settings">Settings</a> ]
|
||||
<hr/>
|
||||
<span class="partial-info">
|
||||
|
|
@ -84,8 +77,8 @@ controller.</p>
|
|||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="style.css">
|
||||
<pre class="prettyprint linenums" ng-set-text="style.css"></pre>
|
||||
<style type="text/css" id="style.css">
|
||||
<pre class="prettyprint linenums" ng-set-text="style.css-169"></pre>
|
||||
<style type="text/css" id="style.css-169">
|
||||
[ng-view] {
|
||||
border: 1px solid blue;
|
||||
margin: 0;
|
||||
|
|
@ -100,9 +93,9 @@ controller.</p>
|
|||
</style>
|
||||
</div>
|
||||
<div class="tab-pane" title="script.js">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-6"></pre>
|
||||
<script type="text/ng-template" id="script.js-6">
|
||||
angular.module('deepLinking', ['ngSanitize'])
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-168"></pre>
|
||||
<script type="text/ng-template" id="script.js-168">
|
||||
angular.module('deepLinking', ['ngRoute', 'ngSanitize'])
|
||||
.config(function($routeProvider) {
|
||||
$routeProvider.
|
||||
when("/welcome", {templateUrl:'welcome.html', controller:WelcomeCntl}).
|
||||
|
|
@ -141,8 +134,8 @@ controller.</p>
|
|||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="End to end test">
|
||||
<pre class="prettyprint linenums" ng-set-text="scenario.js-8"></pre>
|
||||
<script type="text/ng-template" id="scenario.js-8">
|
||||
<pre class="prettyprint linenums" ng-set-text="scenario.js-171"></pre>
|
||||
<script type="text/ng-template" id="scenario.js-171">
|
||||
it('should navigate to URL', function() {
|
||||
element('a:contains(Welcome)').click();
|
||||
expect(element('[ng-view]').text()).toMatch(/Hello anonymous/);
|
||||
|
|
@ -154,19 +147,18 @@ controller.</p>
|
|||
});
|
||||
</script>
|
||||
</div>
|
||||
</div><h3>Demo</h3>
|
||||
<div class="well doc-example-live animator-container" ng-embed-app="deepLinking" ng-set-html="index.html-7" ng-eval-javascript="script.js-6"></div>
|
||||
|
||||
<h2>Things to notice</h2>
|
||||
|
||||
</div><h2>Demo</h3>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="deepLinking" ng-set-html="index.html-170" ng-eval-javascript="script.js-168"></div>
|
||||
<h1>Things to notice</h2>
|
||||
<ul>
|
||||
<li>Routes are defined in the <code>AppCntl</code> class. The initialization of the controller causes the
|
||||
initialization of the <a href="api/ng.$route"><code>$route</code></a> service with the proper URL
|
||||
initialization of the <a href="api/ngRoute.$route">$route</a> service with the proper URL
|
||||
routes.</li>
|
||||
<li>The <a href="api/ng.$route"><code>$route</code></a> service then watches the URL and instantiates the
|
||||
<li>The <a href="api/ngRoute.$route">$route</a> service then watches the URL and instantiates the
|
||||
appropriate controller when the URL changes.</li>
|
||||
<li>The <a href="api/ng.directive:ngView"><code>ngView</code></a> widget loads the
|
||||
<li>The <a href="api/ngRoute.directive:ngView">ngView</a> widget loads the
|
||||
view when the URL changes. It also sets the view scope to the newly instantiated controller.</li>
|
||||
<li>Changing the URL is sufficient to change the controller and view. It makes no difference whether
|
||||
the URL is changed programatically or by the user.</li>
|
||||
</ul></div>
|
||||
</ul>
|
||||
</div></div>
|
||||
|
|
|
|||
35
lib/angular/docs/partials/cookbook/form.html
Normal file → Executable file
35
lib/angular/docs/partials/cookbook/form.html
Normal file → Executable file
|
|
@ -1,15 +1,15 @@
|
|||
<h1><code ng:non-bindable=""></code>
|
||||
<span class="hint"></span>
|
||||
<a href="http://github.com/angular/angular.js/edit/master/docs/content/cookbook/form.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/cookbook/form.ngdoc" class="improve-docs btn btn-primary">Improve this doc</a><p>A web application's main purpose is to present and gather data. For this reason Angular strives
|
||||
<div><div class="cookbook-page cookbook-form-page"><p>A web application's main purpose is to present and gather data. For this reason Angular strives
|
||||
to make both of these operations trivial. This example shows off how you can build a simple form to
|
||||
allow a user to enter data.</p>
|
||||
|
||||
<h3>Source</h3>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-10" source-edit-css="" source-edit-js="script.js-9" source-edit-unit="" source-edit-scenario="scenario.js-11"></div>
|
||||
<h3>Source</h2>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-173" source-edit-css="" source-edit-js="script.js-172" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-174"></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-10" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-10">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-173" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-173">
|
||||
|
||||
<div ng-controller="FormController" class="example">
|
||||
|
||||
|
|
@ -44,8 +44,8 @@ allow a user to enter data.</p>
|
|||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="script.js">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-9"></pre>
|
||||
<script type="text/ng-template" id="script.js-9">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-172"></pre>
|
||||
<script type="text/ng-template" id="script.js-172">
|
||||
function FormController($scope) {
|
||||
var user = $scope.user = {
|
||||
name: 'John Smith',
|
||||
|
|
@ -70,8 +70,8 @@ allow a user to enter data.</p>
|
|||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="End to end test">
|
||||
<pre class="prettyprint linenums" ng-set-text="scenario.js-11"></pre>
|
||||
<script type="text/ng-template" id="scenario.js-11">
|
||||
<pre class="prettyprint linenums" ng-set-text="scenario.js-174"></pre>
|
||||
<script type="text/ng-template" id="scenario.js-174">
|
||||
it('should show debug', function() {
|
||||
expect(binding('user')).toMatch(/John Smith/);
|
||||
});
|
||||
|
|
@ -106,11 +106,9 @@ allow a user to enter data.</p>
|
|||
});
|
||||
</script>
|
||||
</div>
|
||||
</div><h3>Demo</h3>
|
||||
<div class="well doc-example-live animator-container" ng-embed-app="" ng-set-html="index.html-10" ng-eval-javascript="script.js-9"></div>
|
||||
|
||||
</div><h2>Demo</h3>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-173" ng-eval-javascript="script.js-172"></div>
|
||||
<h2>Things to notice</h2>
|
||||
|
||||
<ul>
|
||||
<li>The user data model is initialized <a href="api/ng.directive:ngController"><code>controller</code></a> and is
|
||||
available in the <a href="api/ng.$rootScope.Scope"><code>scope</code></a> with the initial data.</li>
|
||||
|
|
@ -120,6 +118,7 @@ is going on.</li>
|
|||
to the model and are data-bound.</li>
|
||||
<li>The inputs validate. (Try leaving them blank or entering non digits in the zip field)</li>
|
||||
<li>In your application you can simply read from or write to the model and the form will be updated.</li>
|
||||
<li>By clicking the 'add' link you are adding new items into the <code>user.contacts</code> array which are then
|
||||
<li>By clicking the 'add' link you are adding new items into the <code>user.contacts</code> array which are then
|
||||
reflected in the view.</li>
|
||||
</ul></div>
|
||||
</ul>
|
||||
</div></div>
|
||||
|
|
|
|||
35
lib/angular/docs/partials/cookbook/helloworld.html
Normal file → Executable file
35
lib/angular/docs/partials/cookbook/helloworld.html
Normal file → Executable file
|
|
@ -1,30 +1,31 @@
|
|||
<h1><code ng:non-bindable=""></code>
|
||||
<span class="hint"></span>
|
||||
<a href="http://github.com/angular/angular.js/edit/master/docs/content/cookbook/helloworld.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/cookbook/helloworld.ngdoc" class="improve-docs btn btn-primary">Improve this doc</a><h3>Source</h3>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-4" source-edit-css="" source-edit-js="script.js-3" source-edit-unit="" source-edit-scenario="scenario.js-5"></div>
|
||||
<div><div class="cookbook-page cookbook-hello-world-page"><h3>Source</h2>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-166" source-edit-css="" source-edit-js="script.js-165" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-167"></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-4" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-4">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-166" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-166">
|
||||
|
||||
<div ng-controller="HelloCntl">
|
||||
Your name: <input type="text" ng-model="name" value="World"/>
|
||||
Your name: <input type="text" ng-model="name"/>
|
||||
<hr/>
|
||||
Hello {{name}}!
|
||||
Hello {{name || "World"}}!
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="script.js">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-3"></pre>
|
||||
<script type="text/ng-template" id="script.js-3">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-165"></pre>
|
||||
<script type="text/ng-template" id="script.js-165">
|
||||
function HelloCntl($scope) {
|
||||
$scope.name = 'World';
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="End to end test">
|
||||
<pre class="prettyprint linenums" ng-set-text="scenario.js-5"></pre>
|
||||
<script type="text/ng-template" id="scenario.js-5">
|
||||
<pre class="prettyprint linenums" ng-set-text="scenario.js-167"></pre>
|
||||
<script type="text/ng-template" id="scenario.js-167">
|
||||
it('should change the binding when user enters text', function() {
|
||||
expect(binding('name')).toEqual('World');
|
||||
input('name').enter('angular');
|
||||
|
|
@ -32,13 +33,10 @@
|
|||
});
|
||||
</script>
|
||||
</div>
|
||||
</div><h3>Demo</h3>
|
||||
<div class="well doc-example-live animator-container" ng-embed-app="" ng-set-html="index.html-4" ng-eval-javascript="script.js-3"></div>
|
||||
|
||||
</div><h2>Demo</h3>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-166" ng-eval-javascript="script.js-165"></div>
|
||||
<h2>Things to notice</h2>
|
||||
|
||||
<p>Take a look through the source and note:</p>
|
||||
|
||||
<ul>
|
||||
<li>The script tag that <a href="guide/bootstrap">bootstraps</a> the Angular environment.</li>
|
||||
<li>The text <a href="api/ng.directive:input"><code>input form control</code></a> which is
|
||||
|
|
@ -49,4 +47,5 @@ bound to the greeting name text.</li>
|
|||
<li>The concept of <a href="guide/dev_guide.templates.databinding">data binding</a>, which reflects any
|
||||
changes to the
|
||||
input field in the greeting text.</li>
|
||||
</ul></div>
|
||||
</ul>
|
||||
</div></div>
|
||||
|
|
|
|||
39
lib/angular/docs/partials/cookbook/index.html
Normal file → Executable file
39
lib/angular/docs/partials/cookbook/index.html
Normal file → Executable file
|
|
@ -1,50 +1,37 @@
|
|||
<h1><code ng:non-bindable=""></code>
|
||||
<span class="hint"></span>
|
||||
<a href="http://github.com/angular/angular.js/edit/master/docs/content/cookbook/index.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/cookbook/index.ngdoc" class="improve-docs btn btn-primary">Improve this doc</a><p>Welcome to the Angular cookbook. Here we will show you typical uses of Angular by example.</p>
|
||||
|
||||
<h2>Hello World</h2>
|
||||
|
||||
<div><div class="cookbook-page"><p>Welcome to the Angular cookbook. Here we will show you typical uses of Angular by example.</p>
|
||||
<h2>Hello World</h1>
|
||||
<p><a href="cookbook/helloworld">Hello World</a>: The simplest possible application that demonstrates the
|
||||
classic Hello World!</p>
|
||||
|
||||
<h2>Basic Form</h2>
|
||||
|
||||
<h1>Basic Form</h1>
|
||||
<p><a href="cookbook/form">Basic Form</a>: Displaying forms to the user for editing is the bread and butter
|
||||
of web applications. Angular makes forms easy through bidirectional data binding.</p>
|
||||
|
||||
<h2>Advanced Form</h2>
|
||||
|
||||
<h1>Advanced Form</h1>
|
||||
<p><a href="cookbook/advancedform">Advanced Form</a>: Taking the form example to the next level and
|
||||
providing advanced features such as dirty detection, form reverting and submit disabling if
|
||||
validation errors exist.</p>
|
||||
|
||||
<h2>Model View Controller</h2>
|
||||
|
||||
<h1>Model View Controller</h1>
|
||||
<p><a href="cookbook/mvc">MVC</a>: Tic-Tac-Toe: Model View Controller (MVC) is a time-tested design pattern
|
||||
to separate the behavior (JavaScript controller) from the presentation (HTML view). This
|
||||
separation aids in maintainability and testability of your project.</p>
|
||||
|
||||
<h2>Multi-page App and Deep Linking</h2>
|
||||
|
||||
<h1>Multi-page App and Deep Linking</h1>
|
||||
<p><a href="cookbook/deeplinking">Deep Linking</a>: An AJAX application never navigates away from the
|
||||
first page it loads. Instead, it changes the DOM of its single page. Eliminating full-page reloads
|
||||
is what makes AJAX apps responsive, but it creates a problem in that apps with a single URL
|
||||
prevent you from emailing links to a particular screen within your application.</p>
|
||||
|
||||
<p>Deep linking tries to solve this by changing the URL anchor without reloading a page, thus
|
||||
allowing you to send links to specific screens in your app.</p>
|
||||
|
||||
<h2>Services</h2>
|
||||
|
||||
<h1>Services</h1>
|
||||
<p><a href="api/ng">Services</a>: Services are long lived objects in your applications that are
|
||||
available across controllers. A collection of useful services are pre-bundled with Angular but you
|
||||
will likely add your own. Services are initialized using dependency injection, which resolves the
|
||||
order of initialization. This safeguards you from the perils of global state (a common way to
|
||||
implement long lived objects).</p>
|
||||
|
||||
<h2>External Resources</h2>
|
||||
|
||||
<h1>External Resources</h2>
|
||||
<p><a href="cookbook/buzz">Resources</a>: Web applications must be able to communicate with the external
|
||||
services to get and update data. Resources are the abstractions of external URLs which are
|
||||
specially tailored to Angular data binding.</p></div>
|
||||
specially tailored to Angular data binding.</p>
|
||||
</div></div>
|
||||
|
|
|
|||
44
lib/angular/docs/partials/cookbook/mvc.html
Normal file → Executable file
44
lib/angular/docs/partials/cookbook/mvc.html
Normal file → Executable file
|
|
@ -1,20 +1,19 @@
|
|||
<h1><code ng:non-bindable=""></code>
|
||||
<span class="hint"></span>
|
||||
<a href="http://github.com/angular/angular.js/edit/master/docs/content/cookbook/mvc.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/cookbook/mvc.ngdoc" class="improve-docs btn btn-primary">Improve this doc</a><p>MVC allows for a clean and testable separation between the behavior (controller) and the view
|
||||
<div><div class="cookbook-page cookbook-mvc-page"><p>MVC allows for a clean and testable separation between the behavior (controller) and the view
|
||||
(HTML template). A Controller is just a JavaScript class which is grafted onto the scope of the
|
||||
view. This makes it very easy for the controller and the view to share the model.</p>
|
||||
|
||||
<p>The model is a set of objects and primitives that are referenced from the Scope ($scope) object.
|
||||
This makes it very easy to test the controller in isolation since one can simply instantiate the
|
||||
controller and test without a view, because there is no connection between the controller and the
|
||||
view.</p>
|
||||
|
||||
<h3>Source</h3>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-13" source-edit-css="" source-edit-js="script.js-12" source-edit-unit="" source-edit-scenario="scenario.js-14"></div>
|
||||
<h3>Source</h2>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-176" source-edit-css="" source-edit-js="script.js-175" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-177"></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-13" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-13">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-176" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-176">
|
||||
|
||||
|
||||
<h4>Tic-Tac-Toe</h4>
|
||||
|
|
@ -22,8 +21,8 @@ view.</p>
|
|||
Next Player: {{nextMove}}
|
||||
<div class="winner" ng-show="winner">Player {{winner}} has won!</div>
|
||||
<table class="board">
|
||||
<tr ng-repeat="row in board" style="height:15px;">
|
||||
<td ng-repeat="cell in row" ng-style="cellStyle"
|
||||
<tr ng-repeat="row in board track by $index" style="height:15px;">
|
||||
<td ng-repeat="cell in row track by $index" ng-style="cellStyle"
|
||||
ng-click="dropPiece($parent.$index, $index)">{{cell}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -32,8 +31,8 @@ view.</p>
|
|||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="script.js">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-12"></pre>
|
||||
<script type="text/ng-template" id="script.js-12">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-175"></pre>
|
||||
<script type="text/ng-template" id="script.js-175">
|
||||
function TicTacToeCntl($scope, $location) {
|
||||
$scope.cellStyle= {
|
||||
'height': '20px',
|
||||
|
|
@ -100,8 +99,8 @@ view.</p>
|
|||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="End to end test">
|
||||
<pre class="prettyprint linenums" ng-set-text="scenario.js-14"></pre>
|
||||
<script type="text/ng-template" id="scenario.js-14">
|
||||
<pre class="prettyprint linenums" ng-set-text="scenario.js-177"></pre>
|
||||
<script type="text/ng-template" id="scenario.js-177">
|
||||
it('should play a game', function() {
|
||||
piece(1, 1);
|
||||
expect(binding('nextMove')).toEqual('O');
|
||||
|
|
@ -118,11 +117,9 @@ view.</p>
|
|||
}
|
||||
</script>
|
||||
</div>
|
||||
</div><h3>Demo</h3>
|
||||
<div class="well doc-example-live animator-container" ng-embed-app="" ng-set-html="index.html-13" ng-eval-javascript="script.js-12"></div>
|
||||
|
||||
</div><h2>Demo</h3>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-176" ng-eval-javascript="script.js-175"></div>
|
||||
<h2>Things to notice</h2>
|
||||
|
||||
<ul>
|
||||
<li>The controller is defined in JavaScript and has no reference to the rendering logic.</li>
|
||||
<li>The controller is instantiated by Angular and injected into the view.</li>
|
||||
|
|
@ -130,9 +127,10 @@ view.</p>
|
|||
This makes it very testable.</li>
|
||||
<li>The HTML view is a projection of the model. In the above example, the model is stored in the
|
||||
board variable.</li>
|
||||
<li>All of the controller's properties (such as board and nextMove) are available to the view.</li>
|
||||
<li>All of the controller's properties (such as board and nextMove) are available to the view.</li>
|
||||
<li>Changing the model changes the view.</li>
|
||||
<li>The view can call any controller function.</li>
|
||||
<li>In this example, the <code>setUrl()</code> and <code>readUrl()</code> functions copy the game state to/from the URL's
|
||||
hash so the browser's back button will undo game steps. See deep-linking. This example calls <a href="api/ng.$rootScope.Scope#$watch"><code>$watch()</code></a> to set up a listener that invokes <code>readUrl()</code> when needed.</li>
|
||||
</ul></div>
|
||||
<li>In this example, the <code>setUrl()</code> and <code>readUrl()</code> functions copy the game state to/from the URL's
|
||||
hash so the browser's back button will undo game steps. See deep-linking. This example calls <a href="api/ng.$rootScope.Scope#$watch"><code>$watch()</code></a> to set up a listener that invokes <code>readUrl()</code> when needed.</li>
|
||||
</ul>
|
||||
</div></div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue