angular ui-router：简单的单页面嵌套路由的实现过程

时间 2019-11-16

标签 angular router 简单页面嵌套路由实现过程栏目 AngularJS 繁體版

原文原文链接

写在前面：

ui-router是angular的一个插件，由于angular前面几个版本自带的原生ng-router不能很好的知足开发需求，因此在实现angular单页面嵌套的时候，都是使用ui-router。本文是的内容关于angular ui-router实现过程，内含demo以及代码地址，须要的朋友能够过来参考下，喜欢的能够点波赞，或者关注一下本人，ui-router的实现过程并不复杂，但愿经过本文你们可以学会ui-router的使用方法。javascript

ui-router与ng-router：

UI-Router是angular原生ng-route进化版，相较与ng-router有以下两条优势：css

视图不能嵌套,这意味着$scope会发生没必要要的从新载入。html
同一URL下不支持多个视图。这一需求也是常见的：咱们但愿导航栏用一个视图（和相应的控制器）、内容部分用另外一个视图（和相应的控制器）。java

最终实现demo效果

AngularJS单页面实现原理：

AngularJS 路由容许咱们经过不一样的 URL 访问不一样的内容，一般咱们的URL形式为runoob.com/first/page ，在单页Web应用中 AngularJS 经过 # + 标记 实现，例如：git

http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third复制代码

当咱们访问这上面任意一个连接的时候，向服务端请求的都是同一个地址： runoob.com/
#号以后的内容在向服务端请求时会被浏览器忽略掉
路由就经过 # + 标记帮助咱们区分不一样的逻辑页面并将不一样的页面绑定到对应的控制器上，以下图所示：angularjs

不一样的视图页面对应不一样的控制器

demo地址

ui-router实现过程

一、建立页面：

要实现上文那个demo效果，咱们须要建立以下页面：github

app.js
这是路由的配置页面
index.html
一般叫作index.html是单页面的首页，里面导入了各类css样式、库，插件，框架之类的。
PageTab.html
进入index.html首先展现的视图页面，下面几个是PageTab下面的嵌套页面
Page-1.html
Page-2.html
Page-3.html

代码上传到github上面了，须要的朋友能够自行查看：代码地址浏览器

注：angular用的是：1.4.6，ui-router用的是1.0app

ps：如今angular4，自带的原生ng-router好像也已经支持了多层嵌套。可是由于还没流传开，市面上，大多仍是1.4，因此仍是须要用到ui-router。框架

二、在index.html里面导入js文件

<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"></script>
<script src="App.js"></script>复制代码

1.angular文件，2.ui-router插件,3.路由js页面

注意：angular文件必须在ui-router前面，由于ui-router是依赖angular的插件。

这几个文件是最基本的页面，若是是一个完整的angular单页面项目的话，index,html是这幅样子：

在单页面中，无论你从哪一个视图查看网页代码，都是这样子，第一次看的都醉了！

3.app.js

app.js声明了AngularJS模块和路由配置。当页面加载的时候咱们会在index.html中显示PageTab.html的内容。具体代码以下，每个关键的地方都有相应的注释注释注释：

var myApp = angular.module("myApp", ["ui.router"]);
//这里叫作App模块，这将告诉HTML页面这是一个AngularJS做用的页面，并把ui-router注入AngularJS主模块，它的内容由AngularJS引擎来解释。
myApp.config(function ($stateProvider, $urlRouterProvider) {
    //这一行声明了把 $stateProvider 和 $urlRouteProvider 路由引擎做为函数参数传入，这样咱们就能够为这个应用程序配置路由了.
    $urlRouterProvider.when("", "/PageTab");
    //若是没有路由引擎能匹配当前的导航状态，默认将路径路由至 PageTab.html, 那它就像switch case语句中的default选项.就是一个默认的视图选项
    $stateProvider
        //这一行定义了会在main.html页面第一个显示出来的状态（就是进入页面先加载的html），做为页面被加载好之后第一个被使用的路由.
        .state("PageTab", {//导航用的名字 
            url: "/PageTab",//#+标识符，这里就是url地址栏上面的标识符，经过标识符，进入不一样的html页面
            templateUrl: "PageTab.html"//这里是html的路径，这是跟标识符相对应的html页面
        })
        .state("PageTab.Page1", {//引号里面表明Page1是PageTab的子页面，用.隔开
            url:"/Page1",
            templateUrl: "Page-1.html"
        })
        .state("PageTab.Page2", {//须要跳转页面的时候，就是用这双引号里面的地址
            url:"/Page2",
            templateUrl: "Page-2.html"
        })
        .state("PageTab.Page3", {
            url:"/Page3",
            templateUrl: "Page3.html"
        });
});复制代码

如今已经成功把appjs实现出来，而后须要在html里面定义视图，以及视图跳转连接

4.html定义视图

如今要把咱们写好的html视图页面在页面中展现出来，咱们来看看index.html里面的代码：

<body data-ng-app="myApp">
<!--ui-router的html代码--> <div data-ui-view=""></div> <!--这里要引入上面说的文件--> </body>
<html>复制代码

在ui-view=""的双引号里面，ui-view展现的页面是根据app.js设置的url对应的html来展现的。

嵌套页面跳转：

导航里面的名字必须是“父页面的名字.子页面的名字”
好比：

.state("PageTab", {//这里是名字
         url: "/PageTab",
         templateUrl: "PageTab.html"
     })
     .state("PageTab.Page1", {//意思是PageTab视图下面的Page1视图
         url:"/Page1",
         templateUrl: "Page-1.html"
     })复制代码

在html里面，用ui-sref进行跳转
demo代码栗子：

<div>
     <h1>下面这几个按钮是在主页面下面再嵌套一层的页面</h1>
     <!--ui-sref跳转-->
     <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>
     <!--PageTap嵌套的视图html展现的地方-->
     <div ui-view=""/>
 </div>复制代码

若是以为不太明白能够点击下面的代码地址，将代码复制到本地，本身多试一试，应该就明白了：
demo地址、demo代码地址

写在后面：

如今只是一个最简单的使用方式，原本想在写一些深一点的使用方式（内容：路由的其余参数、路由懒加载引用文件、路由视图页面传递参数），写了很久，结果发现仍是须要demo结合起来写，比较清楚，等我写好了在下面加个连接。

最后：如需转载，请放上原文连接并署名。码字不易，感谢支持！由于我常常看不懂别人写的分享，因此我的写文比较偏小白，写的很差之处，欢迎指点。而后就是但愿看完的朋友点个喜欢，也能够关注一下我。
ps：目前待业，城市：杭州/北京（纠结中），本人适应互联网快节奏，高强度的工做状态，认真，严谨，学习积极性强。中小公司大佬求带走，邮箱：obkoro1@foxmail.com。
掘金我的主页

参考资料：

AngularJS 路由,菜鸟教程
 深究AngularJS——ui-router详解\
AngularJS ui-router (嵌套路由)