使用ui-router框架实现的简单路由, 基于我们的业务需求,需要有不同类型的导航, 一般像那种从一个页面到另外一个页面的导航非常的普通。但请想象一下在某些情况下,你需要在一个主页中有tab页或者菜单可以点击打开相应的页面.
根据上的界面设计,我们计划该页面能从一个页面导航到另外一个页面, 当点击page-1时,我们将在下面显示page-1的内容,点击其它导航菜单也会有类似的效果. 我们希望这能够用一种很直接的方式被处理.
针对该需求我们使用AngularJS框架来创建简单的html和JavaScript页面. 我们将创建3个HTML页面和一个JavaScript脚本文件。
一开始我们创建一个空的web应用程序,并加入三个HTML页面。如下所示. 这些页面都是片段视图, 它们会在导航过程中展示。我们还要为了能展示应用程序的Tab,创建另外一个叫做PageTab.html的页面.
1. Page1.html
2. Page2.html
3. Page3.html
4. PageTab.html
页面如下:
1 <div> 2 <div> 3 <h1>Page 1 content goes here...</h1> 4 </div> 5 </div>
Page1、Page2、Page3页面只有内容不一样。
PageTab.html:
1 <div> 2 <div> 3 <span style="100px" ui-sref=".Page1"><a href="">Page-1</a></span> 4 <span style="100px" ui-sref=".Page2"><a href="">Page-2</a></span> 5 <span style="100px" ui-sref=".Page3"><a href="">Page-3</a></span> 6 </div> 7 <div data-ui-view="content"></div> 8 </div>
创建一个父页面来装下这些东西. 让我们把这个页面叫做 Main.html.
Main.html
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="Scripts/angular.js"></script> 6 <script src="Scripts/angular-ui-router.js"></script> 7 <script src="App.js"></script> 8 9 </head> 10 <body data-ng-app="myApp"> 11 <h1>AngularJS Home Page (Ui-router Demonstration)</h1> 12 <div data-ui-view=""></div> 13 </body> 14 <html>
我们需要在主页中做一些事情, (i) 我们需要引入AngularJS框架 (ii) 我们需要引入ui-router框架. (iii) 引入AngularJS文件 App.js (之后我会谈到这个) (iv) 第四件事情就是让主页内容展示出来,然后显示出它里面的页面.
让我们看一下App.JS文件的内容,我们声明了AngularJS模块和路由配置。当页面加载的时候我们会在Main.html中显示PageTab.html的内容。代码如下:
1 var myApp = angular.module("myApp", ['ui.router']); 2 3 myApp.config(function ($stateProvider, $urlRouterProvider) { 4 5 $urlRouterProvider.when("", "/PageTab"); 6 7 $stateProvider 8 .state("PageTab", { 9 url: "/PageTab", 10 templateUrl: "PageTab.html" 11 }) 12 .state("PageTab.Page1", { 13 url:"/Page1", 14 views: { 15 'content': { 16 templateUrl: "Page1.html", 17 } 18 } 19 }) 20 .state("PageTab.Page2", { 21 url:"/Page2", 22 views: { 23 'content': { 24 templateUrl: "Page2.html", 25 } 26 } 27 }) 28 .state("PageTab.Page3", { 29 url:"/Page3", 30 views: { 31 'content': { 32 templateUrl: "Page3.html", 33 } 34 } 35 }); 36 });
Line-1: 第一行,声明AngularJS模块, 并把ui-router传入AngularJS主模块,所有的结合起来我们就得到了Angular模块。
1 var myApp = angular.module("myApp", ['ui.router']);
这里叫做App模块,这将告诉HTML页面这是一个AngularJS作用的页面,它的内容由AngularJS引擎来解释。
代码行-2:这一行声明了把 $stateProvider 和 $urlRouteProvider 路由引擎作为函数参数传入,这样我们就可以为这个应用程序配置路由了.
1 myApp.config(function ($stateProvider, $urlRouterProvider) {
代码行-3: 好,那这一行做什么的呢,如果没有路由引擎能匹配当前的导航状态,那它就会默认将路径路由至 PageTab.html, 这个页面就是状态名称被声明的地方. 只要理解了这个,那它就像switch case语句中的default选项.
1 $urlRouterProvider.when("", "/PageTab");
语句块-1: 这一行定义了会在main.html页面第一个显示出来的状态,作为页面被加载好以后第一个被使用的路由.
1 $stateProvider 2 .state("PageTab", { 3 url: "/PageTab", 4 templateUrl: "PageTab.html" 5 })
语句块-2: 现在,就由这一行来定义页面, 但是等一等,这里有点不同,我们之前为上面的状态名称加上了前缀,并且使用点“.“号进行了分隔. 这里很关键,它会告诉路由引擎我们在这里定义的是子页面/嵌入页面/嵌入(sub page / nested page / nested)状态的page/route.
1 .state("PageTab.Page1", { 2 url:"/Page1", 3 views: { 4 'content': { 5 templateUrl: "Page1.html", 6 } 7 } 8 })
它将会在 "PageTab.html" 页面里面显示出来,那么它是什么意思呢. 想象一下当我们想要在母版页中管理所有的页面时,我们就会想要一个叫做”ui-view“的占位标记, 因此我们现在把PageTab.html叫做一个母版页,因为它会把我们需要在PageTab.html中用”data-ui-view="content" 声明好的其它页面都管理起来.
另外,如果只有一个子页面,或者嵌套页面可以使用ui-view作为默认的管理页面。app中修改为:
1 .state("PageTab.Page1", { 2 url:"/Page1", 3 templateUrl: "Page1.html" 4 })
Page2.html 将会在被叫做PageTab的状态中展示,它就是 PageTab.html.
Ok, 但是我们还落下啥事没做,这事就是当我们在 Page-1 或者 Page-2 再或者 Page-3 菜单上点击的时候需要页面在占位标记那里显示出来,是不 ?
还真是把那一块给忘啦,我们还没有为路由和这种逻辑建立起联系, 想象一下如果那是href的话,就意味着我们可以指定将会锚向页面里面的ID名称, 如果它是简单的html本地引用就是这样,但我们则需要按照需求显示不同的页面.
注意,只是上面高亮的部分发生了改变 , 这里我们只是简单的将App.js中定义的状态同tab中定义的对应文本进行了关联. 当我们使用点符号对它进行了声明,程序就会认为页面时ui-view中的子页面或者说嵌入页面,它们就是路由配置中需要被展示的页面.
另外,上面的用法,所以子页面用的controller是公共的controller,如果需要拆分,将每个页面使用自己的路由,需要这样写:
1 state("PageTab.Page1", { 2 url:"/Page1", 3 views: { 4 'content': { 5 templateUrl: "Page1.html", 6 controller: "xxx" 7 } 8 } 9 })