AngularJS 是一款流行的前端框架，它提供了一些基本的路由功能，但在复杂的应用中，这些功能可能会变得不够灵活。这时，ui-router 就可以派上用场了。
ui-router 是一个强大的第三方路由库，它提供了比 AngularJS 原生路由更多的功能，例如嵌套视图、状态机等。本文将深入探讨 ui-router 的核心概念和使用方法。
状态和状态机
ui-router 的核心概念是状态和状态机。状态是指应用程序的一个特定状态，例如登录、注册、主页等。状态机是指状态之间的转换关系。ui-router 使用状态机来管理应用程序的状态。
在 ui-router 中，每个状态都有一个名称和一个 URL，例如以下代码定义了一个名为 home 的状态，并将其 URL 设置为 /home。
$stateProvider.state('home', { url: '/home' });
状态可以包含一些属性，例如以下代码定义了一个名为 profile 的状态，并设置了它的模板和控制器。
$stateProvider.state('profile', { url: '/profile', templateUrl: 'profile.html', controller: 'ProfileController' });
嵌套视图
ui-router 还支持嵌套视图，这使得应用程序可以更好地组织和管理。例如，一个应用程序可能包含一个主视图和多个子视图。以下代码定义了一个名为 dashboard 的状态，它包含两个子状态：overview 和 stats。
-- -------------------- ---- ------- --------------------------------- - ---- ------------- ------ - --- - ------------ ----------------- ----------- --------------------- -- --------------------- - ------------ ---------------- ----------- -------------------- -- ------------------ - ------------ ------------- ----------- ----------------- - - ---展开代码
在这个例子中，dashboard 状态包含三个视图：一个主视图和两个子视图。每个子视图都有一个名称，例如 overview@dashboard，其中 @dashboard 表示这个子视图属于 dashboard 状态。
重定向和参数传递
ui-router 还支持重定向和参数传递。以下代码定义了一个名为 login 的状态，它将重定向到另一个名为 home 的状态。
$stateProvider.state('login', { url: '/login', controller: 'LoginController', onEnter: function($state) { $state.go('home'); } });
在这个例子中，当用户访问 /login 时，会自动重定向到 /home。
ui-router 还支持参数传递。以下代码定义了一个名为 user 的状态，它包含一个参数 id。
$stateProvider.state('user', { url: '/user/:id', templateUrl: 'user.html', controller: 'UserController' });
在这个例子中，当用户访问 /user/123 时，参数 id 的值将为 123。
总结
ui-router 是一个强大的第三方路由库，它提供了比 AngularJS 原生路由更多的功能，例如嵌套视图、状态机等。本文深入探讨了 ui-router 的核心概念和使用方法，包括状态和状态机、嵌套视图、重定向和参数传递。希望本文对您学习和使用 ui-router 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658e561eeb4cecbf2d4221c7
