基本的例子

此示例顯示使用 controllerAs 語法設定具有 3 條路徑的小型應用程式，每條路徑都有自己的檢視和控制器。

我們在角度 .config 功能配置我們的路由器

1. 我們將 $routeProvider 注入 .config
2. 我們使用路由定義物件在 .when 方法中定義路由名稱。
3. 我們為 .when 方法提供了一個指定我們的 template 或 templateUrl，controller 和 controllerAs 的物件

app.js

angular.module('myApp', ['ngRoute'])
  .controller('controllerOne', function() {
    this.message = 'Hello world from Controller One!';
  })
  .controller('controllerTwo', function() {
    this.message = 'Hello world from Controller Two!';
  })
  .controller('controllerThree', function() {
    this.message = 'Hello world from Controller Three!';
  })
  .config(function($routeProvider) {
    $routeProvider
    .when('/one', {
      templateUrl: 'view-one.html',
      controller: 'controllerOne',
      controllerAs: 'ctrlOne'
    })
    .when('/two', {
      templateUrl: 'view-two.html',
      controller: 'controllerTwo',
      controllerAs: 'ctrlTwo'
    })
    .when('/three', {
      templateUrl: 'view-three.html',
      controller: 'controllerThree',
      controllerAs: 'ctrlThree'
    })
    // redirect to here if no other routes match
    .otherwise({
      redirectTo: '/one'
    });
  });

然後在我們的 HTML 中，我們使用 <a> 使用 <a> 元素定義我們的導航，路由名稱 helloRoute 我們將路由為 <a href="#/helloRoute">My route</a>

我們還提供了一個容器和指令 ng-view 來注入我們的路線。

index.html

<div ng-app="myApp">
  <nav>
    <!-- links to switch routes -->
    <a href="#/one">View One</a>
    <a href="#/two">View Two</a>
    <a href="#/three">View Three</a>
  </nav>
  <!-- views will be injected here -->
  <div ng-view></div>
  <!-- templates can live in normal html files -->
  <script type="text/ng-template" id="view-one.html">
    <h1>{{ctrlOne.message}}</h1>
  </script>

  <script type="text/ng-template" id="view-two.html">
    <h1>{{ctrlTwo.message}}</h1>
  </script>

  <script type="text/ng-template" id="view-three.html">
    <h1>{{ctrlThree.message}}</h1>
  </script>
</div>