AngularJs_V2.0
2017-02-08 20:31:58 0 举报
AI智能生成
AngularJS V2.0 是一个由Google开发和维护的开源JavaScript框架,用于构建动态Web应用程序。它提供了数据绑定、依赖注入、模块化、指令等特性,使得开发者能够更轻松地创建复杂的单页应用。AngularJS V2.0 支持双向数据绑定,这意味着模型和视图之间的数据会自动同步,减少了手动操作DOM的复杂性。此外,AngularJS V2.0 还提供了丰富的指令集,用于处理常见的用户界面交互,如输入验证、表单提交等。总之,AngularJS V2.0 是一个功能强大且易于使用的JavaScript框架,适用于构建各种规模的Web应用程序。
作者其他创作
大纲/内容
day1
设计原则与模式
设计原则
拙劣的设计
分支主题
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/ngClick/ngChecked/ngDisabled...
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数据 :{{变量名}}
day2
自定义指令
指令是一种执行的信号,一旦发布了指令,就要执行某项动作。
如在HTML中,书写一个<a>标记,实质也是一个指令,告知浏览器的编译系统,要创建一个超链接;
ng中指令要复杂点,不仅要创建元素,还给元素附件一些特定的行为,因此ng的指令,是在一个特定的DOM元素上执行的函数
var app = angular.module('myApp',[]);
app.directive(name,fn)
新指令的命名必须使用驼峰式命名,
名称一般由两部分构成(tsHello),
前部分是前缀,像ng,这是内置的指令,为了避免冲突,可以使用项目名、公司名的缩写字母,
后部分是指令的作用,用于说明指令当前的功能。
demo
分支主题
双向数据绑定
方向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指令。
分支主题
过滤器和函数
过滤器
过滤器可以用于表达式中,实现对表达式结果的筛选、过滤或者格式化,达到更好的表现效果
{{expression|filter|filter:parameter1:parameter2}}
“|”表示传递数据的管道,可以把数据逐一传递,实现多种过滤
demo
分支主题
分支主题
分支主题
函数
分支主题
服务
在angular中服务时一种单例对象
服务的主要功能是为实现应用的功能提供数据和对象,
按照功能的不同,它又分为内置和自定义的服务。
内置服务
ng提供了许多内置的服务,例如常用的$scope\$http\$window\$location等。可以在控制器中直接调用服务
控制器和作用范围
$scope
每个控制器的实例都对应一个作用范围对象,即$scope,在控制器中声明的Model数据,必须保存在一个作用范围内。
一个HTML中可以声明多个控制器实例,每个控制器都有自己的作用范围,这些范围内的数据彼此隔离不会互相影响
$rootScope
,ID值为1的是全局的 scope 对象。
若某个控制器想创建一个Model数据,让其它所有的控制器都可以共享,
只需要保存在$id=1的那个根作用域中即可——$rootScope。
整个AngularApp中有且只有一个$rootScope对象,且此对象是所有的$scope的父作用域对象
分支主题
不同控制器之间通信
1、$rootScope
2、控制器之间的嵌套
3、通过事件进行数据传递
$scope.$broadcast
$scope.$emit
$scope.$on
day3
服务
内置服务
ng提供了许多内置的服务,例如常用的$scope\$http\$window\$location等。可以在控制器中直接调用服务
$location
分支主题
定时器
demo
分支主题
双向数据绑定的工作原理
分支主题
练习
分支主题
$http服务
get请求
分支主题
post请求
步骤1-设置请求头
分支主题
步骤2-对要发送的数据进行序列化(需要用到jQuery),
并发起post请求
分支主题
自定义服务
使用factory方法自定义服务
app.factory(name,fn)
demo
分支主题
分支主题
使用service方法自定义服务
app.service(name,fn)
demo
分支主题
使用constant、value自定义服务
demo
demo
factory和service的区别就是:factory是普通function,而service是一个构造器(constructor),
这样Angular在调用service时会用new关键字,而调用factory时只是调用普通的function,
所以factory可以返回任何东西,而service可以不返回(可查阅new关键字的作用)
依赖注入
文件压缩
压缩后的文件,会删除所有的注释,并删除没有语义的空白字符,
且尽可能的简化变量名、函数名、形参名——称为混淆。
但是,所有的数据值(如数字、字符串等)、关键字不会做任何改变。
依赖注入的三种方式
推断式
分支主题
标记式
如果一个函数需要进行标记式的注入声明,可以直接调用$injector属性来完成,
该属性是一个字符型的数组,其中的各个元素值就是需要注入的各项服务名称,正是由于它是一个数组,导致这种注入方式的顺序非常重要。
分支主题
行内式
所谓的行内式注入 指的是在构建一个Angular对象时,允许开发人员将一个字符型数组作为对象的参数,而不仅仅是一个函数,
在这个数组中,除最后一个必须是函数体外,其余都代表注入对象的服务名,而他们的名称和顺序与最后一个函数的参数是一一对应的
案例
分支主题
注入器
作用:快速的定位到要用的各种服务,定位和创建(实例化)
常用API:
①has方法
$injector.has(name);
根据传入的服务的name,判断是否在注册列表中,能找到返回true,否则返回false
②get方法
$injector.get(name); 返回指定名称的服务实例
demo
分支主题
day4
模块化设计
模块化好处
高内聚低耦合、提高开发速度、提高代码的复用率,降低测试难度
面试题:一个AngularJS的模块中可以包含哪些组件?
(1)controller组件:用于维护模型数据
(2)directive组件:用于在View中输出/绑定Model数据
(3)service组件:用于在不同的控制器中提供某种函数服务
(4)function组件:比如foreach
多模块间引用
模块化开发,ng是支持自定义多个模块,myApp01,myApp02,
如果myApp02模块需要用到myApp01模块中的服务或者其他:
在声明模块 angular.module('myApp02',['ng','myApp01'])
路由模块
SPA应用
分支主题
单页应用原理
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('/路由地址');
页面间传参
步骤
①明确发送方和接收方
start-》main
发送:start =>$location.path('/main/123') <a href='#/main/333'>
接收:main
②针对接收方做设置:路由
$routeProvider.when('/main/:id',{
templateUrl:'tpl/main.html'
})
③设置接收参数
$routeParams.id
demo
分支主题
demo
分支主题
其他模块
ngAnimate
1、引入Angualr-animate.js
2、声明模块,指定依赖于ngAnimate
3、css文件中设置ngEnter、ngEnterActive、ngLeave、ngLeaveActive
ngTouch
。。。。
表单
在angularJS中,专门针对表单和表单中的控件提供了下列属性,用于验证控件交互值的状态:
$pristine 表示表单或者控件内容 是否未输入过
$dirty 是否已输入过
$valid 是否验证通过
$invalid 是否未验证通过
$error 验证时的错误提示信息(requried/email/url/max...)
demo
分支主题
自由主题
自由主题
0 条评论
下一页