jeena/Podcast
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Upgrade to angularjs 1.2.0 rc1

Browse source
This commit is contained in:
Colin Frei 2013-08-21 19:46:51 +02:00
parent d223dfd662
commit d6b021bfaf
674 changed files with 79667 additions and 62269 deletions
Download patch file Download diff file Expand all files Collapse all files

149
lib/angular/docs/partials/api/ng.directive:ngController.html Normal file → Executable file
View file

@ -1,22 +1,20 @@
<h1><code ng:non-bindable="">ngController</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
<a href="http://github.com/angular/angular.js/tree/v1.2.0rc1/src/ng/directive/ngController.js#L3" class="view-source btn btn-action"><i class="icon-zoom-in"> </i> View source</a><a href="http://github.com/angular/angular.js/edit/master/src/ng/directive/ngController.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">ngController</code>
<div><span class="hint">directive in module <code ng:non-bindable="">ng</code>
</span>
</div>
</h1>
<div><a href="http://github.com/angular/angular.js/edit/master/src/ng/directive/ngController.js" class="improve-docs btn btn-primary">Improve this doc</a><h2 id="Description">Description</h2>
<div class="description"><p>The <code>ngController</code> directive assigns behavior to a scope. This is a key aspect of how angular
<div><h2 id="Description">Description</h2>
<div class="description"><div class="ng-directive-page ng-directive-ngcontroller-page"><p>The <code>ngController</code> directive assigns behavior to a scope. This is a key aspect of how angular
supports the principles behind the Model-View-Controller design pattern.</p>
<p>MVC components in angular:</p>
<ul>
<li>Model — The Model is data in scope properties; scopes are attached to the DOM.</li>
<li>View — The template (HTML with data bindings) is rendered into the View.</li>
<li>Controller — The <code>ngController</code> directive specifies a Controller class; the class has
methods that typically express the business logic behind the application.</li>
</ul>
<p>Note that an alternative way to define controllers is via the <code>&lt;a href="api/ng.$route"&gt;&lt;code&gt;ng.$route&lt;/code&gt;&lt;/a&gt;</code>
service.</p></div>
<p>Note that an alternative way to define controllers is via the <a href="api/ngRoute.$route">$route</a> service.</p>
</div></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-controller="{expression}"&gt;
...
@ -28,27 +26,101 @@ as class<pre class="prettyprint linenums">&lt;ANY class="ng-controller: {express
<div class="directive-info"><ul><li>This directive creates new scope.</li>
</ul>
</div>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngController – {expression} – </code>
<p>Name of a globally accessible constructor function or an
<h4 id="parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>ngController</td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><div class="ng-directive-page ng-directive-ngcontroller-page"><p>Name of a globally accessible constructor function or an
<a href="guide/expression">expression</a> that on the current scope evaluates to a
constructor function.</p></li>
</ul>
</div>
constructor function. The controller instance can further be published into the scope
by adding <code>as localName</code> the controller name attribute.</p>
</div></td></tr></tbody></table></div>
<h2 id="Example">Example</h2>
<div class="example"><p>Here is a simple form for editing user contact information. Adding, removing, clearing, and
<div class="example"><div class="ng-directive-page ng-directive-ngcontroller-page"><p>Here is a simple form for editing user contact information. Adding, removing, clearing, and
greeting are methods declared on the controller (see source tab). These methods can
easily be called from the angular markup. Notice that the scope becomes the <code>this</code> for the
controller's instance. This allows for easy access to the view data from the controller. Also
controller&#39;s instance. This allows for easy access to the view data from the controller. Also
notice that any changes to the data are automatically reflected in the View without the need
for a manual update.
<h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-152" source-edit-css="" source-edit-js="script.js-151" source-edit-unit="" source-edit-scenario="scenario.js-153"></div>
for a manual update. The example is included in two different declaration styles based on
your style preferences.
<h4>Source</h2>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-67" source-edit-css="" source-edit-js="script.js-66" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-68"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-152" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-152">
<pre class="prettyprint linenums" ng-set-text="index.html-67" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-67">
<div ng-controller="SettingsController">
<div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
Name: <input type="text" ng-model="settings.name"/>
[ <a href="" ng-click="settings.greet()">greet</a> ]<br/>
Contact:
<ul>
<li ng-repeat="contact in settings.contacts">
<select ng-model="contact.type">
<option>phone</option>
<option>email</option>
</select>
<input type="text" ng-model="contact.value"/>
[ <a href="" ng-click="settings.clearContact(contact)">clear</a>
| <a href="" ng-click="settings.removeContact(contact)">X</a> ]
</li>
<li>[ <a href="" ng-click="settings.addContact()">add</a> ]</li>
</ul>
</div>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-66"></pre>
<script type="text/ng-template" id="script.js-66">
function SettingsController1() {
this.name = "John Smith";
this.contacts = [
{type: 'phone', value: '408 555 1212'},
{type: 'email', value: 'john.smith@example.org'} ];
};
SettingsController1.prototype.greet = function() {
alert(this.name);
};
SettingsController1.prototype.addContact = function() {
this.contacts.push({type: 'email', value: 'yourname@example.org'});
};
SettingsController1.prototype.removeContact = function(contactToRemove) {
var index = this.contacts.indexOf(contactToRemove);
this.contacts.splice(index, 1);
};
SettingsController1.prototype.clearContact = function(contact) {
contact.type = 'phone';
contact.value = '';
};
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-68"></pre>
<script type="text/ng-template" id="scenario.js-68">
it('should check controller as', function() {
expect(element('#ctrl-as-exmpl>:input').val()).toBe('John Smith');
expect(element('#ctrl-as-exmpl li:nth-child(1) input').val())
.toBe('408 555 1212');
expect(element('#ctrl-as-exmpl li:nth-child(2) input').val())
.toBe('john.smith@example.org');
element('#ctrl-as-exmpl li:first a:contains("clear")').click();
expect(element('#ctrl-as-exmpl li:first input').val()).toBe('');
element('#ctrl-as-exmpl li:last a:contains("add")').click();
expect(element('#ctrl-as-exmpl li:nth-child(3) input').val())
.toBe('yourname@example.org');
});
</script>
</div>
</div><h2>Demo</h2>
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-67" ng-eval-javascript="script.js-66"></div>
<h2>Source</h2>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-70" source-edit-css="" source-edit-js="script.js-69" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-71"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-70" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-70">
<div id="ctrl-exmpl" ng-controller="SettingsController2">
Name: <input type="text" ng-model="name"/>
[ <a href="" ng-click="greet()">greet</a> ]<br/>
Contact:
@ -68,9 +140,9 @@ for a manual update.
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-151"></pre>
<script type="text/ng-template" id="script.js-151">
function SettingsController($scope) {
<pre class="prettyprint linenums" ng-set-text="script.js-69"></pre>
<script type="text/ng-template" id="script.js-69">
function SettingsController2($scope) {
$scope.name = "John Smith";
$scope.contacts = [
{type:'phone', value:'408 555 1212'},
@ -97,24 +169,25 @@ for a manual update.
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-153"></pre>
<script type="text/ng-template" id="scenario.js-153">
<pre class="prettyprint linenums" ng-set-text="scenario.js-71"></pre>
<script type="text/ng-template" id="scenario.js-71">
it('should check controller', function() {
expect(element('.doc-example-live div>:input').val()).toBe('John Smith');
expect(element('.doc-example-live li:nth-child(1) input').val())
expect(element('#ctrl-exmpl>:input').val()).toBe('John Smith');
expect(element('#ctrl-exmpl li:nth-child(1) input').val())
.toBe('408 555 1212');
expect(element('.doc-example-live li:nth-child(2) input').val())
expect(element('#ctrl-exmpl li:nth-child(2) input').val())
.toBe('john.smith@example.org');
element('.doc-example-live li:first a:contains("clear")').click();
expect(element('.doc-example-live li:first input').val()).toBe('');
element('#ctrl-exmpl li:first a:contains("clear")').click();
expect(element('#ctrl-exmpl li:first input').val()).toBe('');
element('.doc-example-live li:last a:contains("add")').click();
expect(element('.doc-example-live li:nth-child(3) input').val())
element('#ctrl-exmpl li:last a:contains("add")').click();
expect(element('#ctrl-exmpl li:nth-child(3) input').val())
.toBe('yourname@example.org');
});
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live animator-container" ng-embed-app="" ng-set-html="index.html-152" ng-eval-javascript="script.js-151"></div></div>
</div><h2>Demo</h4>
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-70" ng-eval-javascript="script.js-69"></div>
</div></div>
</div>