本文共 7849 字，大约阅读时间需要 26 分钟。
AngularJS框架
本人是个新手，写下博客用于自我复习、自我总结。 如有错误之处，请各位大佬指出。 学习资料来源于：尚硅谷
AngularJS介绍
jQuery是JS的函数库，主要用来封装简化DOM操作。而AngularJS是Google开源的前端JS结构化框架，它的主体不再是DOM，而是页面中动态的数据。学习它可为后续学习React和VUE框架打下良好基础。
AngularJS做什么项目？ 它用来构建单页面（SPA）Web应用或Web App应用。
单页面应用（SPA）：single page application 特点：
- 将所有的活动局限于一个页面。
- 当页面中有部分数据发生了变化不会去刷新整个页面，而是局部刷新。
- 利用的ajax技术。
AngularJS特性和优点：
- 双向数据绑定
- 声明式依赖注入
- 解耦应用逻辑, 数据模型和视图
- 完善的页面指令
- 定制表单验证
- Ajax封装
用到的资源：
接下来用到的是Angular1.x的版本，它也有2.x和4.x版本，4.x只是在2.x的基础上添加了一些很小的部分。选择1.x版本是因为，它的语法是JS，而2.x和4.x的语法是typescript。
第一个Angular程序
先看用jQuery实现的：
您输入的内容是：
Angualar实现的：（可以明显看出比jQuery还精简）
您输入的内容是：{ {username}}
说明：
- ng-app(指令) : 告诉angular核心它管理当前标签所包含的整个区域,并且会自动创建
$rootScope根作用域对象 - ng-model : 将当前输入框的值与谁关联(属性名:属性值), 并作为当前作用域对象
($rootScope)的属性 - { {}} (表达式) : 显示数据,从作用域对象的指定属性名上取
1、表达式：通常有一个返回值，可以放在任何需要值的地方，比如函数调用的参数，一个变量名，一个运算。
2、语句：通常表示一个完整的执行单位，一段完整的js可执行的代码，有的语句也可以用表达式来执行，叫做表达式语句。
3、区别：语句用分号结尾，有些语句我们没有加分号，比如console.log虽然我们没有加分号，但也是语句，因为js引擎会自动解析并且加上分号。
四个重要概念
1. 双向数据绑定
- 数据绑定： 数据从一个位置自动流向另一个位置（这个操作由框架来完成）
- View–>Model
- Model–>View
- View(视图)： 也就是我们的页面（主要是Angular指令和表达式）
- Model(模型)：作用域对象(当前为$rootScope), 它可以包含一些属性或方法
- 单向数据绑定： 只支持一个方向
- View–>Model ： ng-init
- Model–>View : { {name}}
- 双向数据绑定：数据可以从View(视图层)流向Model(模型)，也可以从Model流向View。
- Model<–>View : ng-model
- angular是支持双向数据绑定的
说明：
- 当改变View中的数据, Model对象的对应属性也会随之改变:
ng-model指令 数据从View==>Model - 当Model域对象的属性发生改变时, 页面对应数据随之更新:
{ {}}表达式 数据从Model==>View ng-model是双向数据绑定, 而{ {}}是单向数据绑定ng-init用来初始化当前作用域变量。
现在通过该例应该对第一个AngularJS的程序的结构和用法有所了解了。也就是说：
通过设置ng-app(指令) ，它就会帮我们自动创建一个$rootScope根作用域对象。 通过设置ng-model 就可以将当前输入框的值当作新的属性值，传给对应的属性名（它是当前作用域对象($rootScope)的属性），从而修改这个属性名的属性值。 通过设置ng-init可以用来初始化当前作用域变量。 当我们想使用这个属性值的时候，使用{ {属性名}}就可以显示数据。当然是从作用域对象的指定属性名上取。 当代码运行起来的时候，就会发现因为设置了ng-init，所以输入框和输出结果都会显示这个初始值。这其中，我们无法通过修改输出结果，即{ {属性名}}来修改属性值，所以它是单向数据绑定（只能从Model流向View）。而我们显然可以通过修改输入文本框来修改属性值，即View流向Model（从页面上输入送到了作用域对象），所以ng-model是双向数据绑定（即能显示属性值，又能修改属性值）。而ng-init的值的变化也只能依靠其他方法的修改，所以它也是单向数据绑定（只能从View流向Model）。
02_(双向)数据绑定 姓名1：{
{name}}姓名2：{
{name}}
2. 依赖注入
- 依赖对象：完成某个特定的功能需要某个对象才能实现，这个对象就是依赖对象。
- 依赖对象会被别人(调用者)自动注入进入，注入的方式;
- 内部自建：不动态
- 全局变量：污染全局环境
- 形参：这种最好
- 依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是依赖注入。
- angular的 ‘$scope’对象就是依赖对象，并且是依赖注入的形式进行使用。
- 形参名不能随便定义。形参必须是特定的名称, 否则Angular无法注入抛异常 （只是针对当前这种写法）
- 再比如，回调函数的event就是依赖对象，回调函数有形参就是依赖注入。
说明：在接下来的代码中，涉及到控制器对象。它是用来控制AngularJS应用数据的实例对象，是我们View与Model之间的桥梁。当我们使用了ng-controller指令，我们需要指定控制器的构造函数，这个形参必须是$scope。这里$scope就是依赖对象，被angular动态注入。然后Angular就会自动new此函数创建控制器对象。每定义一个ng-controller指令， 内部就会创建一个新的作用域对象（$scope）, 并自动注入构造函数中，在函数内部可以直接使用$scope对象。这就是依赖注入。
输入的姓名为: {
{firstName+'-'+lastName}}输入的姓名2为: {
{getName()}}{ {firstName}}
3. MVC模式
- M: Model, 即模型, 在angular中:
- 为scope
- 储存数据的容器
- 提供操作数据的方法
- V: View, 即视图, 在angular中:
- 为页面
- 包括: html/css/directive/expression
- 显示Model的数据
- 将数据同步到Model
- 与用户交互
- C: Controller, 即控制器, 在angular中:
- 为angular的Controller
- 初始化Model数据
- 为Model添加行为方法
4. MVVM模式
- M: Model, 即数据模型, 在angular中:
- 为scope中的各个数据对象
- V: View, 即视图, 在angular中:
- 为页面
- VM: ViewModel, 即视图模型, 在angular中:
- 为scope对象
- 在angular中controller不再是架构的核心，在MVVM中只是起辅助作用，用来辅助$scope对象，即VM层
三个重要对象
1. 作用域对象
- 一个js实例对象，ng-app指令默认会创建一个根作用域对象(
$rootScope) - 这个对象的属性、方法， 页面都可以直接引用、操作
2. 控制器对象
- 用来控制AngularJS应用数据的实例对象，是我们View与Model之间的桥梁
- 当我们使用了
ng-controller指令，我们需要指定控制器的构造函数（必须定义一个$scope的形参），然后Angular就会自动new此函数创建控制器对象 - 每定义一个
ng-controller指令， 内部就会创建一个新的作用域对象（$scope）, 并自动注入构造函数中，在函数内部可以直接使用$scope对象
输入的姓名为: {
{firstName+'-'+lastName}}输入的姓名2为: {
{getName()}}{ {firstName}}
3. 模块对象 ※
- 也是一个对象
- 创建模块对象：
angular.module('模块名', [依赖的模块])如：var module = angular.module('模块名',[]);（只要不涉及第三方模块，[]里就不用添加任何东西） - 通过模块添加控制器：
module.controller('MyController', function($scope){//操作$scope的语句})
- angular的整体设计也是多模块的
- 核心模块： angular.js
- 扩展模块： angular-router.js, angular-message.js, angular-animate.js
说明：
在上段代码中，要生成作用域对象，是需要提前构造一个构造函数的，开发中不这么用，同时新版本也不支持这么用，所以现在选择模块对象。（这里选用angular-1.5.5版本）angular.module可在全局位置创建、注册、获取Angular模块。所有模块（angular核心或第三方）都必须使用这个机制注册才能在应用中生效。
当我们获取到了模块，就可以通过module.controller('MyController', function($scope){//操作$scope的语句})的方式来添加控制器了。
员工名:{
{empName}}员工:{
{empName}}
两个页面语法
1. 表达式 ※
- 语法:
{ {js表达式}} - 作用: 从作用域对象中读取对应的属性数据来显示数据
- 注意: 表达式中引用的变量必须是当前域对象有的属性(包括其原型属性)
- 不支持if/for/while
- 支持三目表达式
- 它能操作的数据：
- 基本类型数据: number/string/boolean
- undefined, Infinity, NaN, null解析为空串: “”, 不显示任何效果
- 对象的属性或方法
- 数组
{
{1}}{
{'尚硅谷'}}{
{true}}{
{undefined}}{
{'atguigu'+3}}{
{4+3}}{
{a+b}}{
{p.name}}---{ {p.age}}----{ {arr[2]}}
2. 指令 ※
- 什么是指令 ： Angular为HTML页面扩展的，自定义标签属性或标签。
- 作用：与Angular的作用域对象(scope)交互，扩展页面的动态表现力。
- 常用的指令：
- ng-app: 指定模块名，angular管理的区域
- ng-model： 双向绑定，输入相关标签
- ng-init： 初始化数据
- 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-click： 调用作用域对象的方法（点击时） 可以传$event
- ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
- ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event
价格计算器(自动)
数量： 价格：总计：{
{count1 * price1}}价格计算器(手动)
数量： 价格：总计：{
{totalPrice}}人员信息列表
- 偶数行：{ {$even}}，奇数行：{ {$odd}}，中间的：{ {$middle}}， 最后一个：{ {$last}}，第一个：{ {$first}}，第{ {$index + 1}}个， { {person.name}}----{ {person.age}}
{
{'asdfdsfds'}}{
{count2}}我喜欢
喜欢我
- { {p.name}}---{ {p.age}}
练习一：我的笔记 ※
Title 我的笔记
剩余字数：{
{getCount()}}
app.js
angular.module('noteApp', []) .controller('NoteController', function ($scope) { $scope.message = ''; //定义获取剩余字数的方法 $scope.getCount = function () { //判断输入数据的长度 if(this.message.length > 100){ $scope.message = $scope.message.slice(0, 100); } //返回剩余字数的个数 return 100 - $scope.message.length; }; //定义保存的方法 $scope.save = function () { alert('note is saved'); //将数据保存到sessionStorage中 sessionStorage.setItem('note_key', JSON.stringify($scope.message)); //将输入内容清空 $scope.message = ''; }; //定义读取的方法 $scope.read = function () { $scope.message = JSON.parse(sessionStorage.getItem('note_key') || '[]');//对读取null做了处理 }; // 定义删除的方法 $scope.delete = function () { $scope.message = ''; }; }); 练习二：我的备忘录 ※
Title 我的备忘录
{ {todo.todo}}
app.js
angular.module('todoApp', []) .controller('TodoControl', function ($scope) { //初始化数据 $scope.todos = [ { todo : '吃饭', isChecked : false}, { todo : '睡觉', isChecked : false}, { todo : '打豆豆', isChecked : false} ]; //定义添加todo的方法 $scope.add = function () { //判断添加的内容是否为空 if(!$scope.newTodo){ alert('输入的内容不能空'); return } // 组合新的todo对象 var todo = { todo : $scope.newTodo, isChecked : false }; // 将新的对象添加到todos中 $scope.todos.unshift(todo); //添加完将输入的内容清空 $scope.newTodo = ''; }; //定义删除 todo 的方法 $scope.delete = function () { //将$scope.todo的数据暂时保存 var oldTodo = $scope.todos; //将$scope.todos的数据清空 $scope.todos = []; //进行遍历 oldTodo.forEach(function (item, index) { //将没被选中的todo添加到 $scope.todos 数组中 if(!item.isChecked){ $scope.todos.push(item); } }); } }); 转载地址：http://moyki.baihongyu.com/