AngularJs_V2.0
2017-02-22 18:00:23 0 举报AI智能生成
AngularJS V2.0 是一个用于构建动态 Web 应用的强大前端框架。它由 Google 开发并维护，基于 TypeScript 和 JavaScript。AngularJS V2.0 提供了一种声明式的方式来构建用户界面，使得开发者能够更专注于业务逻辑而不是繁琐的 DOM 操作。此外，AngularJS V2.0 还支持依赖注入、模块化、双向数据绑定等特性，使得代码更加易于维护和扩展。总之，AngularJS V2.0 是一个强大且灵活的前端框架，能够帮助开发者快速构建出高性能、可维护的 Web 应用。
作者其他创作
大纲/内容
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
分支主题
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数据 ：{{变量名}}
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 条评论
下一页
