From 11e9572b952e49b01035e956c412d6095533031a Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Fri, 29 Apr 2011 15:18:27 -0700 Subject: Move documentation under individual headings --- docs/tutorial.step_02.ngdoc | 137 -------------------------------------------- 1 file changed, 137 deletions(-) delete mode 100755 docs/tutorial.step_02.ngdoc (limited to 'docs/tutorial.step_02.ngdoc') diff --git a/docs/tutorial.step_02.ngdoc b/docs/tutorial.step_02.ngdoc deleted file mode 100755 index 62becdba..00000000 --- a/docs/tutorial.step_02.ngdoc +++ /dev/null @@ -1,137 +0,0 @@ -@workInProgress -@ngdoc overview -@name Tutorial: Step 2 -@description - - - - - - - - -

{@link tutorial.step_00 Previous}

{@link http://angular.github.com/angular-phonecat/step-2/app Example}

{@link tutorial Tutorial Home}

{@link https://github.com/angular/angular-phonecat/compare/step-1...step-2 Code -Diff}

{@link tutorial.step_00 Next}

- -In the last step, we remembered what a basic, static web page looks like, and now we want to get -dynamic. There are many ways to do this, but an important feature of angular is the incorporation -of the principles behind {@link http://en.wikipedia.org/wiki/Model–View–Controller the MVC design -pattern} into client-side web apps. With that in mind, let's use a little angular and a little -JavaScript to add Model, View, and Controller components to our app, and change the static page -into one that is dynamically generated. - -Our __View__ component is constructed by angular from this template: - -__`app/index.html`:__ -

-...
-
-
-  
-    
-      {{phone.name}}
-      {{phone.snippet}}
-    
-  
-
-  
-  
-
-...
-

- -Our data __Model__ (a short list of phones in object literal notation) is instantiated within our -__Controller__ function (`PhoneListCtrl`): - -__`app/js/controllers.js`:__ -

-/* App Controllers */
-
-function PhoneListCtrl() {
-  this.phones = [{"name": "Nexus S",
-                  "snippet": "Fast just got faster with Nexus S."},
-                 {"name": "Motorola XOOM™ with Wi-Fi",
-                  "snippet": "The Next, Next Generation tablet."},
-                 {"name": "MOTOROLA XOOM™",
-                  "snippet": "The Next, Next Generation tablet."}];
-}
-

- -The "Angular way" urges us to test as we develop: - -__`test/unit/controllersSpec.js`:__ -

-/* jasmine specs for controllers go here */
-describe('PhoneCat controllers', function() {
-
-  describe('PhoneListCtrl', function(){
-
-    it('should create "phones" model with 3 phones', function() {
-      var ctrl = new PhoneListCtrl();
-      expect(ctrl.phones.length).toBe(3);
-    });
-  });
-});
-

- -## Discussion: - -So what were our changes from Step 1? - -* __View template:__ We replaced the hard-coded phone list with the {@link -angular.widget.@ng:repeat ng:repeat widget} and two {@link guide.expression angular expressions} -enclosed in curly braces: `{{phone.name}}` and `{{phone.snippet}}`: - - * The `ng:repeat="phone in phones"` statement in the `

` tag is an angular repeater. It - tells angular to create a `

` element for each phone in the phones list, using the first - `

` tag as the template. - - * The curly braces around `phone.name` and `phone.snippet` are an example of {@link - angular.markup angular markup}. The curly braces are shorthand for the angular directive - {@link angular.directive.ng:bind ng:bind}. They indicate to angular that these are template - binding points. Binding points are locations in the template where angular creates - data-binding between the View and the Model. In angular, the View is a projection of the Model - through the HTML template. This means that whenever the model changes, angular refreshes the - appropriate binding points, which updates the view. - -* __Controller:__ At this point, it doesn't appear as if our controller is doing very much -controlling, but it is playing a crucial role: providing context for our data model so we can -establish data-binding between the model and the view. Note in the following how we connected the -dots between our presentation, data, and logic components: - - * The name of our controller function (in the JavaScript file `controllers.js`) matches the - {@link angular.directive.ng:controller ng:controller} directive in the `` tag - (`PhoneListCtrl`). - * We instantiated our data within the scope of our controller function, and our template - binding points are located within the block bounded by the ` - - {@link tutorial.step_00 Previous} - {@link http://angular.github.com/angular-phonecat/step-2/app Example} - {@link tutorial Tutorial Home} -{@link https://github.com/angular/angular-phonecat/compare/step-1...step-2 Code -Diff} - {@link tutorial.step_00 Next} - - -- cgit v1.2.3