angular.widget.ng:view

Description

Overview

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>

Advantages

Compared to ng:include, ng:view offers these advantages:

Example

Because 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>
   

Dependencies

Usage

In HTML Template Binding

<ng:view></ng:view>

Parameters