AngularJS 是一个流行的前端框架，它提供了很多功能来简化前端开发。其中一个重要的功能是路由，它可以帮助我们在单页应用中管理不同的页面和视图。AngularJS 中内置了一个路由模块 ngRoute，但是它的功能相对简单。如果我们需要更强大的路由功能，可以使用一个第三方模块 ui-router。本文将介绍 AngularJS 中 ui-router 的使用方法。
安装和引入
首先，我们需要安装 ui-router。可以使用 npm 或者 bower 安装：
npm install angular-ui-router
bower install angular-ui-router
然后，在我们的 AngularJS 应用中引入 ui-router：
<script src="angular.js"></script> <script src="angular-ui-router.js"></script>
基本用法
ui-router 的基本用法和 ngRoute 类似，都是通过在 HTML 中定义路由来管理视图。不同的是，ui-router 中的路由可以是嵌套的状态（state），而不仅仅是简单的路径。
首先，我们需要定义一个包含所有状态的状态树。状态树是一个由状态对象组成的层次结构，每个状态都可以包含子状态。状态对象包含了路由的信息，比如 URL、模板、控制器等。
angular.module('myApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeController'
})
.state('about', {
url: '/about',
templateUrl: 'about.html',
controller: 'AboutController'
})
.state('contact', {
url: '/contact',
templateUrl: 'contact.html',
controller: 'ContactController'
});
});在这个例子中，我们定义了三个状态：home、about 和 contact。每个状态都包含了 URL、模板和控制器。我们还通过 $urlRouterProvider 设置了默认路由为 /home。
然后，在 HTML 中使用 ui-view 指令来显示视图：
<body ng-app="myApp">
<nav>
<a ui-sref="home">Home</a>
<a ui-sref="about">About</a>
<a ui-sref="contact">Contact</a>
</nav>
<div ui-view></div>
</body>在这个例子中，我们使用 ui-sref 指令来定义链接，它会自动转换为对应的 URL。我们也使用了 ui-view 指令来显示视图，它会根据当前状态自动加载对应的模板和控制器。
嵌套状态
ui-router 的一个重要特性是支持嵌套状态。这意味着我们可以在一个状态中定义子状态，从而实现更复杂的路由功能。
angular.module('myApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeController'
})
.state('about', {
url: '/about',
templateUrl: 'about.html',
controller: 'AboutController'
})
.state('contact', {
url: '/contact',
templateUrl: 'contact.html',
controller: 'ContactController'
})
.state('profile', {
url: '/profile/:id',
templateUrl: 'profile.html',
controller: 'ProfileController',
resolve: {
user: function(UserService, $stateParams) {
return UserService.getUser($stateParams.id);
}
}
})
.state('profile.posts', {
url: '/posts',
templateUrl: 'profile.posts.html',
controller: 'ProfilePostsController',
resolve: {
posts: function(user, PostService) {
return PostService.getPosts(user.id);
}
}
})
.state('profile.albums', {
url: '/albums',
templateUrl: 'profile.albums.html',
controller: 'ProfileAlbumsController',
resolve: {
albums: function(user, AlbumService) {
return AlbumService.getAlbums(user.id);
}
}
});
});在这个例子中，我们定义了一个 profile 状态，它包含了两个子状态：profile.posts 和 profile.albums。这些子状态可以在 URL 中使用 / 进行嵌套，比如 /profile/1/posts。
我们还可以在状态对象中使用 resolve 属性来定义依赖注入，这些依赖会在路由切换前被解析。在我们的例子中，我们定义了两个 resolve：user 和 posts/albums。这些 resolve 可以在控制器中直接使用，无需手动注入。
其他功能
除了基本的路由功能和嵌套状态，ui-router 还提供了很多其他功能，比如：
- 命名视图：可以在同一个状态中定义多个视图，并在 HTML 中指定它们的名字。
- URL 参数：可以在 URL 中定义参数，并在控制器中通过 $stateParams 访问。
- 视图生命周期：可以在视图加载前、加载后、销毁前、销毁后等时刻执行钩子函数。
- 视图转换：可以在视图之间定义转换效果，比如淡入淡出、滑动等。
- 多视图布局：可以在 HTML 中定义多个 ui-view，从而实现复杂的布局。
这些功能都可以通过 ui-router 的 API 来实现，具体可以参考官方文档。
总结
ui-router 是一个功能强大的路由模块，它可以帮助我们在 AngularJS 应用中管理复杂的视图和状态。本文介绍了它的基本用法和一些高级功能，希望对读者有所帮助。如果你正在学习 AngularJS，不妨尝试使用 ui-router 来管理你的应用路由。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658bbcedeb4cecbf2d0f9fdf