【angular】学习AngularJS 笔记(慕课网)【01】

学习AngularJS 笔记

angularJS 四大核心特性：

• MVC
• 模块化
• 指令系统
• 双向数据绑定

问： 为什么23种设计模式中没有MVC

---

开发、调试、测试工具
需要自动化、工业化的开发环境：
代码编辑工具：sublime （支持Zencoding） / webstorm；
断点调试工具：chrome插件batarang 针对angularJS；
版本管理工具：git git小乌龟；
代码合并和混淆工具：nodeJS； npm nodejs下的自动化管理工具；GRUNT ；
依赖管理工具：bower 自动安装依赖组件；
轻量级Server:httpServer
单元测试工具：runner– karma / jasmine (分组、用例、期望、匹配)；
集成测试工具：Protractor 专为AngularJS定制

---

2、AngularJs 基本概念

---

2.1、MVC
为什么需要MVC

• 代码越来越多，切分职责；
• 为了复用；
• 为了后期维护方便；
  目的：模块化和复用

---

前端MVC困难

• 操作DOM的代码必须等待整个页面全部加载完成；
• 多个JS文件如果出现相互依赖，程序员必须自己解决；
• JS的原型继承也给前端编程带来了很多困难；

---

AngularJS实现MVC如下

AngluarJs中的Controller
ng-controller=”控制器名”

Controller使用过程中的注意点：
1.不要试图去复用Controller，一个控制器一般只负责一小块视图，通用的东西用service 来调用，不推荐使用通用控制器，是个错误；
2.不要在Controller中操作DOM，这不是控制器的职责，封装在指令里面。
3.不要在Controller里面做数据格式化，ng有很好用的表单控件。
4.不要在Controller里面做数据过滤操作，ng有$filter服务。
5.一般来说，Controller是不会互相调用的，降低耦合度，控制器之间的交互会通过事件进行。

视图->控制器 -> 模型 <-控制器<-视图

---

Model 如何复用

{{取值绑定ng-model}}
<input ng-model="greeting.text"/>
<p>{{greeting.text}},Angular</p>
//加载页面后先启动ng，找到ng-app找其下面的ng-model，绑定标签

---

View如何复用
利用Directive实现

AngularJS全部借助于$scope作用于来实现的MVC;
作用于存在一个层级结构，如果找不到属性，会一直查找直到根作用于；
$scope有事件机制；是整个AngularJS的基础，首先会创建rootScope;

$scope是一个POJO(Plain Old JavaScript Object)
$scope提供了一些工具方法$watch()/$apply()
$scope是表达式的执行环境（或者叫作用域）
$scope是一个树型结构，域DOM标签平行
子$scope对象会继承$scope上的属性和方法
$scope可以传播事件，类似DOM事件，可以向上也可以向下
$scope不仅是MVC的基础，也是后面实现双向数据绑定的基础

可以用angular.element($0).scope()进行调试（或 火狐的插件 Inspect Angular Scope）

$scope的生命周期：Creation->Watcher registration->Model mutation->Mutation observation->Scope destruction