Skip to content
This repository was archived by the owner on Feb 22, 2018. It is now read-only.

Commit ed40de4

Browse files
vicbvicb
committed
refactor(NgView): Make use of the ViewPort
Closes #704
1 parent f0a227d commit ed40de4

File tree

3 files changed

+82
-66
lines changed

3 files changed

+82
-66
lines changed

‎lib/routing/ng_view.dart

Lines changed: 47 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -58,49 +58,49 @@ part of angular.routing;
5858
@Decorator(
5959
selector: 'ng-view',
6060
module: NgView.module,
61-
visibility: Directive.CHILDREN_VISIBILITY)
61+
children: Directive.TRANSCLUDE_CHILDREN)
6262
class NgView implements DetachAware, RouteProvider {
6363
static final Module _module = new Module()
64-
..factory(RouteProvider,
65-
(i) => i.get(NgView),
66-
visibility: Directive.CHILDREN_VISIBILITY);
64+
..factory(RouteProvider, (i) => i.get(NgView));
65+
6766
static module() => _module;
6867

69-
final NgRoutingHelper locationService;
70-
final ViewCache viewCache;
71-
final Injector injector;
72-
final Element element;
73-
final Scope scope;
68+
final NgRoutingHelper _locationService;
69+
final ViewCache _viewCache;
70+
final Injector _injector;
71+
final Scope _scope;
7472
RouteHandle _route;
7573

74+
final ViewPort _viewPort;
75+
7676
View _view;
77-
Scope _scope;
77+
Scope _childScope;
7878
Route _viewRoute;
7979

80-
NgView(this.element, this.viewCache,
81-
Injector injector, Router router,
82-
this.scope)
83-
: injector = injector,
84-
locationService = injector.get(NgRoutingHelper)
80+
81+
NgView(this._viewCache, Injector injector, Router router,
82+
this._scope, this._viewPort)
83+
: _injector = injector,
84+
_locationService = injector.get(NgRoutingHelper)
8585
{
86-
RouteProvider routeProvider = injector.parent.get(NgView);
86+
RouteProvider routeProvider = _injector.parent.get(NgView);
8787
_route = routeProvider != null ?
8888
routeProvider.route.newHandle() :
8989
router.root.newHandle();
90-
locationService._registerPortal(this);
90+
_locationService._registerPortal(this);
9191
_maybeReloadViews();
9292
}
9393

9494
void _maybeReloadViews() {
95-
if (_route.isActive) locationService._reloadViews(startingFrom: _route);
95+
if (_route.isActive) _locationService._reloadViews(startingFrom: _route);
9696
}
9797

98-
detach() {
98+
void detach() {
9999
_route.discard();
100-
locationService._unregisterPortal(this);
100+
_locationService._unregisterPortal(this);
101101
}
102102

103-
_show(_View viewDef, Route route, List<Module> modules) {
103+
void _show(_View viewDef, Route route, List<Module> modules) {
104104
assert(route.isActive);
105105

106106
if (_viewRoute != null) return;
@@ -114,44 +114,52 @@ class NgView implements DetachAware, RouteProvider {
114114
_cleanUp();
115115
});
116116

117-
var viewInjector = injector;
118-
if (modules != null) {
119-
viewInjector = forceNewDirectivesAndFilters(viewInjector, modules);
120-
}
117+
var viewInjector = modules == null ?
118+
_injector :
119+
forceNewDirectivesAndFilters(_injector, modules);
121120

122121
var newDirectives = viewInjector.get(DirectiveMap);
123122
var viewFuture = viewDef.templateHtml != null ?
124-
new Future.value(viewCache.fromHtml(viewDef.templateHtml, newDirectives)) :
125-
viewCache.fromUrl(viewDef.template, newDirectives);
123+
new Future.value(_viewCache.fromHtml(viewDef.templateHtml, newDirectives)) :
124+
_viewCache.fromUrl(viewDef.template, newDirectives);
125+
126126
viewFuture.then((viewFactory) {
127127
_cleanUp();
128-
_scope = scope.createChild(new PrototypeMap(scope.context));
128+
_childScope = _scope.createChild(new PrototypeMap(_scope.context));
129129
_view = viewFactory(
130-
viewInjector.createChild(
131-
[new Module()..value(Scope, _scope)]));
130+
viewInjector.createChild([new Module()..value(Scope, _childScope)]));
132131

133-
_view.nodes.forEach((elm) => element.append(elm));
132+
var view = _view;
133+
_scope.rootScope.domWrite(() {
134+
_viewPort.insert(view);
135+
});
134136
});
135137
}
136138

137-
_cleanUp() {
139+
void _cleanUp() {
138140
if (_view == null) return;
139141

140-
_view.nodes.forEach((node) => node.remove());
141-
_scope.destroy();
142+
var view = _view;
143+
var childScope = _childScope;
144+
_scope.rootScope.domWrite(() {
145+
_viewPort.remove(view);
146+
childScope.destroy();
147+
});
142148

143149
_view = null;
144-
_scope = null;
150+
_childScope = null;
145151
}
146152

147153
Route get route => _viewRoute;
154+
148155
String get routeName => _viewRoute.name;
156+
149157
Map<String, String> get parameters {
150158
var res = <String, String>{};
151-
var p = _viewRoute;
152-
while (p != null) {
153-
res.addAll(p.parameters);
154-
p = p.parent;
159+
var route = _viewRoute;
160+
while (route != null) {
161+
res.addAll(route.parameters);
162+
route = route.parent;
155163
}
156164
return res;
157165
}

‎test/routing/ng_view_spec.dart

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ main() {
1010
TestBed _;
1111
Router router;
1212

13-
beforeEachModule((Module m) {
14-
m
13+
beforeEachModule((Module module) {
14+
module
1515
..install(new AngularMockModule())
1616
..type(RouteInitializerFn, implementedBy: FlatRouteInitializer);
1717
});
@@ -28,48 +28,53 @@ main() {
2828

2929

3030
it('should switch template', async(() {
31-
Element root = _.compile('<ng-view></ng-view>');
31+
Element root = _.compile('<div><ng-view></ng-view></div>');
3232
expect(root.text).toEqual('');
3333

3434
router.route('/foo');
3535
microLeap();
36+
_.rootScope.apply();
3637
expect(root.text).toEqual('Foo');
3738

3839
router.route('/bar');
3940
microLeap();
41+
_.rootScope.apply();
4042
expect(root.text).toEqual('Bar');
4143

4244
router.route('/foo');
4345
microLeap();
46+
_.rootScope.apply();
4447
expect(root.text).toEqual('Foo');
4548
}));
4649

4750

4851
it('should switch template when route is already active', async(() {
4952
// Force the routing system to initialize.
50-
_.compile('<ng-view></ng-view>');
53+
_.compile('<div><ng-view></ng-view></div>');
5154

5255
router.route('/foo');
5356
microLeap();
54-
Element root = _.compile('<ng-view></ng-view>');
57+
Element root = _.compile('<div><ng-view></ng-view></div>');
5558
expect(root.text).toEqual('');
5659

57-
_.rootScope.apply();
5860
microLeap();
61+
_.rootScope.apply();
5962
expect(root.text).toEqual('Foo');
6063
}));
6164

6265

6366
it('should clear template when route is deactivated', async(() {
64-
Element root = _.compile('<ng-view></ng-view>');
67+
Element root = _.compile('<div><ng-view></ng-view></div>');
6568
expect(root.text).toEqual('');
6669

6770
router.route('/foo');
6871
microLeap();
72+
_.rootScope.apply();
6973
expect(root.text).toEqual('Foo');
7074

7175
router.route('/baz'); // route without a template
7276
microLeap();
77+
_.rootScope.apply();
7378
expect(root.text).toEqual('');
7479
}));
7580

@@ -80,8 +85,8 @@ main() {
8085
TestBed _;
8186
Router router;
8287

83-
beforeEachModule((Module m) {
84-
m
88+
beforeEachModule((Module module) {
89+
module
8590
..install(new AngularMockModule())
8691
..type(RouteInitializerFn, implementedBy: NestedRouteInitializer);
8792
});
@@ -102,25 +107,29 @@ main() {
102107
});
103108

104109
it('should switch nested templates', async(() {
105-
Element root = _.compile('<ng-view></ng-view>');
110+
Element root = _.compile('<div><ng-view></ng-view></div>');
106111
expect(root.text).toEqual('');
107112

108113
router.route('/library/all');
109114
microLeap();
115+
_.rootScope.apply();
110116
expect(root.text).toEqual('LibraryBooks');
111117

112118
router.route('/library/1234');
113119
microLeap();
120+
_.rootScope.apply();
114121
expect(root.text).toEqual('LibraryBook 1234');
115122

116123
// nothing should change here
117124
router.route('/library/1234/overview');
118125
microLeap();
126+
_.rootScope.apply();
119127
expect(root.text).toEqual('LibraryBook 1234');
120128

121129
// nothing should change here
122130
router.route('/library/1234/read');
123131
microLeap();
132+
_.rootScope.apply();
124133
expect(root.text).toEqual('LibraryRead Book 1234');
125134
}));
126135
});
@@ -130,8 +139,8 @@ main() {
130139
TestBed _;
131140
Router router;
132141

133-
beforeEachModule((Module m) {
134-
m
142+
beforeEachModule((Module module) {
143+
module
135144
..install(new AngularMockModule())
136145
..value(RouteInitializerFn, (router, views) {
137146
views.configure({
@@ -148,11 +157,12 @@ main() {
148157
});
149158

150159
it('should switch inline templates', async(() {
151-
Element root = _.compile('<ng-view></ng-view>');
160+
Element root = _.compile('<div><ng-view></ng-view></div>');
152161
expect(root.text).toEqual('');
153162

154163
router.route('/foo');
155164
microLeap();
165+
_.rootScope.apply();
156166
expect(root.text).toEqual('Hello');
157167
}));
158168
});

‎test/routing/routing_spec.dart

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -158,12 +158,12 @@ main() {
158158
_.injector.get(TemplateCache)
159159
.put('foo.html', new HttpResponse(200, '<h1>Foo</h1>'));
160160

161-
Element root = _.compile('<ng-view></ng-view>');
161+
Element root = _.compile('<div><ng-view></ng-view><div>');
162162
expect(root.text).toEqual('');
163163

164164
router.route('/foo');
165165
microLeap();
166-
166+
_.rootScope.apply();
167167
expect(enterCount).toBe(1);
168168
expect(root.text).toEqual('Foo');
169169
}));
@@ -231,18 +231,18 @@ main() {
231231
_.injector.get(TemplateCache)
232232
.put('foo.html', new HttpResponse(200, '<h1>Foo</h1>'));
233233

234-
Element root = _.compile('<ng-view></ng-view>');
234+
Element root = _.compile('<div><ng-view></ng-view><div>');
235235
expect(root.text).toEqual('');
236236

237237
router.route('/foo');
238238
microLeap();
239-
239+
_.rootScope.apply();
240240
expect(root.text).toEqual('Foo');
241241
expect(leaveCount).toBe(0);
242242

243243
router.route('/bar');
244244
microLeap();
245-
245+
_.rootScope.apply();
246246
expect(root.text).toEqual('');
247247
expect(leaveCount).toBe(1);
248248
}));
@@ -263,12 +263,12 @@ main() {
263263
_.injector.get(TemplateCache)
264264
.put('foo.html', new HttpResponse(200, '<div make-it-new>Old!</div>'));
265265

266-
Element root = _.compile('<ng-view></ng-view>');
266+
Element root = _.compile('<div><ng-view></ng-view><div>');
267267
expect(root.text).toEqual('');
268268

269269
router.route('/foo');
270270
microLeap();
271-
271+
_.rootScope.apply();
272272
expect(root.text).toEqual('New!');
273273
}));
274274

@@ -288,12 +288,12 @@ main() {
288288
_.injector.get(TemplateCache)
289289
.put('foo.html', new HttpResponse(200, '<div make-it-new>Old!</div>'));
290290

291-
Element root = _.compile('<ng-view></ng-view>');
291+
Element root = _.compile('<div><ng-view></ng-view><div>');
292292
expect(root.text).toEqual('');
293293

294294
router.route('/foo');
295295
microLeap();
296-
296+
_.rootScope.apply();
297297
expect(root.text).toEqual('New!');
298298
}));
299299

@@ -313,13 +313,12 @@ main() {
313313
_.injector.get(TemplateCache)
314314
.put('foo.html', new HttpResponse(200, '<div>{{\'World\' | hello}}</div>'));
315315

316-
Element root = _.compile('<ng-view></ng-view>');
316+
Element root = _.compile('<div><ng-view></ng-view></div>');
317317
expect(root.text).toEqual('');
318318

319319
router.route('/foo');
320320
microLeap();
321321
_.rootScope.apply();
322-
323322
expect(root.text).toEqual('Hello, World!');
324323
}));
325324

@@ -339,13 +338,12 @@ main() {
339338
_.injector.get(TemplateCache)
340339
.put('foo.html', new HttpResponse(200, '<div>{{\'World\' | hello}}</div>'));
341340

342-
Element root = _.compile('<ng-view></ng-view>');
341+
Element root = _.compile('<div><ng-view></ng-view></div>');
343342
expect(root.text).toEqual('');
344343

345344
router.route('/foo');
346345
microLeap();
347346
_.rootScope.apply();
348-
349347
expect(root.text).toEqual('Hello, World!');
350348
}));
351349

@@ -369,7 +367,7 @@ class NewDirective {
369367

370368
@Formatter(name:'hello')
371369
class HelloFilter {
372-
call(String str) {
370+
String call(String str) {
373371
return 'Hello, $str!';
374372
}
375373
}

0 commit comments

Comments
 (0)