路由:$routeProvider,根据访问路径的不同,展示不同的内容。
url类似:http://XXX#/index其中的#是一个锚点,在页面内跳转,防止向服务器端发请求。 多个controller怎么办: 1.grand自动合并 2. 定义多个模块,怎么加载呢?模块切分 把控制器指令service定义成一个或者多个js文件,提供app.js作为入口点,告诉angularJS依赖那些模块 ng-app在一个应用中只能有一个,找到后会加载依赖,所以这些route.js,filter.js等这些js文件之间的加载顺序没有关系 依赖注入: angularJS会在启动时检测module中的字符串名字是否已经声明 angularJS提供的模块很多,如route,touch(移动端),根据实际需要去选择。 angularJS没有实现异步加载,因为已经有requireJS可以使用。
angularJS最吸引人的地方:双向数据绑定,指令系统。
双向数据绑定;数据模型和视图 ctrl+X 删除一行 ctrl+E 自动生成div标签 (写好表达式按该快捷键) ng-bind 指令可以避免页面出现{ {}}这个取值表达式。 什么时候使用ng-bind? 在首页使用ng-bind绑定(第一个页面) 后续的通过模板加入进来使用{ {}}双向绑定,什么时候使用?form表单。
ng-class与普通class的区别 ng-class可以接受表达式,动态切换标签样式 ng-class='{error:isError, waning: isWarning}' ng-show ng-hide ngAnimate 路由,为什么需要路由: Ajax请求不会留下History记录,用户没有办法加书签,用户也没法分享给别人,同时没有页面之间的导航 SEO 搜索引擎优化 Ajax对SEO是个灾难。 深层次嵌套路由 UI-Router 可以实现深层次的嵌套:需要引入 前端路由的基本原理 哈希#,锚点 页面之间跳转,浏览器不刷新页面 HTML5中新的historyAPI,留下历史记录但是页面没有刷新 路由的核心是给应用定义“状态”,使用路由机制会影响到应用的整体编码格式,需要预先定义好状态 angularJS本身自带的路由机制:routeProvider div.row>div.column ---ctrl+E 指令 E 元素 <hello></hello> 当需要创建带有自己模板的指令的时候,使用元素名称的方式创建指令 A默认 属性 <div my-menu=Products></div> 如:<div hello></div> 当需要为已有的HTML标签增加功能时,使用属性的方式创建 C 样式类 <div class="my-menu":Products></div> --><div class="hello"></div> M 注释 <!-- directive:my-menuProducts --> --> <!-- directive:hello --> 设置restrict为M 才可以使用注释类,并且必须要注意: 我们需要在该实例添加 replace 属性, 否则评论是不可见的。 $templateCache 缓存 把模板缓存起来,让多个指令使用它。 replace,是否替换指令内内容。 transclude(变换) 与ng-tracsclude 配套使用 如果不想替换模板内容,使用transclude : true, ng-transclude表示 原来的内容放置的位置。 link 函数中可以操作DOM。 指令和数据之间的绑定 link函数的参数有四个,scope,element,attr element.bind("mouseenter", function() {}) scope.$apply 指令的复用,在不同的controller中使用。 1.指令和controller之间怎么交互:为了实现指令的复用。 2.指令之间交互: 通过controller暴露出来的方法交互 controller 是指令内部的,与MVC的controller不同,用来暴露public方法,方便外部调用。 如果想要指令暴露一些方法,让外部调用,则写在controller中, 如果是指令内部使用,则写在link中,给元素绑定事件,绑定数据这些。 指令中的require是说依赖于其他的指令。 如果没有独立scope的话,相同的指令,其中一个改变会影响到别的 独立scope:指令独立使用 ---》创建语法指令中添加, scope: {} scope的绑定策略:有三种策略,@绑定字符串,传递的是字符串, =双向绑定, ^父函数的传递 自定义指令:要调用自定义指令,HTML 元素上需要添加自定义指令名。使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: 错误: 1. Uncaught Error: [$injector:unpr] Unknown provider: $$asyncCallbackProvider < 这个是因为angular.js的版本与animate的版本不同导致的 2. [ngRepeat:dupes] Duplicates in repeater are not allowed. 这个是因为ng-repeat的list中有重复的值,可以参考这个http://blog.csdn.net/rangqiwei/article/details/38020667。 Service/Factory/Provider 实质上都是Provider。 Service都是单例的, service不用我们自己去new,是由$injector负责实例化的 只能在指令中操作DOM