angular.directive.ng:controller.html

<h1>angular.directive.ng:controller</h1>
<div class="angular-directive-ng-controller"><fieldset class="workInProgress"><legend>Work in Progress</legend>
This page is currently being revised. It might be incomplete or contain inaccuracies.</fieldset>
<h2>Description</h2>
<div class="description"><p>The <code>ng:controller</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>ng:controller</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/angular.service.$route"&gt;&lt;code&gt;angular.service.$route&lt;/code&gt;&lt;/a&gt;</code>
service.</p></div>
<h2>Usage</h2>
<div class="usage"><pre class="brush: js; html-script: true;">&lt;ANY ng:controller="expression"&gt;
   ...
&lt;/ANY&gt;</pre>
<h3>Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">expression – {expression} – </code>
<p>Name of a globally accessible constructor function or an
<a href="#!/guide/dev_guide.expressions">expression</a> that on the current scope evaluates to a
constructor function.</p></li>
</ul>
</div>
<h2>Example</h2>
<div class="example"><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
notice that any changes to the data are automatically reflected in the View without the need
for a manual update.</p><doc:example>
     <pre class="doc-source">
      &lt;script type="text/javascript"&gt;
        function SettingsController() {
          this.name = "John Smith";
          this.contacts = [
            {type:'phone', value:'408 555 1212'},
            {type:'email', value:'john.smith@example.org'} ];
        }
        SettingsController.prototype = {
         greet: function(){
           alert(this.name);
         },
         addContact: function(){
           this.contacts.push({type:'email', value:'yourname@example.org'});
         },
         removeContact: function(contactToRemove) {
           angular.Array.remove(this.contacts, contactToRemove);
         },
         clearContact: function(contact) {
           contact.type = 'phone';
           contact.value = '';
         }
        };
      &lt;/script&gt;
      &lt;div ng:controller="SettingsController"&gt;
        Name: &lt;input type="text" name="name"/&gt;
        [ &lt;a href="" ng:click="greet()"&gt;greet&lt;/a&gt; ]&lt;br/&gt;
        Contact:
        &lt;ul&gt;
          &lt;li ng:repeat="contact in contacts"&gt;
            &lt;select name="contact.type"&gt;
               &lt;option&gt;phone&lt;/option&gt;
               &lt;option&gt;email&lt;/option&gt;
            &lt;/select&gt;
            &lt;input type="text" name="contact.value"/&gt;
            [ &lt;a href="" ng:click="clearContact(contact)"&gt;clear&lt;/a&gt;
            | &lt;a href="" ng:click="removeContact(contact)"&gt;X&lt;/a&gt; ]
          &lt;/li&gt;
          &lt;li&gt;[ &lt;a href="" ng:click="addContact()"&gt;add&lt;/a&gt; ]&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/div&gt;
     </pre>
     <pre class="doc-scenario">
       it('should check controller', function(){
         expect(element('.doc-example-live div&gt;:input').val()).toBe('John Smith');
         expect(element('.doc-example-live li[ng\\:repeat-index="0"] input').val())
           .toBe('408 555 1212');
         expect(element('.doc-example-live li[ng\\:repeat-index="1"] 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('.doc-example-live li:last a:contains("add")').click();
         expect(element('.doc-example-live li[ng\\:repeat-index="2"] input').val())
           .toBe('yourname@example.org');
       });
     </pre>
   </doc:example></div>
</div>