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:

Usage

In HTML Template Binding

<ng:view></ng:view>

Example

   <script>
     function MyCtrl($route) {
       $route.when('/overview',
         { controller: OverviewCtrl,
           template: 'partials/guide/dev_guide.overview.html'});
       $route.when('/bootstrap',
         { controller: BootstrapCtrl,
           template: 'partials/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 Initialization/);
  });