每天学习一点点，成功增加一大步

AngularJS 通过 ui-router 解决嵌套路由

AngularJS zhanghui 1871℃

今天其实主要学习实践的是 AngularJS 的嵌套路由，因为我是通过自己一直以来想写的一个项目，这个项目采用的是前后端分离模式，但因在前端没有找到很好的框架来做模板引擎所以一直没有去做，毕竟一个人来写一个业余的项目的精力是有限的，所以想找好的前端框架，来减轻花在前端的精力。现在 AngularJS 满足了我这一需求，但 AngularJS 的原生路由是存在缺陷的，后来发现了 AngularJS 的第三方路由插件 ui-router.

今天刚开始学习 ui-router 这个插件的使用还真是有点的头疼，中间遇到不少的错误问题，不过最终还是找到问题的出发点顺利的学会了它的使用。这样经历对于程序员来说是平常时，每当我们接触新的技术都会遇到。

下面来理下实现的过程，该过程与 AngularJS 自带的原生路由有点相似，只是要注意细微的地方，我也是因为没有注意细微的地方所以中间遇到的问题特别的多

首先在主页面中同样也是引入2个依赖的JS库文件，再引入自己的配置JS文件，因 ui-router 是通过 ui-view 来加载页面的，所以它也必须得加上。

 <body ng-app="myApp">
 <div ui-view></div>
 <script type="text/javascript" src="angular/1.4.8/angular/angular.min.js"></script>
 <script type="text/javascript" src="angular/ui-router/release/angular-ui-router.min.js"></script>
 <script type="text/javascript" src="ui-router-app.js"></script>
</body>

再是 JS 配置过程

 var myApp = angular.module('myApp', ['ui.router']);

myApp.config(function ($stateProvider, $urlRouterProvider) {
 $urlRouterProvider.otherwise("/main");

 $stateProvider
 .state('main', {
 url: '/main',
 templateUrl: 'routerViews/main.html'
 })
 //通过"."的方式声明子视图
 //这样，就能实现嵌套路由了
 .state('main.pagea', {
 url: '/pagea',
 templateUrl: 'routerViews/a.html'
 })
 .state('main.pageb', {
 url: '/pageb',
 templateUrl: 'routerViews/b.html'
 })
});

然后是主布局的页面文件，上是页面切换的导航，其下也是一个<div ui-view></div>是用来加载 page A 和 Page B 两个子页面的，这里要注册的是链接的#后面的格式要与 state 里面的以.相隔的值匹配上不然就会出现找不到页面的情况。

 <div>
 <a href="#/main/pagea">Page A</a>
 <a href="#/main/pageb">Page B</a>
</div>
<div ui-view></div>

最后分别建立a和b两个测试用的小页面，在这里也同样的就不多写了

github url:https://github.com/366065186/angularJS-demo

转载请注明：隨習筆記 » AngularJS 通过 ui-router 解决嵌套路由

喜欢 (0)