今天其实主要学习实践的是 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 解决嵌套路由