|
9 | 9 | * and to provide custom tools to make it easier to use routing with Angular
|
10 | 10 | * templates.
|
11 | 11 | *
|
12 |
| - * Lets consider a simple recipe book application. The application might have |
| 12 | + * Let's consider a simple recipe book application. The application might have |
13 | 13 | * the following pages:
|
14 | 14 | *
|
15 | 15 | * * recipes list/search
|
|
25 | 25 | * * `/recipe/:recipeId/edit`
|
26 | 26 | *
|
27 | 27 | *
|
28 |
| - * Lets try to define those routes in Angular. To get started we need to |
| 28 | + * Let's try to define those routes in Angular. To get started we need to |
29 | 29 | * provide an implementation of [RouteInitializerFn] function.
|
30 | 30 | *
|
31 |
| - * void initRoutes(Router router, RouteViewFactory view) { |
32 |
| - * // define routes here. |
33 |
| - * } |
34 |
| - * |
35 |
| - * var module = new Module() |
36 |
| - * ..value(RouteInitializerFn, initRoutes); |
37 |
| - * |
38 |
| - * Lets see how we could define our routes using the routing framework: |
| 31 | + * void initRoutes(Router router, RouteViewFactory view) { |
| 32 | + * // define routes here. |
| 33 | + * } |
39 | 34 | *
|
40 |
| - * void initRoutes(Router router, RouteViewFactory view) { |
41 |
| - * router |
42 |
| - * ..addRoute( |
43 |
| - * name: 'recipes', |
44 |
| - * path: '/recipes', |
45 |
| - * enter: view('recipes.html')) |
46 |
| - * ..addRoute( |
47 |
| - * name: 'addRecipe', |
48 |
| - * path: '/addRecipe', |
49 |
| - * enter: view('addRecipe.html')) |
50 |
| - * ..addRoute( |
51 |
| - * name: 'viewRecipe', |
52 |
| - * path: '/recipe/:recipeId/view', |
53 |
| - * enter: view('viewRecipe.html')) |
54 |
| - * ..addRoute( |
55 |
| - * name: 'editRecipe', |
56 |
| - * path: '/recipe/:recipeId/edit', |
57 |
| - * enter: view('editRecipe.html')); |
58 |
| - * } |
| 35 | + * var module = new Module() |
| 36 | + * ..value(RouteInitializerFn, initRoutes); |
| 37 | + * |
| 38 | + * Let's see how we could define our routes using the routing framework: |
| 39 | + * |
| 40 | + * void initRoutes(Router router, RouteViewFactory view) { |
| 41 | + * router.root |
| 42 | + * ..addRoute( |
| 43 | + * name: 'recipes', |
| 44 | + * path: '/recipes', |
| 45 | + * enter: view('recipes.html')) |
| 46 | + * ..addRoute( |
| 47 | + * name: 'addRecipe', |
| 48 | + * path: '/addRecipe', |
| 49 | + * enter: view('addRecipe.html')) |
| 50 | + * ..addRoute( |
| 51 | + * name: 'viewRecipe', |
| 52 | + * path: '/recipe/:recipeId/view', |
| 53 | + * enter: view('viewRecipe.html')) |
| 54 | + * ..addRoute( |
| 55 | + * name: 'editRecipe', |
| 56 | + * path: '/recipe/:recipeId/edit', |
| 57 | + * enter: view('editRecipe.html')); |
| 58 | + * } |
59 | 59 | *
|
60 | 60 | * We defined 4 routes and for each route we set views (templates) to be
|
61 | 61 | * displayed when that route is "entered". For example, when the browser URL
|
|
66 | 66 | *
|
67 | 67 | * Notice that `viewRecipe` and `editRecipe` route paths have `recipeId`
|
68 | 68 | * parameter in them. We need to be able to get hold of that parameter in
|
69 |
| - * order to know which recipe to load. Lets consider the following |
| 69 | + * order to know which recipe to load. Let's consider the following |
70 | 70 | * `viewRecipe.html`.
|
71 | 71 | *
|
72 | 72 | * <view-recipe></view-recipe>
|
|
84 | 84 | * }
|
85 | 85 | *
|
86 | 86 | * [RouteProvider] and [Route] can be used to control navigation, specifically,
|
87 |
| - * leaving of the route. For example, lets consider "edit recipe" component: |
| 87 | + * leaving of the route. For example, let's consider "edit recipe" component: |
88 | 88 | *
|
89 | 89 | * @NgComponent(...)
|
90 | 90 | * class EditRecipeComponent implements NgDetachAware {
|
|
124 | 124 | * example we could have defined our routes like this:
|
125 | 125 | *
|
126 | 126 | * void initRoutes(Router router, RouteViewFactory view) {
|
127 |
| - * router |
128 |
| - * ..addRoute( |
129 |
| - * name: 'recipes', |
130 |
| - * path: '/recipes', |
131 |
| - * enter: view('recipes.html')) |
132 |
| - * ..addRoute( |
133 |
| - * name: 'addRecipe', |
134 |
| - * path: '/addRecipe', |
135 |
| - * enter: view('addRecipe.html')) |
136 |
| - * ..addRoute( |
137 |
| - * name: 'recipe', |
138 |
| - * path: '/recipe/:recipeId', |
139 |
| - * mount: (Route route) => route |
140 |
| - * ..addRoute( |
141 |
| - * name: 'view', |
142 |
| - * path: '/view', |
143 |
| - * enter: view('viewRecipe.html')) |
144 |
| - * ..addRoute( |
145 |
| - * name: 'edit', |
146 |
| - * path: '/edit', |
147 |
| - * enter: view('editRecipe.html'))); |
| 127 | + * router.root |
| 128 | + * ..addRoute( |
| 129 | + * name: 'recipes', |
| 130 | + * path: '/recipes', |
| 131 | + * enter: view('recipes.html')) |
| 132 | + * ..addRoute( |
| 133 | + * name: 'addRecipe', |
| 134 | + * path: '/addRecipe', |
| 135 | + * enter: view('addRecipe.html')) |
| 136 | + * ..addRoute( |
| 137 | + * name: 'recipe', |
| 138 | + * path: '/recipe/:recipeId', |
| 139 | + * mount: (Route route) => route |
| 140 | + * ..addRoute( |
| 141 | + * name: 'view', |
| 142 | + * path: '/view', |
| 143 | + * enter: view('viewRecipe.html')) |
| 144 | + * ..addRoute( |
| 145 | + * name: 'edit', |
| 146 | + * path: '/edit', |
| 147 | + * enter: view('editRecipe.html'))); |
148 | 148 | * }
|
149 | 149 | *
|
150 | 150 | */
|
|
0 commit comments