AngularJS学习记录

weixin_34062329

于 2017-05-04 14:57:00 发布

阅读量66

点赞数

原文链接：http://www.cnblogs.com/yunyunde/p/6807145.html

版权

路由：$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 注释  -->  设置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