| OLD | NEW |
| 1 /** | 1 /** |
| 2 * Routing library makes it easier to build large single-page application. The | 2 * The [routing] library makes it easier to build large single-page applications
. The |
| 3 * library lets you map the browser address bar to semantic structure of your | 3 * library lets you map the browser address bar to semantic structure of your |
| 4 * application and keeps them in sync. | 4 * application and keeps them in sync. |
| 5 * | 5 * |
| 6 * Angular uses [route_hierarchical] package to define application routes and | 6 * Angular uses the [route_hierarchical] package to define application routes an
d |
| 7 * provides custom tools that it easier to use routing with Angular templates. | 7 * to provide custom tools to make it easier to use routing with Angular templat
es. |
| 8 * | 8 * |
| 9 * Lets consider a simple recipe book application. The application might have | 9 * Lets consider a simple recipe book application. The application might have |
| 10 * the following pages: | 10 * the following pages: |
| 11 * | 11 * |
| 12 * * recipes list/search | 12 * * recipes list/search |
| 13 * * add new recipe | 13 * * add new recipe |
| 14 * * view recipe | 14 * * view recipe |
| 15 * * edit recipe | 15 * * edit recipe |
| 16 * | 16 * |
| 17 * Each of those pages can be represented by an address: | 17 * Each of those pages can be represented by an address: |
| (...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 65 * You have to tell Angular where to load views by putting `<ng-view>` tag in | 65 * You have to tell Angular where to load views by putting `<ng-view>` tag in |
| 66 * you template. | 66 * you template. |
| 67 * | 67 * |
| 68 * Notice that `viewRecipe` and `editRecipe` route paths have `recipeId` | 68 * Notice that `viewRecipe` and `editRecipe` route paths have `recipeId` |
| 69 * parameter in them. We need to be able to get hold of that parameter in | 69 * parameter in them. We need to be able to get hold of that parameter in |
| 70 * order to know which recipe to load. Lets consider the following | 70 * order to know which recipe to load. Lets consider the following |
| 71 * `viewRecipe.html`. | 71 * `viewRecipe.html`. |
| 72 * | 72 * |
| 73 * <view-recipe></view-recipe> | 73 * <view-recipe></view-recipe> |
| 74 * | 74 * |
| 75 * The template contains a custom `view-recipe` component that handles the | 75 * The template contains a custom `view-recipe` component that handles |
| 76 * displaying of the recipe. Now, our `view-recipe` can inject [RouteProvider] | 76 * displaying the recipe. Now, our `view-recipe` can inject [RouteProvider] |
| 77 * to get hold of the route and its parameters. It might look like this: | 77 * to get hold of the route and its parameters. It might look like this: |
| 78 * | 78 * |
| 79 * @NgComponent(...) | 79 * @NgComponent(...) |
| 80 * class ViewRecipeComponent { | 80 * class ViewRecipeComponent { |
| 81 * ViewRecipeComponent(RouteProvider routeProvider) { | 81 * ViewRecipeComponent(RouteProvider routeProvider) { |
| 82 * String recipeId = routeProvider.parameters['recipeId']; | 82 * String recipeId = routeProvider.parameters['recipeId']; |
| 83 * _loadRecipe(recipeId); | 83 * _loadRecipe(recipeId); |
| 84 * } | 84 * } |
| 85 * } | 85 * } |
| 86 * | 86 * |
| (...skipping 90 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 177 value(RouteInitializer, null); | 177 value(RouteInitializer, null); |
| 178 | 178 |
| 179 // directives | 179 // directives |
| 180 value(NgViewDirective, null); | 180 value(NgViewDirective, null); |
| 181 type(NgBindRouteDirective); | 181 type(NgBindRouteDirective); |
| 182 } | 182 } |
| 183 } | 183 } |
| 184 | 184 |
| 185 /** | 185 /** |
| 186 * Allows configuration of [Router.useFragment]. By default [usePushState] is | 186 * Allows configuration of [Router.useFragment]. By default [usePushState] is |
| 187 * true, so router will be listen to [Window.onPopState] and route URLs like | 187 * true, so the router will listen to [Window.onPopState] and route URLs like |
| 188 * "http://host:port/foo/bar?baz=qux". Both path and query parts of the URL | 188 * "http://host:port/foo/bar?baz=qux". Both the path and query parts of the URL |
| 189 * are used by the router. If [usePushState] is false, router will listen to | 189 * are used by the router. If [usePushState] is false, router will listen to |
| 190 * [Window.onHashChange] and route URLs like | 190 * [Window.onHashChange] and route URLs like |
| 191 * "http://host:port/path#/foo/bar?baz=qux". Everything after hash (#) is used | 191 * "http://host:port/path#/foo/bar?baz=qux". Everything after hash (#) is used |
| 192 * by the router. | 192 * by the router. |
| 193 */ | 193 */ |
| 194 @NgInjectableService() | 194 @NgInjectableService() |
| 195 class NgRoutingUsePushState { | 195 class NgRoutingUsePushState { |
| 196 final bool usePushState; | 196 final bool usePushState; |
| 197 NgRoutingUsePushState(): usePushState = true; | 197 NgRoutingUsePushState(): usePushState = true; |
| 198 NgRoutingUsePushState.value(this.usePushState); | 198 NgRoutingUsePushState.value(this.usePushState); |
| 199 } | 199 } |
| OLD | NEW |