ng:view
is a widget that complements the $route
service by
including the rendered template of the current route into the main layout (index.html
) file.
Every time the current route changes, the included view changes with it according to the
configuration of the $route
service.
This widget provides functionality similar to ng:include
when
used like this:
<ng:include src="$route.current.template" scope="$route.current.scope"></ng:include>
Compared to ng:include
, ng:view
offers these advantages:
$route
service to be available on the root scope<ng:view></ng:view>
<script> function MyCtrl($route) { $route.when('/overview', { controller: OverviewCtrl, template: 'guide/dev_guide.overview.html'}); $route.when('/bootstrap', { controller: BootstrapCtrl, template: 'guide/dev_guide.bootstrap.auto_bootstrap.html'}); }; MyCtrl.$inject = ['$route']; function BootstrapCtrl(){} function OverviewCtrl(){} </script> <div ng:controller="MyCtrl"> <a href="#!/overview">overview</a> | <a href="#!/bootstrap">bootstrap</a> | <a href="#!/undefined">undefined</a> <br/> The view is included below: <hr/> <ng:view></ng:view> </div>
it('should load templates', function(){ element('.doc-example-live a:contains(overview)').click(); expect(element('.doc-example-live ng\\:view').text()).toMatch(/Developer Guide: Overview/); element('.doc-example-live a:contains(bootstrap)').click(); expect(element('.doc-example-live ng\\:view').text()).toMatch(/Developer Guide: Initializing Angular: Automatic Initiialization/); });