Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(749)

Side by Side Diff: third_party/pkg/angular/lib/routing/module.dart

Issue 256553002: Revert "Update all Angular libs (run update_all.sh)." (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 6 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 /** 1 /**
2 * Route configuration for single-page applications.
3 *
4 * The [routing] library makes it easier to build large single-page 2 * The [routing] library makes it easier to build large single-page
5 * applications. The library lets you map the browser address bar to semantic 3 * applications. The library lets you map the browser address bar to semantic
6 * structure of your application and keeps them in sync. 4 * structure of your application and keeps them in sync.
7 * 5 *
8 * Angular uses the [route_hierarchical] package to define application routes 6 * Angular uses the [route_hierarchical] package to define application routes
9 * and to provide custom tools to make it easier to use routing with Angular 7 * and to provide custom tools to make it easier to use routing with Angular
10 * templates. 8 * templates.
11 * 9 *
12 * Let's consider a simple recipe book application. The application might have 10 * Lets consider a simple recipe book application. The application might have
13 * the following pages: 11 * the following pages:
14 * 12 *
15 * * recipes list/search 13 * * recipes list/search
16 * * add new recipe 14 * * add new recipe
17 * * view recipe 15 * * view recipe
18 * * edit recipe 16 * * edit recipe
19 * 17 *
20 * Each of those pages can be represented by an address: 18 * Each of those pages can be represented by an address:
21 * 19 *
22 * * `/recipes` 20 * * `/recipes`
23 * * `/addRecipe` 21 * * `/addRecipe`
24 * * `/recipe/:recipeId/view` 22 * * `/recipe/:recipeId/view`
25 * * `/recipe/:recipeId/edit` 23 * * `/recipe/:recipeId/edit`
26 * 24 *
27 * 25 *
28 * Let's try to define those routes in Angular. To get started we need to 26 * Lets try to define those routes in Angular. To get started we need to
29 * provide an implementation of [RouteInitializerFn] function. 27 * provide an implementation of [RouteInitializerFn] function.
30 * 28 *
31 * void initRoutes(Router router, RouteViewFactory view) { 29 * void initRoutes(Router router, ViewFactory view) {
32 * // define routes here. 30 * // define routes here.
33 * } 31 * }
34 * 32 *
35 * var module = new Module() 33 * var module = new Module()
36 * ..value(RouteInitializerFn, initRoutes); 34 * ..factory(RouteInitializerFn, (_) => initRoutes);
37 * 35 *
38 * Let's see how we could define our routes using the routing framework: 36 * Lets see how we could define our routes using the routing framework:
39 * 37 *
40 * void initRoutes(Router router, RouteViewFactory view) { 38 * void initRoutes(Router router, ViewFactory view) {
41 * router.root 39 * router
42 * ..addRoute( 40 * ..addRoute(
43 * name: 'recipes', 41 * name: 'recipes',
44 * path: '/recipes', 42 * path: '/recipes',
45 * enter: view('recipes.html')) 43 * enter: view('recipes.html'))
46 * ..addRoute( 44 * ..addRoute(
47 * name: 'addRecipe', 45 * name: 'addRecipe',
48 * path: '/addRecipe', 46 * path: '/addRecipe',
49 * enter: view('addRecipe.html')) 47 * enter: view('addRecipe.html'))
50 * ..addRoute( 48 * ..addRoute(
51 * name: 'viewRecipe', 49 * name: 'viewRecipe',
52 * path: '/recipe/:recipeId/view', 50 * path: '/recipe/:recipeId/view',
53 * enter: view('viewRecipe.html')) 51 * enter: view('viewRecipe.html'))
54 * ..addRoute( 52 * ..addRoute(
55 * name: 'editRecipe', 53 * name: 'editRecipe',
56 * path: '/recipe/:recipeId/edit', 54 * path: '/recipe/:recipeId/edit',
57 * enter: view('editRecipe.html')); 55 * enter: view('editRecipe.html'));
58 * } 56 * }
59 * 57 *
60 * We defined 4 routes and for each route we set views (templates) to be 58 * We defined 4 routes and for each route we set views (templates) to be
61 * displayed when that route is "entered". For example, when the browser URL 59 * displayed when that route is "entered". For example, when the browser URL
62 * is set to `/recipes`, the `recipes.html` will be displayed. 60 * is set to `/recipes`, the `recipes.html` will be displayed.
63 * 61 *
64 * You have to tell Angular where to load views by putting `<ng-view>` tag in 62 * You have to tell Angular where to load views by putting `<ng-view>` tag in
65 * you template. 63 * you template.
66 * 64 *
67 * Notice that `viewRecipe` and `editRecipe` route paths have `recipeId` 65 * Notice that `viewRecipe` and `editRecipe` route paths have `recipeId`
68 * parameter in them. We need to be able to get hold of that parameter in 66 * parameter in them. We need to be able to get hold of that parameter in
69 * order to know which recipe to load. Let's consider the following 67 * order to know which recipe to load. Lets consider the following
70 * `viewRecipe.html`. 68 * `viewRecipe.html`.
71 * 69 *
72 * <view-recipe></view-recipe> 70 * <view-recipe></view-recipe>
73 * 71 *
74 * The template contains a custom `view-recipe` component that handles 72 * The template contains a custom `view-recipe` component that handles
75 * displaying the recipe. Now, our `view-recipe` can inject [RouteProvider] 73 * displaying the recipe. Now, our `view-recipe` can inject [RouteProvider]
76 * to get hold of the route and its parameters. It might look like this: 74 * to get hold of the route and its parameters. It might look like this:
77 * 75 *
78 * @Component(...) 76 * @NgComponent(...)
79 * class ViewRecipe { 77 * class ViewRecipeComponent {
80 * ViewRecipe(RouteProvider routeProvider) { 78 * ViewRecipeComponent(RouteProvider routeProvider) {
81 * String recipeId = routeProvider.parameters['recipeId']; 79 * String recipeId = routeProvider.parameters['recipeId'];
82 * _loadRecipe(recipeId); 80 * _loadRecipe(recipeId);
83 * } 81 * }
84 * } 82 * }
85 * 83 *
86 * [RouteProvider] and [Route] can be used to control navigation, specifically, 84 * [RouteProvider] and [Route] can be used to control navigation, specifically,
87 * leaving of the route. For example, let's consider "edit recipe" component: 85 * leaving of the route. For example, lets consider "edit recipe" component:
88 * 86 *
89 * @Component(...) 87 * @NgComponent(...)
90 * class EditRecipe implements DetachAware { 88 * class EditRecipeComponent implements NgDetachAware {
91 * RouteHandle route; 89 * RouteHandle route;
92 * EditRecipe(RouteProvider routeProvider) { 90 * EditRecipeComponent(RouteProvider routeProvider) {
93 * RouteHandle route = routeProvider.route.newHandle(); 91 * RouteHandle route = routeProvider.route.newHandle();
94 * _loadRecipe(route); 92 * _loadRecipe(route);
95 * route.onLeave.listen((RouteEvent event) { 93 * route.onLeave.listen((RouteEvent event) {
96 * event.allowLeave(_checkIfOkToLeave()); 94 * event.allowLeave(_checkIfOkToLeave());
97 * }); 95 * });
98 * } 96 * }
99 * 97 *
100 * /// Check if the editor has unsaved contents and if necessary ask 98 * /// Check if the editor has unsaved contents and if necessary ask
101 * /// the user if OK to leave this page. 99 * /// the user if OK to leave this page.
102 * Future<bool> _checkIfOkToLeave() {/* ... */} 100 * Future<bool> _checkIfOkToLeave() {/* ... */}
103 * 101 *
104 * detach() { 102 * detach() {
105 * route.discard(); 103 * route.discard();
106 * } 104 * }
107 * } 105 * }
108 * 106 *
109 * [Route.onLeave] event is triggered when the browser is routed from an 107 * [Route.onLeave] event is triggered when the browser is routed from an
110 * active route to a different route. The active route can delay and 108 * active route to a different route. The active route can delay and
111 * potentially veto the navigation by passing a [Future<bool>] to 109 * potentially veto the navigation by passing a [Future<bool>] to
112 * [RouteEvent.allowLeave]. 110 * [RouteEvent.allowLeave].
113 * 111 *
114 * Notice that we create a [RouteHandle] for our route. [RouteHandle] are 112 * Notice that we create a [RouteHandle] for our route. [RouteHandle] are
115 * a convinient wrapper around [Route] that makes unsubscribing route events 113 * a convinient wrapper around [Route] that makes unsubscribing route events
116 * easier. For example, notice that we didn't need to manually call 114 * easier. For example, notice that we didn't need to manually call
117 * [StreamSubscription.cancel] for subscription to [Route.onLeave]. Calling 115 * [StreamSubscription.cancel] for subscription to [Route.onLeave]. Calling
118 * [RouteHandle.discard] unsubscribes all listeneters created for the handle. 116 * [RouteHandle.discard] unsubscribes all listeneters created for the handle.
119 * 117 *
120 * 118 *
121 * ## Hierarchical Routes 119 * # Hierarchical Routes
122 * 120 *
123 * The routing framework allows us to define trees of routes. In our recipes 121 * The routing framework allows us to define trees of routes. In our recipes
124 * example we could have defined our routes like this: 122 * example we could have defined our routes like this:
125 * 123 *
126 * void initRoutes(Router router, RouteViewFactory view) { 124 * void initRoutes(Router router, ViewFactory view) {
127 * router.root 125 * router
128 * ..addRoute( 126 * ..addRoute(
129 * name: 'recipes', 127 * name: 'recipes',
130 * path: '/recipes', 128 * path: '/recipes',
131 * enter: view('recipes.html')) 129 * enter: view('recipes.html'))
132 * ..addRoute( 130 * ..addRoute(
133 * name: 'addRecipe', 131 * name: 'addRecipe',
134 * path: '/addRecipe', 132 * path: '/addRecipe',
135 * enter: view('addRecipe.html')) 133 * enter: view('addRecipe.html'))
136 * ..addRoute( 134 * ..addRoute(
137 * name: 'recipe', 135 * name: 'recipe',
138 * path: '/recipe/:recipeId', 136 * path: '/recipe/:recipeId',
139 * mount: (Route route) => route 137 * mount: (Route route) => route
140 * ..addRoute( 138 * ..addRoute(
141 * name: 'view', 139 * name: 'view',
142 * path: '/view', 140 * path: '/view',
143 * enter: view('viewRecipe.html')) 141 * enter: view('viewRecipe.html'))
144 * ..addRoute( 142 * ..addRoute(
145 * name: 'edit', 143 * name: 'edit',
146 * path: '/edit', 144 * path: '/edit',
147 * enter: view('editRecipe.html'))); 145 * enter: view('editRecipe.html')));
148 * } 146 * }
149 * 147 * }
150 */ 148 */
151 library angular.routing; 149 library angular.routing;
152 150
153 import 'dart:async'; 151 import 'dart:async';
154 import 'dart:html'; 152 import 'dart:html';
155 153
156 import 'package:di/di.dart'; 154 import 'package:di/di.dart';
157 import 'package:angular/application.dart'; 155 import 'package:angular/angular.dart';
158 import 'package:angular/core/annotation_src.dart';
159 import 'package:angular/core/module_internal.dart';
160 import 'package:angular/core_dom/module_internal.dart';
161 import 'package:route_hierarchical/client.dart'; 156 import 'package:route_hierarchical/client.dart';
157 export 'package:route_hierarchical/client.dart';
162 158
163 part 'routing.dart'; 159 part 'routing.dart';
164 part 'ng_view.dart'; 160 part 'ng_view.dart';
165 part 'ng_bind_route.dart'; 161 part 'ng_bind_route.dart';
166 162
167 class RoutingModule extends Module { 163 class NgRoutingModule extends Module {
168 RoutingModule({bool usePushState: true}) { 164 NgRoutingModule({bool usePushState: true}) {
169 type(NgRoutingUsePushState); 165 type(NgRoutingUsePushState);
170 factory(Router, (injector) { 166 factory(Router, (injector) {
171 var useFragment = !injector.get(NgRoutingUsePushState).usePushState; 167 var useFragment = !injector.get(NgRoutingUsePushState).usePushState;
172 return new Router(useFragment: useFragment, 168 return new Router(useFragment: useFragment,
173 windowImpl: injector.get(Window)); 169 windowImpl: injector.get(Window));
174 }); 170 });
175 type(NgRoutingHelper); 171 type(NgRoutingHelper);
176 value(RouteProvider, null); 172 value(RouteProvider, null);
177 value(RouteInitializer, null); 173 value(RouteInitializer, null);
178 value(RouteInitializerFn, null); 174 value(RouteInitializerFn, null);
179 175
180 // directives 176 // directives
181 value(NgView, null); 177 value(NgViewDirective, null);
182 type(NgBindRoute); 178 type(NgBindRouteDirective);
183 } 179 }
184 } 180 }
185 181
186 /** 182 /**
187 * Allows configuration of [Router.useFragment]. By default [usePushState] is 183 * Allows configuration of [Router.useFragment]. By default [usePushState] is
188 * true, so the router will listen to [Window.onPopState] and route URLs like 184 * true, so the router will listen to [Window.onPopState] and route URLs like
189 * "http://host:port/foo/bar?baz=qux". Both the path and query parts of the URL 185 * "http://host:port/foo/bar?baz=qux". Both the path and query parts of the URL
190 * are used by the router. If [usePushState] is false, router will listen to 186 * are used by the router. If [usePushState] is false, router will listen to
191 * [Window.onHashChange] and route URLs like 187 * [Window.onHashChange] and route URLs like
192 * "http://host:port/path#/foo/bar?baz=qux". Everything after hash (#) is used 188 * "http://host:port/path#/foo/bar?baz=qux". Everything after hash (#) is used
193 * by the router. 189 * by the router.
194 */ 190 */
195 @Injectable() 191 @NgInjectableService()
196 class NgRoutingUsePushState { 192 class NgRoutingUsePushState {
197 final bool usePushState; 193 final bool usePushState;
198 NgRoutingUsePushState(): usePushState = true; 194 NgRoutingUsePushState(): usePushState = true;
199 NgRoutingUsePushState.value(this.usePushState); 195 NgRoutingUsePushState.value(this.usePushState);
200 } 196 }
OLDNEW
« no previous file with comments | « third_party/pkg/angular/lib/playback/playback_http.dart ('k') | third_party/pkg/angular/lib/routing/ng_bind_route.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698