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 scopeBecause of the nature of this widget, we can't include the usual live example for it. Instead following is a code snippet showing the typical usage:
<script> angular.service('routeConfig', function($route) { $route.when('/foo', {controller: MyCtrl, template: 'foo.html'}); $route.when('/bar', {controller: MyCtrl, template: 'bar.html'}); }, {$inject: ['$route'], $eager: true}); function MyCtrl() {}; </script> <div> <a href="#/foo">foo</a> | <a href="#/bar">bar</a> | <a href="#/undefined">undefined</a><br/> The view is included below: <hr/> <ng:view></ng:view> </div>
<ng:view></ng:view>