=============================基本概念部分======================================
1. AngularJS是什么?
* Google开源的 前端JS 结构化 框架
* 动态展示页面数据, 并与用户进行交互
* AngularJS特性(优点)
* 双向数据绑定
* 声明式依赖注入
* 解耦应用逻辑, 数据模型和视图
* 完善的页面指令
* 定制表单验证
* Ajax封装
2. **双向数据绑定**
* View（视图）： 页面（标签、指令，表达式）
* Model(模型) ：作用域对象（属性、方法）
* 数据绑定： 数据从一个位置自动流向另一个位置
* View-->Model
* Model-->View
* 单向数据绑定： 只支持一个方向
* View-->Model ： ng-init
* Model-->View : {{name}}
* 双向数据绑定
* Model<-->View : ng-model
* angular是支持双向数据绑定的
3. **依赖注入**
* 依赖的对象被别人(调用者)自动注入进入
* 注入的方式;
* 内部自建：不动态
* 全局变量：污染全局环境
* 形参：这种最好
* angualr就是通过声明式依赖注入， 来得到作用域对象
* 形参名不能随便定义（只是针对当前这种写法）
4. ** MVC模式**
* **M: Model, 即模型**, 在angular中:
* 为scope
* 储存数据的容器
* 提供操作数据的方法
* **V: View, 即视图**, 在angular中:
* 为页面
* 包括: html/css/directive/expression
* 显示Model的数据
* 将数据同步到Model
* 与用户交互
* **C: Controller, 即控制器**, 在angular中:
* 为angular的Controller
* 初始化Model数据
* 为Model添加行为方法
5. **MVVM模式**
* M: Model, 即数据模型, 在angular中:
* 为scope中的各个数据对象
* V: View, 即视图, 在angular中:
* 为页面
* VM: ViewModel, 即视图模型, 在angular中:
* 为scope对象
* 在angular中controller不再是架构的核心，在MVVM中只是起辅助作用，用来辅助$scope对象，即VM层
6. **作用域**
* 是一个js实例对象
* 这个对象的属性、方法， 页面都可以直接引用、操作
* ng-app指令： 内部创建一个根作用域（$rootScope）, 是所有其它作用域的父对象
7. **控制器**
* 也是一个对象，是我们View与Model之间的桥梁
* 当我们使用了ng-controller指令， 内部就会创建控制器对象
* 但我们同时得提供控制器的构造函数（必须定义一个$scope的形参）
* 每定义一个ng-controller指令， 内部就会创建一个新的作用域对象（$scope）, 并自动注入构造函数中,在函数内部可以直接使用$scope对象。
8. **模块**
* 也是一个对象
* 创建模块对象： angular.module('模块名', [依赖的模块])
* 通过模块添加控制器：
* module.controller('MyController', function($scope){//操作$scope的语句})
* angular的整体设计也是多模块的
* 核心模块： angular.js
* 扩展模块： angular-router.js, angular-message.js, angular-animate.js
![]()
=======================页面语法部分=======================
1. **表达式**
* {{js表达式}}
* 从作用域对象中读取对应的属性数据来显示数据
* 不支持if/for/while
* 支持三目表达式
2. **指令**
* 什么指令 ： 自定义标签属性/标签
* 常用的指令：
* ng-app: 指定模块名，angular管理的区域
* ng-model： 双向绑定，输入相关标签
* ng-init： 初始化数据
* ng-click： 调用作用域对象的方法（点击时）
可以传$event
* ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
* ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
* ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
* $index, $first, $last, $middle, $odd, $even
* ng-show: 布尔类型， 如果为true才显示
* ng-hide: 布尔类型， 如果为true就隐藏
* ng-class: 动态引用定义的样式 {aClass:true, bClass:false}
* ng-style: 动态引用通过js指定的样式对象 {color:'red', background:'blue'}
* ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
* ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event
3. **过滤器**
* 作用: 在显示数据时可以对数据进行格式化或过滤
* 单个--->格式化（将别的类型的数据转换为特定格式的字符串）
* 多个----》格式化/过滤
* 不会真正改变被操作数据
* {{express | 过滤器名：补充说明}}
* 常用过滤器：
* currency 货币格式化(文本)
* number数值格式化(文本)
* date 将日期对象格式化(文本)
* json: 将js对象格式化为json(文本)
* lowercase : 将字符串格式化为全小写(文本)
* uppercase : 将字符串格式化全大写(文本)
* limitTo 从一个数组或字符串中过滤出一个新的数组或字符串
* limitTo : 3 limitTo : -3
* orderBy : 根据指定作用域属性对数组进行排序
* {{[2,1,4,3] | orderBy}} 升序
* {{[2,1,4,3] | orderBy：‘-’}} 降序
* {{[{id:2,price:3}, {id:1, price:4}] | orderBy:'id'} id升序
* {{[{id:2,price:3}, {id:1, price:4}] | orderBy:'-price'} price降序
* filter : 从数组中过滤返回一个新数组
* {{[{id:22,price:35}, {id:23, price:45}] | filter:{id:'3'}} //根据id过滤
* {{[{id:22,price:35}, {id:23, price:45}] | filter:{$:'3'}} //根据所有字段过滤
=================================数据绑定demo=================================
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>02_(双向)数据绑定</title> </head> <body ng-app ng-init="username='tom'"> <!-- 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成 2. 双向数据绑定: 数据可以从View(视图层)流向Model（模型）, 也可以从Model流向View * 视图(View): 也就是我们的页面(主要是Angular指令和表达式) * 模型(Model) : 作用域对象(当前为$rootScope), 它可以包含一些属性或方法 * 当改变View中的数据, Model对象的对应属性也会随之改变: ng-model指令 数据从View==>Model * 当Model域对象的属性发生改变时, 页面对应数据随之更新: {{}}表达式 数据从Model==>View * ng-model是双向数据绑定, 而{{}}是单向数据绑定 3.ng-init 用来初始化当前作用域变量。 --> <input type="text" ng-model="username"> <div>输入的名是:{{username}}</div> <input type="text" ng-model="username"> <div>输入的名是:{{username}}</div> <script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script> </body> </html>
=========================作用域和控制器demo==================================
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body ng-app> <!-- 1. 作用域对象 : * 一个js实例对象, ng-app指令默认会创建一个根作用域对象($rootScope) * 它的属性和方法与页面中的指令或表达式是关联的 2. 控制器: * 用来控制AngularJS应用数据的 实例对象 * ng-controller : 指定控制器构造函数, Angular会自动new此函数创建控制器对象 * 同时Angular还有创建一个新的域对象$scope, 它是$rootScope的子对象 * 在控制器函数中声明$scope形参, Angular会自动将$scope传入 --> <div ng-controller="MyController"> <input type="text" ng-model="firstName"> <input type="text" ng-model="lastName"> <div>firstName:{{firstName + '-' + lastName}}</div> <div>lastName:{{getName()}}</div> </div> <script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script> <script type="text/javascript"> function MyController($scope) { // 形参必须是$scope console.log(this instanceof MyController); $scope.firstName = 'tom'; $scope.lastName = 'jerry'; $scope.getName = function () { return $scope.firstName + ' ' + this.lastName; } } </script> </body> </html>
=============================依赖注入demo==================================
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <!-- * 依赖对象：完成某个特定的功能需要某个对象才能实现，这个对象就是依赖对象。 * 依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是依赖注入。 * angular的 ‘$scope’对象就是依赖对象，并且是依赖注入的形式进行使用。 ！！！形参必须是特定的名称, 否则Angular无法注入抛异常 * 回调函数的event的就是依赖对象 * 回调函数有形参就是依赖注入 --> <button id="btn">hello world</button> <script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script> <script type="text/javascript"> window.onload = function (ev) { document.getElementById("btn").onclick = function (ev2) { alert(ev2.clientX); } } </script> <script type="text/javascript"> </script> </body> </html>
=============================angularJs常用指令===================================
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <!-- 表达式: {{}} (表达式) : 显示数据,从作用域对象的指定属性名上取 1、表达式：通常有一个返回值，可以放在任何需要值得地方，比如函数调用的参数，一个变量名，一个运算， 2、语句：通常表示一个完整的执行单位，一段完整的js可执行的代码，有的语句也可以用表达式来执行，叫做表达式语句。 3、区别：语句用封号结尾，有些语句我们没有加封号，比如console.log虽然我们没有加封号，但也是语句，因为js引擎会自动解析并且加上封号。 js引擎在解析的时候会自动的加上封号 4、特例：if语句，就不用加封号 可也是完整的语句。 指令: 1. Angular指令 * Angular为HTML页面扩展的: 自定义标签属性或标签 * 与Angular的作用域对象(scope)交互,扩展页面的动态表现力 2. 常用指令(一) * ng-app: 指定模块名，告诉angular核心它管理当前标签所包含的整个区域,并且会自动创建$rootScope根作用域对象 * ng-model： 双向绑定，输入相关标签,将当前输入框的值与谁关联(属性名:属性值), 并作为当前作用域对象($rootScope)的属性 * ng-init： 初始化数据 * ng-click： 调用作用域对象的方法（点击时） * ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的） * ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}） * ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域 * $index, $first, $last, $middle, $odd, $even * ng-show: 布尔类型， 如果为true才显示 * ng-hide: 布尔类型， 如果为true就隐藏 --> <body ng-app="myApp" > <div ng-controller="MyController"> <div> <h1>价格计算器(自动)</h1> 数量:<input type="number" ng-model="count"> 价格:<input type="number" ng-model="price"> <p>总计:{{count * price}}</p> </div> <div> <h1>价格计算器(手动)</h1> 数量:<input type="number" ng-model="count1"> 价格:<input type="number" ng-model="price1"> <button ng-click="getTotalPrice()">计算</button> <p>总计:{{totalPrice}}</p> </div> <div> <h1>人员信息列表</h1> <ul> <li ng-repeat="person in persons"> {{$index}}======{{person.name}}======{{person.age}}=====odd===={{$odd}} </li> </ul> </div> <div> <button ng-click="switchShow()">点击切换显示与隐藏</button> <div ng-show="ngShow">show=====ng-show=====show</div> <div ng-hide="ngShow">hide=====ng-hide=====hide</div> </div> </div> <script type='text/javascript' src='../../js/angular-1.5.5/angular.js'></script> <script type='text/javascript'> angular.module("myApp",[]) .controller("MyController",["$scope",function ($scope) { // 自动计算:初始化表单数据 $scope.count=20; $scope.price=2; // 手动计算:初始化表单数据 $scope.count1=20; $scope.price1=20; $scope.totalPrice=400; $scope.getTotalPrice=function () { $scope.totalPrice = $scope.count1 * $scope.price1; } // 人员信息列表:初始化 $scope.persons = [ {"name":"tom1", "age":"31"}, {"name":"tom2", "age":"32"}, {"name":"tom3", "age":"33"}, {"name":"tom4", "age":"34"}, {"name":"tom5", "age":"35"} ] // show-hide信息:初始化 ngShow = true; $scope.switchShow = function () { $scope.ngShow = !$scope.ngShow; } }]) </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <!-- 常用指令(二) * ng-class: 动态引用定义的样式 {aClass:true, bClass:false} * ng-style: 动态引用通过js指定的样式对象 {color:'red', background:'blue'} * ng-click: 点击监听, 值为函数调用, 可以传$event * ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event * ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event --> <style> .evenB { background-color: grey; } .oddB { background-color: green; } </style> <body ng-app="myApp"> <div ng-controller="MyController"> <div ng-style="myStyle" ng-mouseenter="enter()" ng-mouseleave="leave()"></div> <div> <ul> <li ng-repeat="person in persons" ng-class-even="{evenB: true}" ng-class-odd="{oddB: true}"> {{person.name}}===={{person.age}} </li> </ul> </div> </div> <script type='text/javascript' src="../../js/angular-1.5.5/angular.js"></script> <script type="text/javascript"> angular.module("myApp",[]) .controller("MyController",["$scope",function ($scope) { // 设置样式 $scope.myStyle = { "width": "100px", "height": "100px", "background-color": "#ccc" }; // 设置鼠标移入移除事件 $scope.enter = function () { this.myStyle.height = "200px" }; $scope.leave = function () { this.myStyle.height = "100px" } // 设置人员信息 $scope.persons = [ {"name":"tom1","age":"21"}, {"name":"tom2","age":"22"}, {"name":"tom3","age":"23"}, {"name":"tom4","age":"24"}, {"name":"tom5","age":"25"} ] }]) </script> </body> </html>
================================example01=================================
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> textarea{ resize: none; } </style> </head> <body ng-app="noteApp"> <div ng-controller="MyNoteController"> <textarea cols="30" rows="10" ng-model="msg"></textarea> <div> <button ng-click="save()">保存</button> <button ng-click="delete()">删除</button> <button ng-click="read()">读取</button> </div> <p>剩余的字数是:{{getCount()}}</p> </div> <script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html>
app.js文件如下:
angular.module("noteApp",[])
.controller("MyNoteController",["$scope",function ($scope) {
// 定义计算剩余字数的方法,当超过上限时,阻止用户继续输入
$scope.getCount = function () {
if($scope.msg == undefined || $scope.msg == null){
return 10;
}
if($scope.msg.length > 10){
$scope.msg = $scope.msg.slice(0,10);
return "已超过字数,无法再输入"
}
return 10-$scope.msg.length;
};
// 定义保存事件
$scope.save = function () {
alert("数据已保存!")
localStorage.setItem("noteKey", JSON.stringify($scope.msg));
$scope.msg = "";
};
// 定义读取数据的方法
$scope.read = function () {
var item = localStorage.getItem("noteKey");
if (item == null || item == undefined){
return;
}
$scope.msg = JSON.parse(item);
};
// 定义删除数据的方法
$scope.delete = function () {
localStorage.removeItem("noteKey");
$scope.msg = "";
}
}]);
=============================example02==================================
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body ng-app="todoApp" > <div ng-controller="MyToDoController"> <h2>我的备忘录</h2> <div> <input type="text" ng-model="newToDo"> <button ng-click="add()">新增</button> </div> <div ng-repeat="todo in todos"> <span>{{todo.name}}</span> <input type="checkbox" ng-model="todo.isChecked"> </div> <div> <button ng-click="delete()">删除记录</button> </div> </div> <script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html>
app.js文件如下:
angular.module("todoApp",[])
.controller("MyToDoController",["$scope",function ($scope) {
// 初始化数据
$scope.todos = [
{"name": "吃饭", isChecked: false},
{"name": "睡觉", isChecked: false},
{"name": "打豆豆", isChecked: false}
];
// 增加数据的方法
$scope.add = function () {
if(!$scope.newToDo){
alert("输入的内容不能为空");
return;
}
var obj = {
name: $scope.newToDo,
isChecked: true
};
$scope.todos.unshift(obj);
};
// 删除数据的方法
$scope.delete = function () {
var oldTodos = $scope.todos;
$scope.todos = [];
oldTodos.forEach(function (item, index) {
if(!item.isChecked){
$scope.todos.push(item);
}
})
}
}]);