- 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) : 作用域对象(当前为
r
o
o
t
S
c
o
p
e
)
,
它
可
以
包
含
一
些
属
性
或
方
法
当
改
变
V
i
e
w
中
的
数
据
,
M
o
d
e
l
对
象
的
对
应
属
性
也
会
随
之
改
变
:
n
g
−
m
o
d
e
l
指
令
数
据
从
V
i
e
w
=
=
>
M
o
d
e
l
当
M
o
d
e
l
域
对
象
的
属
性
发
生
改
变
时
,
页
面
对
应
数
据
随
之
更
新
:
表
达
式
数
据
从
M
o
d
e
l
=
=
>
V
i
e
w
n
g
−
m
o
d
e
l
是
双
向
数
据
绑
定
,
而
是
单
向
数
据
绑
定
(
3
)
.
n
g
−
i
n
i
t
用
来
初
始
化
当
前
作
用
域
变
量
。
数
据
从
页
面
流
向
内
存
。
15.
作
用
域
与
控
制
器
(
1
)
作
用
域
对
象
一
个
J
S
实
例
对
象
,
n
g
−
a
p
p
指
令
默
认
会
创
建
一
个
根
作
用
域
对
象
(
rootScope), 它可以包含一些属性或方法 当改变View中的数据, Model对象的对应属性也会随之改变: ng-model指令 数据从View==>Model 当Model域对象的属性发生改变时, 页面对应数据随之更新: {{}}表达式 数据从Model==>View ng-model是双向数据绑定, 而{{}}是单向数据绑定 (3).ng-init 用来初始化当前作用域变量。 数据从页面流向内存。 15.作用域与控制器 (1)作用域对象 一个JS实例对象,ng-app指令默认会创建一个根作用域对象(
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的就是依赖对象
回调函数有形参就是依赖注入
- 开发的两种方式:
(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:人为设置时长