Angular学习总结

Posted 2021-04-26 93STYLE女主编

一、Angular.js

a) AngularJS诞生于2009年，AngularJS 是一个 javascript 框架，致力于开发单页面应用程序（Single Page Application），实现页面的CRUD操作

b) 基本操作思路：以数据为中心，提供html页面操作

c) MVC方式

i. M：model，数据模型--记载数据

ii. V：View，视图---展示数据---ng指令+表达式+运算符+HTML标签

iii. C：controller，控制器----function（）{构建数据模型}

iv. 优点：实现了数据、逻辑和表现的分离

v. 缺点：提高代码的复杂程度

d) 实现步骤

i. 引入angular.js

ii. 使用ng-app指令

iii. 使用数据、指令、HTML标签展示

二、表达式：

算术、比较、逻辑、三目、特殊

三、指令——（可以查手册）

a) ng-app

b) ng-init:声明定义数据，不建议使用--推荐使用Controller中定义model

c) ng-repeat

i. 循环数组的时候，默认$id（数值），如果数值有相同的，会导致$id相同

ii. 如果解决 track，使用 $index

iii. n in array

iv. (k,v) in array----k代表 $index,v代表数组中的成员

d) ng-if

e) ng-bind：与{{}}功能一样，没有替换显示的过程

 不会出现闪动的效果

f) ng-src：有些标签，src属性，不能直接绑定

g) ng-show/ng-hide：绑定到bool类型的数据，决定标签显示、隐藏

h) ng-checked：设置checkbox 是否被选中---bool类型

i) ng-disabled：设置标签的 disabled （按钮）---bool类型

j) ng-click：设置元素的单击事件，可以调用控制器里的方法，修改模型数据，实现页面数据的更新显示

四、module：自定义模块，在模块中创建控制器

a. 自定义模块  angular.module("M1",['ng'])

b. 在模块中定义控制器   .controller("C1",function($scope){//创建数据模型})

c. 页面上，ng-app="M1"

d. 标签上 ng-controller="C1"

 ----M1、C1严格区分大小写

e. controller作用域范围

f. 以控制器作为标识

不同控制器里，变量名称相同的时候，不会重复

五、angular的四大特征

a) MVC模式

b) 双向数据绑定

    i. 方向1：将model绑定到了 view--model中的数据发生改变，页面显示

    ii. 方向2：页面的数据发生改变（用户录入），将view中的数据---》model

     绑定后只能显示的标签，不具备修改功能

     表单控件---录入数据，收集数据

         文本框、多行文本框、单选、多选、下拉框

     实现方式： ng-model---》将某个数据变量和某个控件实现双向绑定

情况一：获取数据，直接在页面上显示

ng-model="变量的名"

{{变量名}}

情况二：需要代码中获取数据，进行处理

$watch---监视

$scope.$watch('监视的那个model变量',function(){});

 监视：将model--》view

          view---》model

注：用js的定时器，间隔一段时间之后，再来修改模型数据---数据改变，view不发生变化

解决方案一：手工用代码让它启动---不建议

解决方案二：不要使用js的定时器，使用ng提供的定时器功能

$timeout---对应一次性定时器

$interval---对应于周期性定时

启动后，可能需要停止

var t = $interval();

cancel(t);

 扩展：setTimeout/setInterval 和 $timeout/$interval 的区别

c) 深入剖析ng 绑定原理

i. ng底层维护着一个队列（$watch）

ii. 轮询

iii. 优点：数据实时更新

iv. 缺点：对于性能有严格要求，尽量减少绑定

{{data}}---》常用的绑定：model发生改变，页面更新

{{::data}}--->绑定一次，不会实时更新

----适应于静态数据

 

六、作用域范围对象

a) $scope对象：对应于一个控制器对象，维护模型数据

i. 系统使用$id标识---从2

ii. 定义模型数据，由作用域对象维护

b) $rootScope对象：根作用域，用于在多个作用域之间共享

i. 有且只有一个----单例模式---$id 为 1

ii. 如果数据和子作用域冲突

  c)控制器嵌套：使用js中的法则

七、过滤：格式化显示、排序等----{{ 变量 |  关键字:参数}}

a）number(注：累加，冒了----infinity、NaN)

b）currency

c）date

d）orderby

八、依赖注入（DI: dependency injection）

1、Angular 的第三大特征：依赖注入

2、依赖：对象A而言，如果需要用到对象B的功能

 将对象B传入即可----A 依赖于 B

3、实现方式

i. 主动创建

var c = new  Car();

var d = new  Driver(c);

 

function Driver(c){

this.drive = function(){

c.xxx();

};

}

ii. 被动注入:常用于框架技术

controller("C1",function($scope,$interval){})

4、如果文件被压缩

i. js文件，在实际项目发版，一定压缩

ii. yuicompressor：压缩工具基于JAVA，安装 JDK

iii. 使用：命令行，1.js->1.min.js

将工具配置为 filewatcher

iv. 压缩中：删除空格、注释、精简变量

v. 保证$scope等注入对象:将变量作为形参，对象名称作为实际参数

controller("C1",['$s','$c','$t',function($s,$c,$t){}])

-----常用于复杂项目，js文件、CSS文件多

 

九：模块化设计

1、ng的常用模块

i. ng

ii. ngAnimate

iii. ngTouch

iv. ngRoute

v. ngCookie

2、模块中包含

i. 指令

ii. 过滤器

iii. 方法

iv. 服务：$interval、$timeout、$http

3、$http服务

i. 回顾：原生 ajax 调用： json文件、XML文件、

JSP/php/ASP服务器端页面返回数据

ii. 方式一：json文件

iii. 方式二：php文件

iv. 使用方式

$http.get("url").success(

function(data){}

).error(

function(data,status){}

)

总结：客户端和服务器端进行数据交互

1、简单数据：string 串

2、一个对象：数组

3、一堆对象：数组----json格式

4、XML 格式：一个或者多个--标准的XML

<root>

<user name="mary">

<age>20</age>

</user>

<user name="mary">

<age>20</age>

</user>

</root>

js 中解析 xml 数据：类似于解析 DOM 数据

 

十、单页应用

a) 单页应用与多页应用

i. 多页应用：复杂应用

ii. 单页应用：适用于不太复杂的项目，移植PC和APP

b) NG中如何实现单页应用

i. 创建一个完整的页面（网站中一个）

ii. 在完整的页面上，定义出来可替换的区域：ng-view

iii. 定义其他的片段文件（只保留一部分即可）

1. 页面引入 angular-route.js

2. angular.module("M1",['ng','ngRoute']).config(

function($routeProvider){

$routeProvider.when()

.otherwise()

}

)

c) 实现跳转

i. 超级链接：  <a href="#/f1">cccc</a>

ii. 按钮：<button ng-click="fun()">

fun = function(){

$location.path('/f2');

}

d) 数据的共享和传递

i. 共享：$rootScope、自定义一个父作用域

ii. 传递：某个页面需要传递过来数据

a) 传出

b) 接收