zoukankan      html  css  js  c++  java
  • 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

    欢迎吐槽

  • 相关阅读:
    2.ECMAScript 5.0
    1.Javascript简介
    9.定位
    HDU2032 杨辉三角
    HDU2058 The sum problem
    HDU2091 空心三角形
    HDU1166 敌兵布阵(树状数组模板题)
    HDU2049 不容易系列之(4)——考新郎
    Python网络爬虫与信息提取(三)(正则表达式的基础语法)
    HDU6576 Worker
  • 原文地址:https://www.cnblogs.com/xiaobudiandian/p/angular-example-3.html
Copyright © 2011-2022 走看看