导图社区 AngularJs开发知识点培训方案
AngularJs开发知识点培训方案,导图内容简洁、逻辑清晰、重点突出,希望能帮到大家。
编辑于2022-11-09 09:30:36 广东AngularJs开发知识点培训方案
1
设计原则与模式
设计原则
拙劣的设计
7大设计原则
YAGNI--不写不需要的代码
KISS--代码越简单越好,比如语义化的标记、减少HTML中<div>的嵌套
Keep It Simple And Stupid
保持简单和一目了然(傻瓜式),代码要简单,把复杂的逻辑用简单的代码展示出来,
一目了然,加上必要的注释,对函数、变量合理命名,并将代码合理组织。
DRY--不要Ctrl+C/V,使用封装和重用
Don’t Repeat Yourself
不要重复自己,换言之,就是不写重复的代码,如果你的代码中出现大量的重复代码,那么就是时候来将重复的代码进行封装从而实现代码的复用
High Cohesion,Low Coupling---高内聚,低耦合
内聚:一个组件内的不同部分间的关系;耦合:两个组件间的关系
SRP--单一责任原则
OCP--对扩展开放,对于修改关闭
LCP迪米特法则/最少知识法则--封装的功能单位要小,只与自己相关
设计模式
工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式
适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式
策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。
angualrJS
诞生于09年,后被Google收购,是一个JS框架,适用于以数据操作为主的 SPA(single page application)应用,实现数据的增删改查等操作
四大特性:
使用MVC模式(不再使用原生dom操作、jquery操作)
双向数据绑定
依赖注入
模块化设计
表达式和指令
表达式
语法:{{表达式}} 作用:在当前位置“输出”表达式的值
指令
是由AngularJS提供的,可以用在HTML中的一些扩展属性、扩展标签
ngApp指令
使用这个指令自动载入启动一个AngularJS应用。 ngApp指令设计为应用的根元素,一般把它放在页面的根元素附近, 例如<body>或<html>标签。
ngInit指令
ng-init指令允许声明变量,需要注意:为双向绑定。 用法:<ANYng-init=”变量名=值;变量名=值;…”></ANY> 提示:ng-init声明变量时,无需写var关键字,多个变量赋值表达式用分号分开。
ngBind指令
ngBind指令将制定的表达式的值输出为当前元素的innerHTML 用法:<ANY ng-bind=”表达式”></ANY>
ngRepeat指令
ngRepeat指令为HTML添加循环功能 语法:<ANY ng-repeat=”临时变量名 in 对象或者数组”></ANY>
ngIf指令
ngIf指令为HTML添加选择功能 语法:<ANY ng-if=”表达式”></ANY> 用途:当表达式为true时,当前元素会挂到DOM树上,否则会删除
其他指令
ngShow/ngHide/ngSrc...
ng的MVC使用
MVC
Model
为了呈现数据,必须先声明model。 创建model时,可以使用ngInit指令, 但是,这种情况下,数据和显示混在在一起,因此,建议使用controller来声明模型数据。
View
View 就是使用各种表达式和指令来显示内容。
Controller
将各种控制器按照类别和功能进行分类,即按照模块进行划分,即模块化设计
使用步骤
声明自定义的模块:angular.module(‘模块名’,[依赖列表])
注册模块:将自定义的模块注册给当前应用,如:<html ng-app=”模块名”>
声明控制器:在模块中声明控制器函数,如: module.controller('控制器名’,function(){…})
调用控制器:调用控制器的函数,创建控制器对象,如:<ANY ng-controller=”控制器名称” />
操作:在控制器中增删改查Model数据:$scope.变量名 = 值;
显示:在View中呈现model数据 :{{变量名}}
2
双向数据绑定
方向1:Model数据绑定到View
指令用于将模型数据绑定到view,进行显示。 一旦绑定后,模型数据的修改,将自动更新到view并显示。 实现方法:{{Model变量名}}//(把Model变量绑定到View中)+常用指令
//在HTML中加入下边2行代码 <button ng-click="countNum()">统计点击次数</button> <p>{{totalNum}}</p> //在控制器中加入以下代码 $scope.totalNum = 0; $scope.countNum = function () { $scope.totalNum++;}
方向2:View数据绑定到Model
把View(表单控件)中修改绑定到Model上 此后不论任何时候,只要View中的数据一修改,Model中的数据会自动随之修改。 实现方法:只有ngModel指令。
双向数据绑定原理剖析
当写下表达式如{{aModel}}时,ng会在幕后为你在scope模型上设置一个watcher (用来在模型数据发生变化时,通过view去更新) 这和watcher和在ng中设置的watcher是一样的 $scope.$watch('aModel',function(newValue,oldValue){}) 那么问题来了,aModel数据发生变化时,是什么时候调用的回调函数呢?? 其实,ng会周期性的运行一个函数来检查scope中模型数据是否发生了变化,我们称之为$digest, 在$digest循环中,watcher会被触发,当一个watcher被触发时,ng会监测scope模型, 如果发生变化则调用回调函数。那么问题又来了,什么时候会调用$digest呢?? 在调用了$scope.$digest之后,$digest循环就开始了,几乎所有的ng内置指令执行之后,都会调用$digest循环, 这里有一个小问题,其实ng很少直接调用$digest,而是调用$scope.$apply(会自动调用$rootScope.$apply), 因此,一轮digest循环在$rootScope开始,随后会访问所有的childScope的watchers 如果ng会自动的调用$apply来开始循环,那么什么时候需要我们手工调用$apply方法呢? ng对此有着非常明确的要求,就是它只负责对ng上下文环境的变更会自动的效应, 比如一些内置的ng指令,任何model的变更都会通知view来更新;但是如果在ng的上下文之外修改了model,就需要手工调用$apply来通知ng了。
过滤器和函数
过滤器
过滤器可以用于表达式中,实现对表达式结果的筛选、过滤或者格式化,达到更好的表现效果
{{expression|filter|filter:parameter1:parameter2}} “|”表示传递数据的管道,可以把数据逐一传递,实现多种过滤
demo
函数
服务
在angular中服务时一种单例对象 服务的主要功能是为实现应用的功能提供数据和对象, 按照功能的不同,它又分为内置和自定义的服务。
内置服务
ng提供了许多内置的服务,例如常用的$scope\$http\$window\$location等。可以在控制器中直接调用服务
$http服务
demo
控制器和作用范围
$scope 每个控制器的实例都对应一个作用范围对象,即$scope,在控制器中声明的Model数据,必须保存在一个作用范围内。 一个HTML中可以声明多个控制器实例,每个控制器都有自己的作用范围,这些范围内的数据彼此隔离不会互相影响
$rootScope ,ID值为1的是全局的 scope 对象。 若某个控制器想创建一个Model数据,让其它所有的控制器都可以共享, 只需要保存在$id=1的那个根作用域中即可——$rootScope。 整个AngularApp中有且只有一个$rootScope对象,且此对象是所有的$scope的父作用域对象
虽然内置的服务功能强大,使用非常方便,但毕竟都是一些通用的功能,当开发一个ng应用时,大部分的逻辑和功能都需要自定义。
demo
3
依赖注入
文件压缩
压缩后的文件,会删除所有的注释,并删除没有语义的空白字符, 且尽可能的简化变量名、函数名、形参名——称为混淆。 但是,所有的数据值(如数字、字符串等)、关键字不会做任何改变。
依赖注入的三种方式
推断式
标记式
如果一个函数需要进行标记式的注入声明,可以直接调用$injector属性来完成, 该属性是一个字符型的数组,其中的各个元素值就是需要注入的各项服务名称,正是由于它是一个数组,导致这种注入方式的顺序非常重要。
行内式
所谓的行内式注入 指的是在构建一个Angular对象时,允许开发人员将一个字符型数组作为对象的参数,而不仅仅是一个函数, 在这个数组中,除最后一个必须是函数体外,其余都代表注入对象的服务名,而他们的名称和顺序与最后一个函数的参数是一一对应的
模块化设计
面试题:一个AngularJS的模块中可以包含哪些组件?
(1)controller组件:用于维护模型数据 (2)directive组件:用于在View中输出/绑定Model数据 (3)service组件:用于在不同的控制器中提供某种函数服务 (4)function组件:比如foreach
自定义指令
指令是一种执行的信号,一旦发布了指令,就要执行某项动作。 如在HTML中,书写一个<a>标记,实质也是一个指令,告知浏览器的编译系统,要创建一个超链接; ng中指令要复杂点,不仅要创建元素,还给元素附件一些特定的行为,因此ng的指令,是在一个特定的DOM元素上执行的函数
var app = angular.module('myApp',[]); app.directive(name,fn)
新指令的命名必须使用驼峰式命名, 名称一般由两部分构成(tsHello), 前部分是前缀,像ng,这是内置的指令,为了避免冲突,可以使用项目名、公司名的缩写字母, 后部分是指令的作用,用于说明指令当前的功能。
demo
自定义服务
使用factory方法自定义服务
app.factory(name,fn)
demo
使用service方法自定义服务
app.service(name,fn)
demo
路由模块
SPA应用
Subtopic
单页应用原理
1.页面URL形如:http://127.0.0.1/index.html#/路由地址 2.浏览器首先请求基础页面(index.html),再解析URL中的路由地址 3.查找路由字典,形如: #/start =》tpl/start.html, #/main =》 tpl/main.html .... 4.获取当前URL中路由地址所对应的真实模板页面的地址 5.客户端发起异步AJAX请求,获取目标模板页面,将服务器返回的HTML片段(只含有几个div),插入到当前的DOM树上,实现局部刷新。
使用ngRoute来实现SPA
1.创建唯一完整的页面:index.html,引入angular.js和angular-route.js 2.创建自定义模块,声明依赖于ng和ngRoute两个模块 3.在index.html的body中使用ngView指令声明一个容器元素,用于盛放模板页面 4.创建模板页面 5.在当前模块中使用ngRoute提供的对象配置路由字典 6.再创建几个模板页面,只需要有div元素即可 7.测试路由字典的配置是否正确 http://127.0.0.1/index.html#/路由地址
配置路由词典
$routeProvider.when('路由地址', { templateUrl: '模板页面地址', controller: '控制器名' //该控制器对象的$scope限于整个模板页面 })
页面间跳转的3种方式
1、直接修改地址栏中的路由地址: ...index.html#/路由地址 2、使用超链接:<a href="#/路由地址"></a> 3、使用JS脚本: $location.path('/路由地址');
页面间传参
demo