# 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:

- shorter syntax
- more efficient execution
- doesn't require `$route` service to be available on the root scope

## Usage

### In HTML Template Binding

    <ng:view></ng:view>

## Example

       <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/);
      });