在本教程中，我们将看到如何使用UI-Router在AngularJS中进行路由。使用UI-Router在AngularJS中创建路由非常简单，您只需要了解AngularJS的一些基本概念即可。
什么是AngularUI路由器？
Angular UI-Router是AngularJS的客户端单页应用程序路由框架。
UI-Router应用程序被建模为分层的状态树。 UI-Router提供了一种状态机，以类似事务的方式管理这些应用程序状态之间的转换。
目录
因此，让我们从构建应用程序结构开始。我们将在不同的文件夹中指定每个组件，因此将从文件夹结构开始。
|--- index.html
|
|---app(folder)
| |---shared(folder)
| | |---header(folder)
| | | |---header.html
| | |
| | |---footer(folder)
| | |---footer.html
| |
| |---components(folder)
| | |---home(folder)
| | | |---header.html
| | |
| | |---contact(folder)
| | | |---contact.html
| | |
| | |---about(folder)
| | |---about.html
| |
| |---app.routes.js
实作
要创建路由过程，我们将使用 AngularJS ,
Angular-UI-路由器 和 引导程序 （可选）用于设计目的。
让我们从实现依赖关系开始。
现在将所需的库包含到我们的 index.html
<html lang="en">
<head>
<link rel="stylesheet" href ="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
<body ng-app=" 演示 ">
<div 用户界面 ="header"></div>
<div 用户界面 =""></div>
<div 用户界面 ="footer"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js" ></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js" ></script>
<!-- Main app routes js -->
<script src="app/app.routes.js"></script>
</body>
</html>
在这里您可以看到我们已经包括 Angular.min.js, Angular-UI-路由器 和我们的主要 app.routes.js 在页面底部， 引导程序 .min.css 在页面顶部。
而且我们还包括 用户界面 用于在每种状态下加载的不同视图，例如页眉，页脚和中间内容。
如果您使用的是软件包管理器（npm），则可以通过终端中的命令进行下载：
$ npm install angular --save // AngularJS
$ npm install angular-ui-router --save // angular UI-router
$ npm install [email protected] --save // Latest Bootsrap v 3.x.x
组件
设置索引文件后，我们将开始构建我们的组件，其中每个组件都将按文件夹分开。
让我们首先从那里实现标题视图，我们将使用UI-router链接我们的组件，如您所见， 目录结构 我们在共享文件夹和组件的其他页面中分隔了页眉和页脚。
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a ui-sref ="home">Home</a></li>
<li><a ui-sref ="about">About</a></li>
<li><a ui-sref ="contact">contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
如您所见，而不是 href 我们将使用 ui-sref ，这将路由我们将在 app.routes.js 文件。
类似地，创建自己的自定义组件，即页眉，页脚，主页等，作为所示的目录结构。
通过演示查看文件夹结构 这里 .
应用路由器
现在我们必须创建 演示 我们已经在身体上应用了 index.html 文件。
开始通过构建应用 app.routes.js，首先，我们将为要使用的组件创建一个角度模块。
// 演示 : app name
// ui.router : Angular-ui-router module
// app.routes : custom routes module
var app = angular.module('demo', ['ui.router', 'app.routes']);
您可以看到我们通过实现模块（即从CDN链接导入的ui-router和另一个app.routes）创建了演示angularApp，在该模块中，我们将创建自定义路由。因此，让我们从构建模块开始。
var app = angular.module('demo', ['ui.router', 'app.routes']);
angular.module('app.routes',['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
// create 默认 view
$urlRouterProvider.otherwise("/home");
$stateProvider
// home states and nested view
.state('home', {
url: "/home",
views : {
"" : {
templateUrl:"app/components/home/home.html",
},
"header" : {
templateUrl:"app / shared / header / header.html"
},
"footer" : {
templateUrl:"app/shared/footer/footer.html"
}
}
})
// about states and nested view
.state('about', {
url: "/about",
views : {
"" : {
templateUrl:"app/components/about/about.html",
},
"header" : {
templateUrl:"app / shared / header / header.html"
},
"footer" : {
templateUrl:"app/shared/footer/footer.html"
}
}
})
.state('contact', {
url: "/contact",
views : {
// ... paths for contact view as define above
}
});
});
这里我们有一个 。州（） 在家，关于和联系。在家里，我们正在使用模板文件home.html。以至于其他页面。
注意： 该应用程序应在本地服务器上运行，以查看ui路由器的工作情况
获得更多角度 这里！