效果预览图
效果预览图
1 准备工作：需要配置好nginx服务，下载angular.js以及angular-ui-router.js文件
1.1 nginx下载及配置方法：https://www.zhihu.com/question/41430703（参见古尘师姐的回答）
1.2 angular.js和angular-ui-router.js下载：http://pan.baidu.com/s/1hsHw3uG（这是我自己上传的百度网盘，也可以去angular官网下载）
2 效果展示
最终版（加入bootstrap，更加美观）
最终版
实用版：（没有引入bootstrap，但可以更好看到页面之间的变换，帮助理清思路，下面的例子讲的就是实用版）
3 ui-router路由配置
3.1 文件结构
打开你的网站根目录，默认是nginx下的html文件夹，建立如下几个文件夹：
把angular.js和angular-ui-router.js文件放入angular文件夹
新建app.js作为路由配置js文件放入js文件夹
新建father.html, childOne.html, childTwo.html, childThree.html作为路由页面放入tpls文件夹中
新建index.html文件作为主页面。
3.2 页面写法
3.2.1 主页面的写法（index.html)
index.html
body中的ng-app="myApp"，代表angular可以控制body中的所有子元素；
div中的ui-view代表这个标签将被路由中的页面替换掉；
然后分别引用了angular.js文件，angular-ui-router.js文件，以及自己的路由配置js文件。
3.2.2 login页面的写法（login.html)
login.html
给最外边的div加了一些css样式，为了看起来更加直观，删掉对路由也没有影响的。
button中的ui-sref="father",这是一个非常简单的ui-sref的使用，当点击这个按钮时,AngularJS会重新生成网页，它会查找$state中名为“father”的state，读取这个state的url,并 替换掉ui-view中的内容，简单来说就是用father页面替换掉当前的login页面。
3.2.3 father页面的写法（father.html)
father.html
father页面中也有一个ui-view，通过这个ui-view就能够实现路由的嵌套
所以，如果要跳转到father中的子路由页面，就应该在ui-sref后面的路由名称前面加上点号，代表跳转到father中的ui-view,而如果是在当前路由中跳转，就不用加点号。
3.2.4 child页面的写法（childOne.html; childTwo.html; childThree.html;)
childOne.html
childTwo.html
childThree.html
很简单，大同小异，没什么好说的。
3.2.5 路由配置页面的写法（app.js)
app.js
首先定义myApp模块，并引入所依赖的模块ui.router；
然后通过.config执行路由函数；
其中的$urlRouteProvider代表错误的路由重定向，就是说如果用户输入了错误的路由地址，我们给他们定向到某个正确的路由，可以使用when/和otherwise的语法，有兴趣的的可以去自己搜索详细了解一下，这里我只使用了otherwise表示，只要用户输错了路由，都给他定向到login页面。
而$stateProvider呢，代表正确的路由配置，就拿最后一行state来说吧，其中的第一个参数father.childThree和ui-sref相关联，当点击拥有ui-sref的元素时，就会跳转同名的state中，而第二个参数url:代表浏览器中显示的地址，建议写成跟ui-sref名称相同的名字（不写成一样的也能运行，没太大影响，只是浏览器地址栏显示的不同而已），第三个参数templateUrl就是代表的是真实的文件地址，告诉浏览器哪里去获取文件，如果路由页面只有几个字的话也可以是写成是template的形式，比如template:"请输入要显示的内容"。
4 常见问题
Q：遇到报错怎么办？
A: 对比图片仔细检查你的语法，大小写有没有写错，有没有少写字母，有没有少写或者多写标点符号，文件引用都引用好了吗，文件有没有放进该放的文件夹（不是开玩笑，真的要仔细检查，认真脸，错误往往都是这几个原因）
Q：如果还是没有解决呢？
A：自行百度，或者下方留言共同讨论
Q：按钮太丑了，不能接受！！！！怎么才能达到完成图的那种效果。
A：引入bootstrap.css，把login.html和father.html的背景色修改为白色，给按钮添加class=”btn" 并更改按钮的背景色。
最终完成效果图
网友评论