aboutsummaryrefslogtreecommitdiffstats
path: root/src/ng/directive/ngController.js
diff options
context:
space:
mode:
authorMisko Hevery2012-03-23 14:03:24 -0700
committerMisko Hevery2012-03-28 11:16:35 -0700
commit2430f52bb97fa9d682e5f028c977c5bf94c5ec38 (patch)
treee7529b741d70199f36d52090b430510bad07f233 /src/ng/directive/ngController.js
parent944098a4e0f753f06b40c73ca3e79991cec6c2e2 (diff)
downloadangular.js-2430f52bb97fa9d682e5f028c977c5bf94c5ec38.tar.bz2
chore(module): move files around in preparation for more modules
Diffstat (limited to 'src/ng/directive/ngController.js')
-rw-r--r--src/ng/directive/ngController.js103
1 files changed, 103 insertions, 0 deletions
diff --git a/src/ng/directive/ngController.js b/src/ng/directive/ngController.js
new file mode 100644
index 00000000..8e2c6f3b
--- /dev/null
+++ b/src/ng/directive/ngController.js
@@ -0,0 +1,103 @@
+'use strict';
+
+/**
+ * @ngdoc directive
+ * @name angular.module.ng.$compileProvider.directive.ng-controller
+ *
+ * @description
+ * The `ng-controller` directive assigns behavior to a scope. This is a key aspect of how angular
+ * supports the principles behind the Model-View-Controller design pattern.
+ *
+ * MVC components in angular:
+ *
+ * * Model — The Model is data in scope properties; scopes are attached to the DOM.
+ * * View — The template (HTML with data bindings) is rendered into the View.
+ * * Controller — The `ng-controller` directive specifies a Controller class; the class has
+ * methods that typically express the business logic behind the application.
+ *
+ * Note that an alternative way to define controllers is via the `{@link angular.module.ng.$route}`
+ * service.
+ *
+ * @element ANY
+ * @scope
+ * @param {expression} ng-controller Name of a globally accessible constructor function or an
+ * {@link guide/dev_guide.expressions expression} that on the current scope evaluates to a
+ * constructor function.
+ *
+ * @example
+ * 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 `this` 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.
+ <doc:example>
+ <doc:source>
+ <script type="text/javascript">
+ function SettingsController($scope) {
+ $scope.name = "John Smith";
+ $scope.contacts = [
+ {type:'phone', value:'408 555 1212'},
+ {type:'email', value:'john.smith@example.org'} ];
+
+ $scope.greet = function() {
+ alert(this.name);
+ };
+
+ $scope.addContact = function() {
+ this.contacts.push({type:'email', value:'yourname@example.org'});
+ };
+
+ $scope.removeContact = function(contactToRemove) {
+ var index = this.contacts.indexOf(contactToRemove);
+ this.contacts.splice(index, 1);
+ };
+
+ $scope.clearContact = function(contact) {
+ contact.type = 'phone';
+ contact.value = '';
+ };
+ }
+ </script>
+ <div ng-controller="SettingsController">
+ Name: <input type="text" ng-model="name"/>
+ [ <a href="" ng-click="greet()">greet</a> ]<br/>
+ Contact:
+ <ul>
+ <li ng-repeat="contact in contacts">
+ <select ng-model="contact.type">
+ <option>phone</option>
+ <option>email</option>
+ </select>
+ <input type="text" ng-model="contact.value"/>
+ [ <a href="" ng-click="clearContact(contact)">clear</a>
+ | <a href="" ng-click="removeContact(contact)">X</a> ]
+ </li>
+ <li>[ <a href="" ng-click="addContact()">add</a> ]</li>
+ </ul>
+ </div>
+ </doc:source>
+ <doc:scenario>
+ 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())
+ .toBe('408 555 1212');
+ expect(element('.doc-example-live 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('.doc-example-live li:last a:contains("add")').click();
+ expect(element('.doc-example-live li:nth-child(3) input').val())
+ .toBe('yourname@example.org');
+ });
+ </doc:scenario>
+ </doc:example>
+ */
+var ngControllerDirective = [function() {
+ return {
+ scope: true,
+ controller: '@'
+ };
+}];