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.overview.html'}); $route.when('/bootstrap', {controller: BootstrapCtrl, template: 'guide.bootstrap.html'}); console.log(window.$route = $route); }; 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>