Angularjs学习
1. Angularjs
一、 四个重要概念（1.双向数据绑定 2.依赖注入）
二、三个重要对象(1.作用域对象 2. 控制器对象3. 模块对象)
三、两个页面语法()
2. 指令
ng-app(指令): 告诉angular 核心它管理当前标签所包含的整个区域，并且会自动创建$rootScope 根作用域对象。
ng-model : 将当前输入框的值与谁关联(属性名:属性值),并且为当前作用域对象($rootScope)的属性
{{}} (表达式) :显示数据，从当前作用域对象的指定属性名上取。
1. 表达式: 通常有一个返回值，可以放在任何需要值得地方，比如函数调用的参数，一个变量名，一个运算。
2 语句 : 通常表示一个完整的执行单位，一段完整的js 可执行代码，有的语句也可以用表达式来执行，叫做表达式
语句。
3 区别 : 语句用分号结尾，有些语句我们没有加分号，比如console.log 虽然我们没有加分号，单也是语句，因为
js引擎在解析的时候会自动加上分号
4.特例 : if 语句，就不用加分号，可也是完整语句。
3. 数据绑定
1.数据绑定 : 数据从一个地方A 转移(传递)到另一个地方B，而且这个操作由框架来完成
2. 双向数据绑定 : 数据可以从 view(视图层) 流向Model(模型),也可以从Model 流向View * 视图(View) : 也就是我们的页面（主要是Angularjs 指令和表达式) * 模型(Model): 作用域对象(当前为$rootScope),他可以包含一些属性和方法。 * 当改变View 中的数据，Model 对象的对应属性也会改变: ng-model 指令 数据从View ===>Model * 当Model域对象的属性发生改变时候，页面对应数据随之更新: {{}} 表达式 数据从Model===>View * ng-model 是双向数据绑定,而{{}} 是单向数据绑定
3. ng-init 用来初始化当前作用域变量。View=====>Model 视图流向 内存
4.对象
1. 作用域对象
* 一个JS 实例对象，ng-app 执行默认会创建一个根作用域对象($rootScope) *他的属性和方法与页面中的指令或者表达式是关联的。
2. 控制器对象 * 用来控制Angularjs 应用数据的实例对象 * ng-controller :指定构造器构造函数，Angular 会自动new 此函数创建控制器对象 * 同时Angular 还会创建一个新的作用域对象 $scope 。他是$rootScope的子对象 * 在控制器中声明$scope 形参，Angular 会自动将$scope 传入
js 中一个函数是被 new 过, 还是被自调用，window. 对象. 调用，看什么东西不一样。this 不一样 。 自调用 对象是 window ,对象. 调用 是对爱。 new 是实例对象
5. 依赖注入
*依赖对象:完成否个特定的功能需要某个对象才能实现，这个对象就是依赖对象。 *依赖注入:依赖的对象以形参的形式被注入进来使用，这种方式是声明式依赖注入。
* angular 的 ‘$scope' 对象就是依赖对象，并且是依赖注入的形式进行使用。 ！！！行参必须是特定的名称，否则Angular 无法注入抛出异常。
* 回调函数的 event 就是依赖对象。
* 回调函数有形参就是依赖注入
开发的两种方式:
1. 命令式 * 更加注重执行过程 更像考试的解答题
2. 声明式 * 更加注重执行结果 声明式是对命令的局部包装。 更像选择题和填空题
6.模块对象和控制器
<script>
// 创建模块对象
var myModule = angular.module("myApp", []);
// 生成作用域对象
myModule.controller("myCtrl", function($scope) {
$scope.empName = "kobe";
});
myModule.controller("myCtrl2", function($scope) {
$scope.empName = "wade";
});
</script>
优化链式调用
angular.module("myApp", [])
.controller("myCtrl", function($scope) { 返回值是？ 模块对象
$scope.empName = "kobe";
})
.controller("myCtrl2", function($scope) { 隐式声明注入
$scope.empName = "kobe";
})
// 以上的代码有问题
// js 代码压缩后形参会用abcd 代替
// 代码压缩的$scope 会被abcd 代替, Angular 解析不了
// 解决方案
angular.module("myApp", [])
.controller("myCtrl",['$scope',function('$scope){ // 显示依赖注入
$scope.empName = "kobe";
}])
.controller("myCtrl2",['$scope',function('$scope){
$scope.empName = "wade";
}])
7. 指令
1.Angular指令
* Angular 为HTML 页面的扩展的: 自定义标签属性或标签
* 与Angular 的作用域对象(Scope) 交互，扩展页面的都动态表现力
2. 常用的指令
* ng-app: 指定模块名，angular 管理的区域
* ng-model: 双向绑定, 输入相关标签
* ng-init : 初始化数据
* ng-click : 调用作用域对象的方法(点击时)
* ng-controller: 指定控制器的构造函数名，内部会自动创建一个新的子作用域（外部的）
* ng-bind : 解决使用{{}}显示数据蓝屏（在很短的时间内显示{{}}）
* ng-repeat : 遍历数组显示数据，数组有几个元素就会产生几个新的作用域
* $index ,$first,$last,$middle,$odd,$even
* ng-show : 布尔类型, 如果为true 才显示
* ng-hide : 布尔类型, 如果为true 才隐藏
3.常用的指令(二)
* ng-class : 动态引用定义的样式 {aClass:true,bClass:false}
* ng-style : 动态引用通过js 指定的样式对象 {color:'red',background:'red';}
* ng-click :点击监听，值为函数调用，可以传 $event
* ng-mouseenter : 鼠标移入监听，值为函数调用，可以传 $event
* ng-mouseleave : 鼠标移出监听，值为函数调用，可以传 $event
8. 表达式
表达式
1. 使用Angular 表达式
* 语法: {{expression}}
* 作用: 显示表达式的结果数据
* 注意: 表带式中引用的变量必须是当前域对象有的属性(包含其原形属性)
2. 操作的数据
* 基本类型数据: number/string/boolean
* underfined ,NAN, null ,Infinity,解析为字符串: "" 不显示任何效果
* 对象的属性或方法
* 数组
js 中 数组有reverse 将数组里面的元素翻转。
