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
欢迎吐槽
angular入门系列教程3的更多相关文章
- angular入门系列教程目录
本系列教程的目标很明确,就是入门,会一步一步的从零到最终的能写出一个基本完整的应用.这个过程中不去纠结一些概念或者是如何实现等等深入的东西,只是停留在应用层. ps:如果条件允许的话,后续会有深入一点 ...
- angular入门系列教程4
主题: 本篇主要目的就是继续完善home页下的index子页面的内容,处理一个列表,进行增删改查过滤等操作. 效果图: 细节: 主要的更改有两个,一个是修改模板index.html,还有就是增加控制器 ...
- angular入门系列教程2
主题: 本篇主要介绍下angular里的一些概念,并且在咱们的小应用上加上点料.. 概念(大概了解即可,代码中遇到的会有详细注释): 模板:动态模板,是动态的,直接去处理DOM的,而不是通过处理字符串 ...
- angular入门系列教程1
主题: 一个能够跑起来的页面,神奇的效果,无需一样JS代码! 效果图: 细节: 当然,这里甚至连登陆都没做,只是看到神奇的当输入用户名或者密码的时候,下面的预览区域也会有相应的更改.没有一行的JS代码 ...
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- ASP.NET MVC 入门系列教程
ASP.NET MVC 入门系列教程 博客园ASP.NET MVC 技术专题 http://kb.cnblogs.com/zt/mvc/ 一个居于ASP.NET MVC Beta的系列入门文章,有朋友 ...
随机推荐
- 关于IIS中WEB网站访问弹“验证输入框”及“401限制访问”的解决办法
最近在配置IIS网站的过程中,不管是本地还是外部访问配置的网站,出现了需要输入用户名.密码.及域的对话框,解决之后又出现页面401限制访问的错误页面. 就这两项错误,依次做一下解决办法的整理. 解决流 ...
- (转)MongoDB 实现currentOp定时捕获
问题描述: 当分析生产环境发生的性能问题时,常常因为没有实时的依据而无从下手.那么笔者通过捕获db.currentOp()到文件,并作为定时任务,可供后续分析. 解决方法: 步骤一:Shell脚本记录 ...
- Linux多线程编程(不限Linux)
前言 线程?为什么有了进程还需要线程呢,他们有什么区别?使用线程有什么优势呢?还有多线程编程的一些细节问题,如线程之间怎样同步.互斥,这些东西将在本文中介绍.我在某QQ群里见到这样一道面试题: 是否熟 ...
- 精简DropDownList用法
ViewBag.TypeID = new SelectList(db.TType, "ID", "Name", model.TypeID); @Html.Dro ...
- java和javascript中this区别的浅探讨
今天在学习javascript的时候碰到了this,感觉它跟java里的有点不一样.然后上网查了一下,参考了这篇文章,JavaScript中this关键字详解,发现它们之间的区别主要是这样: java ...
- UILabel常用属性
[super viewDidLoad]; // 实例化UILabel并指定其边框 UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0 ...
- 【Qt】Qt Creator快捷键【转】
简介 Qt Creator中提供了各种快捷键来加快开发进程. 如果需要查看或自定义快捷键,选择工具->选项->环境->键盘.快捷键按类别列出,可以在过滤器(Filter)处输入命令名 ...
- jquery.tmpl.min.js--前端实现模版--数据绑定--详解
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...
- .Net中的Socket通讯
.NetFrameWork为Socket通讯提供了System.Net.Socket命名空间,在这个命名空间里面有以下几个常用的重要类分别是: ·Socket类 这个低层的类用于管理连接,WebReq ...
- 重拾C,一天一点点
数据类型及长度 char 字符型,占用一个字节 int 整型,通常代表特定机器中整数的自然长度 short 16位 int 16位或32位 ...