什么是 Angular-UI-Router
Angular-UI-Router 是一个开源的 JavaScript 路由框架，它允许你在 AngularJS 应用中创建复杂的、层级丰富的 UI 状态。相比较于 AngularJS 自带的路由模块 ngRoute，Angular-UI-Router 提供了更加强大、灵活的状态管理机制，允许你创建更加复杂、多层次的页面结构，也更加方便我们进行视图与控制器的组合。
安装 Angular-UI-Router
你可以通过项目中添加 JS 引用或者通过 NPM 进行安装。
在 HTML 中添加引用
在页面中添加 Angular-UI-Router 的 JavaScript 引用。
-- -------------------- ---- -------
--------- -----
------
------
------ ------------
------- --------------------------------------------------------------------------------
------ --------------------
------- ----------------------------------------------------------------------------------------------------
-------
------
---- ---------------
-------------------
------
-------
-------通过 NPM 安装
建议通过 NPM 进行安装：
npm install angular-ui-router --save
然后在代码中引入：
import angular from 'angular';
import uiRouter from '@uirouter/angularjs';
angular
.module('myApp', [uiRouter])
.config(($stateProvider, $urlRouterProvider) => {
// router config here
});在使用 Angular-UI-Router 之前，请确保已经正确地引用了 AngularJS。
Angular-UI-Router 的核心概念
State
路由的最基本概念是 State，它决定了 AngularJS 应用中页面的加载状态。一个 State 包含了一个 URL、一个视图、相关的控制器和数据。
通过 $stateProvider 来定义：
$stateProvider
.state('home', {
url: '/',
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
})此时我们定义了一个名为 home 的 State，对应着 'http://example.com/' 这个 URL，通过加载 'partials/home.html' 页面视图，使用 homeCtrl 控制器来绑定页面数据。
View
View 表示了页面状态的呈现方式，即页面视图。AngularJS UI-Router 使用一个名为 ui-view 的指令将视图插入到 HTML 页面中。在一个 State 对象中，可以定义一个或多个 View，每个 View 都和一个模板（Template）相关联。
<body> <div ui-view></div> <!-- 其他内容 --> </body>
URL Router
URL Router 负责管理 URI，根据 URI 的变化改变状态，并把状态和 URL 同步，从而完成单页应用。当用户在浏览器地址栏里输入 URL 时，$urlRouterProvider 将指向与该 URL 匹配的状态，并在浏览器地址栏中更新 URL。如果没有匹配的状态，则会默认跳转到 $urlRouterProvider.otherwise() 中指定的状态。
$urlRouterProvider.otherwise('/404');总结
Angular-UI-Router 是一个基于 AngularJS 的强大、灵活的路由 API，具有非常丰富的状态管理概念，支持多个 UI 视图，运用方便，学习曲线低。
如何使用 Angular-UI-Router
这里是一个基于 Angular-UI-Router 的示例，实现了一个简单的账户系统。
配置路由
-- -------------------- ---- -------
----------------------------- ------------------- -- -
--------------
--------------- -
---- ---------
------------ -------------------
----------- ------------
------------- -------
--
------------------- -
---- ----
------------ -----------------------
----------- ----------------
------------- -------
---
---------------------------------------
---此处我们创建了 login 和 dashboard 这两个状态，分别对应着登录页面和用户中心页面。
其中，controllerAs 参数是为了方便一些比较老的浏览器作兼容而增加的语法糖，为后面 View 对应 Controller 使用的新语法。
$urlRouterProvider.otherwise 设置了默认状态，在用户输入了不存在的路径时，跳转到 /login 页面。
实现登录页
-- -------------------- ---- -------
---- ---------------- ---
---- ------------------
----- ---------------- ------------------------- -----------
---- -------------------
-----------------------
------ ----------- -------------------- --------------- ------------------------- ---------
------
---- -------------------
-----------------------
------ --------------- -------------------- --------------- ------------------------- ---------
------
------- ------------- ---------- ---------------------------
-------
-------- -------------------- ---- -------
-- --------------------
----------------------------- ---------------- -
---------- - ---------- -
-- ----
-- -------------- --- ------- -- ------------- --- -------- -
-----------------------
- ---- -
----------------------
-
--
---login.html 是我们的登录页面模板，代码比较简单，就不进行过多解释。
loginCtrl 负责处理登录验证并重定向到后台页面。$state.go 将会告诉 Angular-UI-Router 把当前状态改变为 dashboard，从而跳转到新的页面。
实现主页
<!-- views/dashboard.html -->
<div class="container">
<h1>Welcome, {{$ctrl.username}}!</h1>
</div>// controllers/dashboard.js
myApp.controller('dashboardCtrl', function() {
this.username = 'admin';
});主页模板 dashboard.html 采用了模板语法，我们在里面使用了 $ctrl.username 来展示当前登录用户名。
dashboardCtrl 负责处理逻辑，为 View 提供数据，此处我们把用户名硬编码为admin。
结语
以上就是有关 Angular-UI-Router 的基本概念、安装和使用前后端交互案例，希望这篇文章可以为初学者更好地理解路由在 AngularJS 中的应用并能够在日常开发中运用、掌握 Angular-UI-Router。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647953f0968c7c53b055b276