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中的东西：