Hello World 的例子

第 1 步：安裝

在使用 Angular-UI 路由器之前，必須在專案中包含 AngularJS。有關詳細指南，請參閱此文件 。

你可以分別從 GitHub-Page 或 NuGet，NPM，Bower 下載 Angular-UI 路由器。

在你的網頁中包含 JS 檔案後，你可以在應用程式中注入 ui.router 模組。在你的指令碼檔案中，你應該具有以下內容：

var app = angular.module('app', []);

現在我們將把 Angular-UI 路由器注入到我們自己的應用程式中，如下所示：

var app = angular.module('app', ['ui.router']);

現在 Angular-UI 路由器將載入我們的應用程式。以下步驟將解釋 Angular-UI 路由器背後的基礎知識，並將展示一些基本功能。

第 2 步：定義簡單狀態

你可以在 Angular config 函式中配置 UI-Router。使用 $stateProvider 定義你的狀態。在以下示例中，每個狀態都有一個 URL，控制器和一個模板。

(function() {
  var app = angular.module('app', ['ui.router']);
  
  app.config(['$stateProvider', function($stateProvider) {
      $stateProvider
        .state('home', {
          url: "/home",
          templateUrl: "home.html",
          controller: "homeCtrl"
        })
        .state('kitchen', {
          url: "/kitchen",
          templateUrl: "kitchen.html",
          controller: "kitchenCtrl"
        })
        .state('den', {
          url: "/denCtrl",
          templateUrl: "den.html",
          controller: "denCtrl"
        })
        .state('itemDetail', {
          url: "/items/:itemName",
          templateUrl: "item.html",
          controller: "itemDetailCtrl"
        })

    }])
})();

在 HTML 中，你將需要 ui-view 指令，以便可以在其中填充狀態檢視。

<div ui-view></div>

第 3 步：訪問狀態

共有 3 種方法可以訪問 $stateProvider 中定義的狀態。

1.通過 ui-sref 指令

你可以使用 ui-sref 指令訪問 HTML 中的狀態

<li ui-sref-active="active">
    <a ui-sref="kitchen">Go to the Kitchen</a>
</li>
<li ui-sref-active="active">
    <a ui-sref="den">Enter the den</a>
</li>
<li ui-sref-active="active">
    <a ui-sref="itemDetail({itemName:'keyboard'})">Key Board</a>
</li>

2.通過控制器中的 $state 服務

你還可以使用 .go 方法使用提供給控制器的 $state 導航到控制器內的其他狀態。

.controller(function($scope, $state) {
    // ...
    $scope.navigateTo = function(stateName) {
        $state.go(stateName); // i.e. $state.go('den'); 
    };
})

3.通過瀏覽器中的 URL

假設你有一個名為 kitchen 的狀態定義如下：

$stateProvider
  .state("kitchen", {
    url: "/kitchenUrl",
    ...
  });

然後訪問 appdomain / kitchenUrl 作為瀏覽器中的 URL 將進入你的 kitchen 狀態，假設沒有巢狀狀態，appdomain 是託管你的應用程式的伺服器。

如果你仍然感到困惑，這裡是一個完全工作的 Plnkr