一、选择angular-ui-router的好处
- ui-router是一个社区库用来完善ng-route的诸多不足
- UI-Router路由器允许嵌套视图(nested views)和多个命名视图(multiple named views),我们可能有较多的页面需要继承其他部分，所以很有用。
- 通过构建ui-sref来实现不同的状态链接到不同的页面
- states允许你通过$statsParams来轻松的传递信息，允许不同的信息不同的states的map格式。
- 你的路由可以访问动态创建的链接
二、简单示例，步骤如下：
- 新建index.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/angular.js"></script> <script src="js/angular-ui-router.js"></script> <script src="js/app.js"></script> </head> <body ng-app="myApp"> <h1>AngularJS Home Page</h1> <div ui-view=""></div> </body> <html> - 新建PageTab.html
当我们想要在母版页中管理所有的页面时，我们就会想要一个叫做”ui-view“的占位标记, 因此我们现在把PageTab.html叫做一个母版页，因为它会把我们需要在PageTab.html中用”ui-view“ 声明好的其它页面都管理起来.
<div> <div> <span style="width: 100px" ui-sref=".Page1"><a href="">Page-1</a></span> <span style="width: 100px" ui-sref=".Page2"><a href="">Page-2</a></span> <span style="width: 100px" ui-sref=".Page3"><a href="">Page-3</a></span> </div> <div> <div ui-view="" /> </div> </div>使用ui-sref属性可以将App.js中定义的状态同tab中定义的对应文本进行了关联. 当我们使用点符号对它进行了声明，程序就会认为页面时ui-view中的子页面或者说嵌入页面，它们就是路由配置中需要被展示的页面.
使用 . 号进行了分隔. 这里很关键，它会告诉路由引擎我们在这里定义的是子页面或者嵌入页面。
- 新建Page1.html Page2.html Page3.html
<div > <div> <h1>Page 1 content goes here...</h1> </div> </div>其他2个同上所示。
- 在index.html中引入angular-ui-router.js 参考步骤1.
- 新建App.js
谁来告诉程序应该显示哪个页面呢? 这就是我们要在路由引擎里面配置的东西
var myApp = angular.module("myApp", [ 'ui.router' ]); myApp.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.when("", "/PageTab"); $stateProvider.state("PageTab", { url : "/PageTab", templateUrl : "PageTab.html" }).state("PageTab.Page1", { url : "/Page1", templateUrl : "Page1.html" }).state("PageTab.Page2", { url : "/Page2", templateUrl : "Page2.html" }).state("PageTab.Page3", { url : "/Page3", templateUrl : "Page3.html" }); });
时间： 2024-10-06 21:14:31