angular入门系列教程3

主题:

本篇主要目的就是继续完善home页,增加tab导航的三个页index index1 index2

效果图:

 

细节:

初始化的JS就是咱们的home.js,仔细来看。

angular的route模块是单独出来的,所以可以看到,在咱们的home/index.html文件中,在head里自然是要加上"../lib/angular-1.2.7/angular-route.js"的JS的。

仅仅这样还是不可以的,因为route是单独的一个模块,所以在咱们实例化app模块的时候,需要在依赖的模块列表中加上route的module名“ngRoute”,也就是在home.js中:

可以看到咱们还依赖了homeControllers,稍后咱们说明。

下面就是route的使用了,实例化的模块app有一个config的方法,通过它可以在app跑起来之前做一些配置性工作,而咱们的路由设置什么的就是在config中完成的。

config支持依赖注入的,但是只能providers 和 constants是可以被注入进去的。这里咱们需要将$routeProvider和$locationProvider注入进去;$routeProvider是针对于route配置的provider,$locationProvider相应的就是配置location相关的了,这里咱们把$locationProvider一进来的目的主要是我希望的是在高级浏览器上是以html5Mode更改URL,并且针对于IE8 9 这样的不支持的设置hashPrefix为“!”(默认html5Mode是false hashPrefix是'')。

到这里咱们还没有进行route的配置呢,下面看:

这种配置方式用起来很爽,$routeProvider的规则详见官网,这里咱们用到了templateUrl和controller;templateUrl很好理解,当路由匹配的时候,去使用那个模板(模板是会被缓存住的,详见templateCache),controller当然是针对于这个view的控制器了,这里为了方便管理,咱们把所有的home的controller全部集中起来用homeControllers这个模块来管理,这也就是咱们前面说的在初始化app模块的时候,在依赖模块列表中加入homeControllers这个模块名的原因。

下面就一起来简单看下homeController中的东西:

由于目前没什么功能,所以这里只是简单的定义一个homeControllers,然后通过他的controller方法定义一堆controller。

到这里还有一个问题,那就是怎么去切换tab的时候,让每一个tab的classname跟着改变,也就是去改变显示的状态,看代码:

可以看到,咱们在routescope上监听了$routeChangeSuccess事件,当路由change完成的时候,咱们就去更改$rootScope.path的值,而在home/index.html中

咱们在每一个li上利用ng-class指令,判断path是那种状态,然后去改变class的。

结束语:

这里,咱们可以看到,咱们的app已经能进行简单的路由导航了,下篇继续。

本篇源码:https://github.com/dolymood/angular-example/tree/ls_3

欢迎吐槽

原文地址:https://www.cnblogs.com/xiaobudiandian/p/angular-example-3.html