angular
1、四大核心特性
MVC model(数据模型) view(视图) controller(业务逻辑控制逻辑)
模块化
指令系统 (angular 自带很多指令,以属性形式插入的html中。带ng前缀)
双向数据绑定 (传统:模板和数据 拼接到一起,到视图。)(视图和模型对应,借助事件机制,实现双向绑定)
2、前端开发环境(自动化工业化)
代码编辑工具(sublime、webstorm)
断点调试工具(chrome,batarang【针对angular】)
版本管理工具(git)
代码合并和混淆工具(grunt)
依赖管理工具(bower,自动安装工具,依赖检测,bower install/uninstall jquery)
单元测试工具(karma,jasmine[describe/it/expect/to**(arg)])
集成测试工具(protractor[专门为angular准备的])
3、不要试图去复用controller,一个controller一般只负责一块视图
控制器负责一小块视图,多为业务逻辑。本身复用性不强
不要在controller中操作dom,这不是控制器的职责
指令中操作dom,rewrite,repand,昂贵
不要在controller中做数据格式化,ng有很好的表单控件
不要在controller中做数据过滤操作,ng有$filer服务
不要在controller中操作dom,这不是控制器的职责
一般来说controller是不会相互调用的,控制器之间的交互有事件进行
4、$scope 对象 是表达式执行环境(作用于),提供了一些工具方法($watch,$apply)树形结构与dom标签平行,会继承府scope的方法。
$rootscope一般位于(ng-app上),$scope可以传播事件,向上($emit)或向下($broadcast),是MVC基础也是双向数据绑定的基础。
可以用angular.element($0).scope()调试
creat -- watcher registration -- modelmutation -- mutation abservation -- scope destruction
5、模块是个框子集合,controllers,services,filters,directives,routes都是模块。
//依赖注入
var bookStoreApp = angular.module('bookStoreApp',[
'ngRoute','ngAnimate','bookStoreCtrls','bookStoreFilters',
'bookStoreServices','bookStoreDirectives'
]);
6、首页用ng-bind 绑定数据,后续可以用{{}}绑定。交给angular管理,加载好之后,就不会{{}}
7、指令三阶段:
加载(加载angularJS,找到np-app,确定应用边界)--
编译(遍历dom,根据指令代码中的template,replace,transclude装换dom结构,如果存在compile函数就调用)--
链接(调用每一条指令的link函数,link函数一般用来操作dom,绑定事件和作用域)
compile 函数用来对模板自身进行转换,link函数负责在模型和视图之间进行动态关联。
作用域在链接阶段才被绑定到编译之后的link函数上
compile函数仅仅在编辑阶段运行一次,而对于指令的每个实例,link都会执行一次。
compile可以返回preLink和postLink函数,而link函数只会返回postLink函数
如果需要修改DOM结构,应该在postLink中来做,在preLink做会报错
大多数我们只需编写link函数
8、scope 绑定策略
@把当前属性作为字符串传递。你还可以绑定来自外层scope的值,在属性中插入{{}}即可 scopeAt
=与父scope中的属性进行双向绑定 scopeEqual
&传递一个来自父scope的函数,稍后调用 scopeAnd
9、service
service都是单例的
service由$injector负责实例化
service在整个应用周期都存在,可以共享数据
service在需要的地方利用依赖注入机制注入service
自定义的service需要写在内置的service后面
内置的service命名都以$符号打头,自定义的应该避免
service和provicder,factory本质都是provider
10、module
module是angular中重要的模块组织方式,它提供了将一组内聚的业务组件(controller、service、filter、directive…)封装在一起的能力。这样做可以将代码按照业务领域问题分module的封装,然后利用module的依赖注入其关联的模块内容
同时module也是我们angular代码的入口,首先需要声明module,然后才能定义angular中的其他组件元素,如controller、service、filter、directive、config代码块、run代码块等。
关于module的定义为:angular.module(‘com.ngbook.demo’,[])。关于module函数可以传递3个参数,它们分别为:
- name:模块定义的名称,它应该是一个唯一的必选参数,它会在后边被其他模块注入或者是在ngAPP指令中声明应用程序主模块;
- requires:模块的依赖,它是声明本模块需要依赖的其他模块的参数。特别注意:如果在这里没有声明模块的依赖,则我们是无法在模块中使用依赖模块的任何组件的;它是个可选参数。
- configFn: 模块的启动配置函数,在angular config阶段会调用该函数,对模块中的组件进行实例化对象实例之前的特定配置,如我们常见的对$routeProvider配置应用程序的路由信息。它等同于”module.config“函数,建议用”module.config“函数替换它。这也是个可选参数。
11、Scope 对象下 的 $watch ,$apply 和 $digest
每次你绑定一些东西到你的UI上时你就会往$watch队列里插入一$watch。想象一下$watch就是那个可以检测它监视的model里时候有变化的东西。
当浏览器接收到可以被angular处理的事件(表单时间)时,$digest循环就会触发,处理$watch队列。
使用$apply 自动进入$digest。在没有绑定ng事件下的情况。http://www.angularjs.cn/A0a6
$apply()会执行整个循环,也就是$rootScope起。$digest()只会在当前的$scope中循环更新。$apply(function(){})可以加一个函数参数,执行完次函数后调用$digest()。$digest()循环是脏检查(Dirty Checking),它用来处理在listener函数被执行时可能引起的model变化。因此,$digest循环会持续运行直到model不再发生变化,
现在,假设你给一个按钮添加了ng-click指令,并且为他传递了一个函数。当你点击这个按钮的时候,AngularJS会把这个函数放进 $apply()中进行调用。所以,你的函数能够正常的执行,改变数据模型(如果有的话),并且,$digest循环会开始来保证你的更改会反映到视图(view)中。
可以通过检查$$phase来检查$digest是否正在进行中。
12、ui-router
state name: 表示路由状态,@后跟的就是这个name
url :根据不同状态加的后缀链接,状态有.就是相对路径,参数判断
13、指令处理与dom有关操作,服务共享数据等,他们都是模块化