【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的原型继承也给前端编程带来了很多困难；

[code]AngularJS实现MVC如下

AngluarJs中的Controller

ng-controller=”控制器名”

Controller使用过程中的注意点：

1.不要试图去复用Controller，一个控制器一般只负责一小块视图，通用的东西用service 来调用，不推荐使用通用控制器，是个错误；

2.不要在Controller中操作DOM，这不是控制器的职责，封装在指令里面。

3.不要在Controller里面做数据格式化，ng有很好用的表单控件。

4.不要在Controller里面做数据过滤操作，ng有$filter服务。

5.一般来说，Controller是不会互相调用的，降低耦合度，控制器之间的交互会通过事件进行。

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

Model 如何复用

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

View如何复用

利用Directive实现

[code]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