`
+tag as the template.
+
+ 
+
+* The curly braces around `phone.name` and `phone.snippet` are examples of {@link
+guide/dev_guide.compiler.markup Angular markup}. The curly markup is shorthand for the Angular
+directive {@link api/angular.directive.ng:bind ng:bind}. An `ng:bind` directive indicates a
+template binding point to Angular. Binding points are locations in a 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.
+
+
+## Model and Controller
+
+The data __model__ (a simple array of phones in object literal notation) is instantiated within
+the __controller__ function(`PhoneListCtrl`):
+
+__`app/js/controllers.js`:__
+
+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."}];
+}
+
+
+
+
+
+Although the controller is not yet doing very much controlling, it is playing a crucial role. By
+providing context for our data model, the controller allows us to establish data-binding between
+the model and the view. We connected the dots between the presentation, data, and logic components
+as follows:
+
+* The name of our controller function(in the JavaScript file `controllers.js`) matches the {@link
+api/angular.directive.ng:controller ng:controller} directive in the `` tag (`PhoneListCtrl`).
+* The data is instantiated within the *scope* of our controller function; our template binding
+points are located within the block bounded by the `` tag.
+
+ The concept of a scope in Angular is crucial; a scope can be seen as the glue which allows the
+template, model and controller to work together. Angular uses scopes, along with the information
+contained in the template, data model, and controller, to keep models and views separate, but in
+sync. Any changes made to the model are reflected in the view; any changes that occur in the view
+are reflected in the model.
+
+ To learn more about Angular scopes, see the {@link api/angular.module.ng.$rootScope.Scope angular scope documentation}.
+
+
+## Tests
+
+The "Angular way" makes it easy to test code as it is being developed. Take a look at the following
+unit test for your newly created controller:
+
+__`test/unit/controllersSpec.js`:__
+
+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);
+ });
+ });
+});
+
+
+The test verifies that we have three records in the phones array and the example demonstrates how
+easy it is to create a unit test for code in Angular. Since testing is such a critical part of
+software development, we make it easy to create tests in Angular so that developers are encouraged
+to write them.
+
+Angular developers prefer the syntax of Jasmine's Behavior-driven Development (BDD) framework when
+writing tests. Although Angular does not require you to use Jasmine, we wrote all of the tests in
+this tutorial in Jasmine. You can learn about Jasmine on the {@link
+http://pivotal.github.com/jasmine/ Jasmine home page} and on the {@link
+https://github.com/pivotal/jasmine/wiki Jasmine wiki}.
+
+The angular-seed project is pre-configured to run all unit tests using {@link
+http://code.google.com/p/js-test-driver/ JsTestDriver}. To run the test, do the following:
+
+1. In a _separate_ terminal window or tab, go to the `angular-phonecat` directory and run
+`./scripts/test-server.sh` to start the test web server.
+
+2. Open a new browser tab or window and navigate to {@link http://localhost:9876}.
+
+3. Choose "Capture this browser in strict mode".
+
+ At this point, you can leave this tab open and forget about it. JsTestDriver will use it to
+execute the tests and report the results in the terminal.
+
+4. Execute the test by running `./scripts/test.sh`
+
+ You should see the following or similar output:
+
+ Chrome: Runner reset.
+ .
+ Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (2.00 ms)
+ Chrome 11.0.696.57 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)
+
+ Yay! The test passed! Or not...
+
+ Note: If you see errors after you run the test, close the browser tab and go back to the terminal
+and kill the script, then repeat the procedure above.
+
+# Experiments
+
+* Add another binding to `index.html`. For example:
+
+ Total number of phones: {{phones.length}}
+
+* Create a new model property in the controller and bind to it from the template. For example:
+
+ this.hello = "Hello, World!"
+
+ Refresh your browser to make sure it says, "Hello, World!"
+
+* Create a repeater that constructs a simple table:
+
+
+
+ Now, make the list 1-based by incrementing `i` by one in the binding:
+
+
+
+* Make the unit test fail by changing the `toBe(3)` statement to `toBe(4)`, and rerun the
+`./scripts/test.sh` script.
+
+
+# Summary
+
+You now have a dynamic app that features separate model, view, and controller components, and you
+are testing as you go. Now, let's go to {@link step_03 step 3} to learn how to add full text search
+to the app.
+
+
+
--
cgit v1.2.3