AngularJS框架知识点

1. AngularJS是什么?
   Google开源的 前端JS 结构化 框架
   动态展示页面数据, 并与用户进行交互
   AngularJS特性(优点)
   双向数据绑定
   声明式依赖注入
   解耦应用逻辑, 数据模型和视图
   完善的页面指令
   定制表单验证
   Ajax封装2.AngularJS 框架的基本语法及应用。
   内容包括: AngularJS基本语法，双向数据绑定，指令，表达式，MVC，MVVM, 模块对象，控制器对象，作用域对象等知识点。

3…安装Infinity-New-Tab_v2.5.3插件：针对chrome,
ng-inspector插件:针对angularjs。

4.jQuery:良好的JS函数库。
5. 耦合性(Coupling)，也叫耦合度，是对模块间关联程度的度量。耦合的强弱取决于模块间接口的复杂性、调用模块的方式以及通过界面传送数据的多少。模块间的耦合度是指模块之间的依赖关系，包括控制关系、调用关系、数据传递关系。模块间联系越多，其耦合性越强，同时表明其独立性越差( 降低耦合性，可以提高其独立性)。软件设计中通常用耦合度和内聚度作为衡量模块独立程度的标准。划分模块的一个准则就是高内聚低耦合。
6.单页面应用（SPA）：single page application
特点：
（1）.将所有的活动局限于一个页面
（2）.当页面中有部分数据发生变化，则局部刷新页面
（3）.利用ajax技术，路由
7. $(function(){}), 同document.ready:文档(结构)加载完毕
window.onload：整个页面加载完毕
8. keyup：当按下按键时，改变文本域的颜色
$(“input”).keyup(function(){
KaTeX parse error: Expected 'EOF', got '#' at position 35: …ground-color","#̲D6D6FF"); }); 9…rootScope根作用域对象
ng-model : 将当前输入框的值与谁关联(属性名:属性值), 并作为当前作用域对象($rootScope)的属性
{{}} (表达式) : 显示数据,从当前作用域对象的指定属性名上取

(1)表达式：通常有一个返回值，可以放在任何需要值得地方，比如函数调用的参数，一个变量名，一个运算，

(2)语句：通常表示一个完整的执行单位，一段完整的js可执行的代码，有的语句也可以用表达式来执行，叫做表达式语句。

(3)区别：语句用封号结尾，有些语句我们没有加封号，比如console.log虽然我们没有加封号，但也是语句，因为js引擎会自动解析并且加上封号。
js引擎在解析的时候会自动的加上封号

(4)特例：if语句，就不用加封号 可也是完整的语句。
10.shift+{{:则是{{}}
11. HelloWorld
导入angular.js, 并在页面中引入
在中ng-app指令
定义ng-model=‘xxx’/{{xxx}}
12. 双向数据绑定
View（视图）： 页面（标签、指令，表达式）
Model(模型) ：作用域对象（属性、方法）
数据绑定： 数据从一个位置自动流向另一个位置
View–>Model
Model–>View
单向数据绑定： 只支持一个方向
View–>Model ： ng-init
Model–>View : {{name}}
双向数据绑定
Model<–>View : ng-model
angular是支持双向数据绑定的
13.对象用来存数据
函数是可执行调用的特殊对象
14.
(1). 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成
(2). 双向数据绑定: 数据可以从View(视图层)流向Model（模型）, 也可以从Model流向View
视图(View): 也就是我们的页面(主要是Andular指令和表达式)
模型(Model) : 作用域对象(当前为$rootScope),它可以包含一些属性或方法当改变View中的数据,Model对象的对应属性也会随之改变:ng-model指令数据从View==>Model当Model域对象的属性发生改变时,页面对应数据随之更新:表达式数据从Model==>Viewng-model是双向数据绑定,而是单向数据绑定(3).ng-init用来初始化当前作用域变量。数据从页面流向内存。15.作用域与控制器(1)作用域对象一个JS实例对象，ng-app指令默认会创建一个根作用域对象($rootScope)
它的属性和方法与页面中的指令或表达式是关联的
(2)控制器
用来控制AngulaarJS应用数据的实例对象
no-controller:指定控制器构造函数。Angular会自动new此函数创建控制器对象
同时Angular还有创建一个新的域对象&scope，它是&rootScope的子对象
在控制函数中声明KaTeX parse error: Expected 'EOF', got '&' at position 20: …e形参，Angular会自动将&̲scope传入 16.依赖注入…scope’对象就是依赖对象，并且是依赖注入的形式进行使用。
！！！形参必须是特定的名称, 否则Angular无法注入抛异常

	     回调函数的event的就是依赖对象
	     回调函数有形参就是依赖注入

17. 开发的两种方式：
    (1)命令式:比较注重执行过程
    (2)声明式比较注重执行结果
    声明式是对命令式的局部包装
    18.表达式
    (1). 使用Angular表达式:
    语法: {{expression}}
    作用: 显示表达式的结果数据
    注意: 表达式中引用的变量必须是当前域对象有的属性(包括其原型属性)
    (2). 操作的数据
    基本类型数据: number/string/boolean
    undefined, Infinity, NaN, null解析为空串: “”, 不显示任何效果
    对象的属性或方法
    数组
    19.常用指令
    (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就隐藏

！！！！！
20.
H5本地存储技术
（1）sessionStorage(会话存储)
生命周期：浏览器打开到关闭的过程
大小：5M
保存位置：浏览器端
setItem(‘key’,value)
getItem(‘key’)
removeItem(‘key’)
（2）localStorage(永久存储)
生命周期：永久，除非人为删除
大小：5M甚至更大
保存位置：浏览器端
setItem(‘key’,value)
getItem(‘key’)
removeItem(‘key’)

cookie
作用：用于浏览器和服务端进行通信
特点：
大小：4kb
每次发送请求都携带，导致占用带宽
保存在浏览器端
cookie容易被截获，不安全
生命周期：
(1)会话cookie浏览器打开到关闭的过程
(2)人为设置cookie:人为设置时长