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