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

欢迎吐槽