### 复习并总结Angular开发流程 0.下载angular，暴力angular，找到js拖拽过来，npm下载 1.引入 2.在要控制的标签上写上ng-app 3.写controller,告诉angular哪部分dom结构有哪个controller去接管 4.在controller里面处理数据和具体业务逻辑 5.绑定值或文本，ng-model {{}}表达式 ### 复习MVC - MVC是一种设计思想,它是约定了程序的结构应该是怎么。 - 每一个组成原件都会有一个明确的职责。 - 提高代码的结构和可维护性; ### 前端的mvc ## mvvm mv* ###
scope ### ViewModel -
scope实际上就是MVVM中所谓的VM（视图模型）−正是因为
scope在Angular中大量使用甚至盖过了C（控制器）的概念，所以很多人把Angular称之为MVVM框架 ## Angular全局Api使用 - 数据比较API + angular.isArray() 判断给定的对象是否为数组。 + angular.isDate() 判断给定的对象是否为日期类型。 + angular.isDefined() 判断给定的对象是否定义过。 + angular.isElement() 判断给定的对象是否为一个DOM元素。 + angular.isFunction() 判断给定的对象是否为一个函数。 + angular.isNumber() 判断给定的对象是否为数字。 + angular.isObject() 判断给定的对象是否为object类型。 + angular.isString() 判断给定的对象是否为字符串。 + angular.isUndefined() 判断给定的对象是否没有定义过（与angular.isDefined()相反）。 + angular.equals() 判断给定的两个对象是否相等。 - 其他API使用 + angular.lowercase() 将字符串转换为小写形式。 + angular.uppercase() 将字符串转换为大写形式。 + angular.copy() 深拷贝一个对象或数组。 + angular.forEach() 遍历对象或数组中的每一个元素并执行一个函数。
var values = {name: 'feifei', gender: 'zhuzhu'};
angular.forEach(values, function(value, key) {
});
var objs =[1,2];
angular.forEach(objs, function(data,index,array){
console.log(data);
console.log(index);
console.log(array);
});
## 模块 ### 控制器的作用 - 初始化属性 - 暴露属性或者行为 - 监视数据变化
scope.name=”;
scope.$watch(‘name’,function (newVal,oldVal) { console.log(newVal); console.log(oldVal); }) ### 控制器代码压缩问题 - 当代码进行js压缩时候controller里面的内容会被当成变量替换掉， 为了防止这个问题发生在controller中出现 controller(‘myCtrl’,[‘
scop′,function(
scope){}]) ### 控制器的多种写法 - 1.简单写法 app.controller(‘myCtrl’,function(){}) - 2.早期使用 （angular-1.2.29版本） function myController(
scope)$scope.name=”angular早期使用”;−3.fuction写在外面（写在外面不能被压缩）functionotherCtrl(
scope) {
scope.name=’123’;
}
app.controller(‘myCtrl’,otherCtrl)
- 4. fuction写在外面（写在外面不能被压缩）
function otherCtrl(otherscope) {
otherscope.name=’123’;
}
//依赖注入
otherCtrl.inject=['
scope′];//这里对方法添加
inject app.controller(‘myCtrl’,otherCtrl) - 5. 面向对象方法使用
{{scope.name}}
- 1.控制器的function不写改为引用function app.controller('myCtrl',demoCtrl);
- 2.创建一个面向对象的function ` function demoCtrl() {
this.name='123';
} `
- 3.使用的时候添加 ` as scope ` ng-controller="myCtrl as scope"
#依赖注入 - 没事你不要来找我，有事我会去找你。 - 原理 框架在调用方法的过程中通过获取到传递的参数，然后框架内部将方法toString处理以后， 再通过正则表达式将其获取到然后依次实例化。 ###控制器继承
var app=angular.module('mainApp',[]); app.controller('SelfCtrl', function(
scope)$scope.foo(););app.controller(′ParentCtrl′,function(
scope) { $scope.foo=function(){ console.log(123); } }); ###控制器之间父子通信 1.从父控制器传子控制器
click me
指令
<div ng-switch="name">
<div ng-switch-when="小明">我是小明</div>
<div ng-switch-when="小红">我是小红</div>
<div ng-switch-when="小月">我是小月</div>
</div>
其他常用指令
- ng-checked：
- ng-selected：
- ng-disabled：
- ng-readonly：
常用事件指令
不同于以上的功能性指令，Angular还定义了一些用于和事件绑定的指令：
- ng-blur：失去焦点
- ng-focus：获得焦点
- ng-change：改变事件
- ng-click： ng-click=”add()”
- ng-dblclick：双击事件
- ng-submit： 表单提交事件
