From 0a604bdb90e9dff9399bae0fb4941fe46cc7e9f9 Mon Sep 17 00:00:00 2001
From: Kenneth R. Culp
Date: Tue, 26 Apr 2011 09:54:08 -0700
Subject: Tutorial files for your perusal.
---
docs/tutorial.step_7.ngdoc | 159 +++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 159 insertions(+)
create mode 100755 docs/tutorial.step_7.ngdoc
(limited to 'docs/tutorial.step_7.ngdoc')
diff --git a/docs/tutorial.step_7.ngdoc b/docs/tutorial.step_7.ngdoc
new file mode 100755
index 00000000..3b5984b4
--- /dev/null
+++ b/docs/tutorial.step_7.ngdoc
@@ -0,0 +1,159 @@
+@workInProgress
+@ngdoc overview
+@name Tutorial: Step 7
+@description
+
+
+| {@link tutorial.step_6 Previous} |
+{@link http://angular.github.com/angular-phonecat/step-7/app Example} |
+{@link tutorial Tutorial Home} |
+{@link
+https://github.com/angular/angular-phonecat/commit/43ff5d76f1c0a464da67d691418e33e6c9d8dbc8 Code
+Diff} |
+{@link tutorial.step_8 Next} |
+
+
+
+In this step we introduce angular's {@link angular.service.$route $route} service. This service
+is usually used in conjunction with the {@link angular.widget.ng:view ng:view} directive. The
+`$route` service makes it easy to wire together controllers, View templates, and the current URL
+location in the browser. Using this feature we can implement {@link
+http://en.wikipedia.org/wiki/Deep_linking deep linking}, which lets us utilize the browser's
+History, and Back and Forward browser navigation.
+
+We'll use {@link angular.service.$route $route} to implement two different views for our
+application: one view presents the phone listing, and the other view presents the details for a
+particular phone. We'll use {@link angular.widget.ng:view ng:view} to include one or the other of
+those views in our main layout page (`index.html`). The view presented in the layout page is based
+on which URL the user navigates to.
+
+To manage our two different views, we'll move the existing phone list controller into a
+sub-controller, add a second sub-controller to handle the phone details, and we'll create a new
+root controller to implement the routing. (We'll save the implementation of the phone details
+View for the next step.)
+
+__`app/index.html`:__
+
+
+...
+
+
+...
+
+
+__`app/partials/phone-list.html`:__
+
+
+
+
+
+
+__`app/js/controller.js`:__
+
+/* App Controllers */
+
+function PhoneCatCtrl($route) {
+ var self = this;
+
+ $route.when('/phones',
+ {template: 'partials/phone-list.html', controller: PhoneListCtrl});
+ $route.when('/phones/:phoneId',
+ {template: 'partials/phone-detail.html', controller: PhoneDetailCtrl});
+ $route.otherwise({redirectTo: '/phones'});
+
+ $route.onChange(function(){
+ self.params = $route.current.params;
+ });
+
+ $route.parent(this);
+}
+
+//PhoneCatCtrl.$inject = ['$route'];
+
+
+function PhoneListCtrl($xhr) {
+ var self = this;
+
+ $xhr('GET', 'phones/phones.json', function(code, response) {
+ self.phones = response;
+ });
+
+ self.orderProp = 'age';
+}
+
+//PhoneListCtrl.$inject = ['$xhr'];
+
+
+function PhoneDetailCtrl() {}
+
+
+## Discussion:
+
+We have many changes to discuss here in Step 7:
+
+* __The View.__ Our View template in `index.html` has been reduced down to this:
+``. It is now what we call a "layout template", because it contains
+information common for all views, including the layout of our application. The {@link
+angular.widget.ng:view ng:view} directive behaves like an "include" declaration (it's a
+specialized sibling of the {@link angular.widget.ng:include ng:include} directive) that works
+specifically with the {@link angular.service.$route $route} service. The View template associated
+with the current route definition gets included "between those tags" (there's more to it than a
+simple include, but that explanation will do for now).
+
+ * We added two new View templates:
+
+ * `app/partials/phone-list.html` for the phone list;
+
+ * `app/partials/phone-detail.html` for the phone details (just a stub for this step);
+
+* __The Controller(s).__ We now have a new root controller (`PhoneCatCtrl`) and two
+sub-controllers (`PhoneListCtrl` and `PhoneDetailCtrl`).
+
+ * __`$route.`__ The root controller's job now is to set up the `$route` configuration:
+
+ * When the fragment part of the URL in the browser ends in "/phones", `$route` grabs the
+ `phone-list.html` template, compiles it, and links it with a new scope that is controlled
+ by our `PhoneListCtrl` controller.
+
+ * When the URL ends in "/phones/:phoneId", `$route` compiles and links the
+ `phone-detail.html` template as it did with `phone-list.html`. But note the use of the
+ variable `:phoneId` in the `path` parameter of `$route.when()`: `$route` stores that
+ portion of the current URL fragment in its current parameters in a property called
+ `params.phoneId`. We made the `$route` parameters available to our sub-controllers in the
+ `$route.onChange()` function in our root controller. We will use the `phoneId` property
+ when we fetch the phone details in Step 8.
+
+ * Any other URL fragment gets redirected to `/phones`.
+
+ * __Deep Linking.__ In `$route`'s `onChange()` method, we copied {@link
+ http://en.wikipedia.org/wiki/Deep_linking deep linking} parameters to the `params` property in
+ the root scope, so we can use them in the child scopes managed by our sub-controllers.
+
+
+
+| {@link tutorial.step_6 Previous} |
+{@link http://angular.github.com/angular-phonecat/step-7/app Example} |
+{@link tutorial Tutorial Home} |
+{@link
+https://github.com/angular/angular-phonecat/commit/43ff5d76f1c0a464da67d691418e33e6c9d8dbc8 Code
+Diff} |
+{@link tutorial.step_8 Next} |
+
+
--
cgit v1.2.3