aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/tutorial/step_02.ngdoc
diff options
context:
space:
mode:
authorIgor Minar2012-01-15 23:28:10 -0800
committerIgor Minar2012-01-17 09:49:37 -0800
commit92af30ce6e99676c71c85bd08962b68629564908 (patch)
tree4adf4b56cbf7c9fb6ee9dee8f40dd16fb2199842 /docs/content/tutorial/step_02.ngdoc
parent54581d36df74ac128a078aafb3e4b66e0b1599f3 (diff)
downloadangular.js-92af30ce6e99676c71c85bd08962b68629564908.tar.bz2
docs(*): various doc fixes
Diffstat (limited to 'docs/content/tutorial/step_02.ngdoc')
-rw-r--r--docs/content/tutorial/step_02.ngdoc203
1 files changed, 0 insertions, 203 deletions
diff --git a/docs/content/tutorial/step_02.ngdoc b/docs/content/tutorial/step_02.ngdoc
deleted file mode 100644
index ceeb0e92..00000000
--- a/docs/content/tutorial/step_02.ngdoc
+++ /dev/null
@@ -1,203 +0,0 @@
-@ngdoc overview
-@name Tutorial: 2 - Angular Templates
-@description
-
-<ul doc:tutorial-nav="2"></ul>
-
-
-Now it's time to make the web page dynamic -- with Angular. We'll also add a test that verifies the
-code for the controller we are going to add.
-
-There are many ways to structure the code for an application. For Angular apps, we encourage the
-use of {@link http://en.wikipedia.org/wiki/Model–View–Controller the Model-View-Controller (MVC)
-design pattern} to decouple the code and to separate concerns. With that in mind, let's use a
-little Angular and JavaScript to add model, view, and controller components to our app.
-
-
-<doc:tutorial-instructions step="2"></doc:tutorial-instructions>
-
-
-The app now contains a list with three phones.
-
-The most important changes are listed below. You can see the full diff on {@link
-https://github.com/angular/angular-phonecat/compare/step-1...step-2 GitHub}:
-
-
-## Template for the View
-
-The __view__ component is constructed by Angular from this template:
-
-__`app/index.html`:__
-<pre>
-<html ng:app>
-...
-<body ng:controller="PhoneListCtrl">
-
- <ul>
- <li ng:repeat="phone in phones">
- {{phone.name}}
- <p>{{phone.snippet}}</p>
- </li>
- </ul>
-
- <script src="lib/angular/angular.js"></script>
- <script src="js/controllers.js"></script>
-</body>
-</html>
-</pre>
-
-We replaced the hard-coded phone list with the {@link api/angular.widget.@ng:repeat ng:repeat
-widget} and two {@link guide/dev_guide.expressions Angular expressions} enclosed in curly braces:
-`{{phone.name}}` and `{{phone.snippet}}`:
-
-* The `ng:repeat="phone in phones"` statement in the `<li>` tag is an Angular repeater. The
-repeater tells Angular to create a `<li>` element for each phone in the list using the first `<li>`
-tag as the template.
-
- <img src="img/tutorial/tutorial_02_final.png">
-
-* 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`:__
-<pre>
-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."}];
-}
-</pre>
-
-
-
-
-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 `<body>` 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 `<body ng:controller="PhoneListCtrl">` 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`:__
-<pre>
-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);
- });
- });
-});
-</pre>
-
-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:
-
- <p>Total number of phones: {{phones.length}}</p>
-
-* 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:
-
- <table>
- <tr><th>row number</th></tr>
- <tr ng:repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>
- </table>
-
- Now, make the list 1-based by incrementing `i` by one in the binding:
-
- <table>
- <tr><th>row number</th></tr>
- <tr ng:repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr>
- </table>
-
-* 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.
-
-
-<ul doc:tutorial-nav="2"></ul>
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-31 20:38:57 +0000