angular
数据双向绑定的框架
供应数据绑定，DOM指令。angular，定义了一套划定规矩，开辟中就必需遵守划定规矩，这套划定规矩为项目供应了一套解决方案。
模块，组件，模板，元数据，数据绑定, 指令，效劳,依托注入,掌握器，过滤器,路由
基本观点
启动/指导
启动/指导 (Bootstrap)
作用：启动递次进口(bootstrap要领来指导Anuglar援用递次)
辨认运用递次中的根作用域$rootScope
经由历程依托注入体系注册效劳的供应商
属性型指令
属性型指令 (Attribute Directive)
是指令分类的一种。
作用：监听或修正别的HTML元素，属性，组件的行动。平常作为HTML属性。
比方： ng-controller 当前地点的元素增加掌握器。
组件
组件(Component)
作用：把数据展现到视图(view)，并处置惩罚一切的视图显现和交互逻辑的Angular类。
在类中定义组件的运用逻辑 ( 它被用来为视图供应支撑 ) , 组件经由历程一些由属性和要领构成的 API 与视图交互。
组件是Angular体系中最主要的基本组织中心之一。
数据绑定
数据绑定(Data Binding)
作用：将数据展现给用户，用户操纵做出应对。
将这些数据显现到HTML中，增加事宜监听器，猎取数据变化，更新数据。
在双向数据绑定中，数据的属性值会从具有属性绑定的组件传到输入框。经由历程事宜绑定，用户的修正数据传回到组件，把属性值设置为最新的值。
Anuglar 在每一个JS事宜周期中一次性处置惩罚一切的数据绑定，它会从组件树的根部最先，用深度优先的体式格局! (数据绑定在模板与对应组件的交互中起到了主要作用)
组件从手艺角度上看就是一个指令。组件位置很奇特，并在Angular中位于中心职位。
插值表达式
属性绑定
事宜绑定
attribute绑定
css类绑定
款式绑定
基于ngModel的双向数据绑定
单向绑定 (ng-bind) 和双向绑定(ng-model)
ng-bind 单项数据绑定 ($scope -> view) 用于数据显现，简写情势 {{}}
区分：页面没有加载终了{{val}} 会直接显现到页面，晓得Angular衬着该绑定数据.
ng-bind则是在Angular衬着终了后将数据显现.
ng-model 双向数据绑定 ($scope -> view and view -> $scope) ，用户绑定值会变化的表单元素等.
每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 行列里插进去一条 $watch，用来检测它看管的 model 里是不是有变化的东西。
当浏览器吸收到可以被 angular context 处置惩罚的事宜时，$digest 轮回就会触发。$digest 会遍历一切的 $watch 。
一次更新数据操纵，最少会触发两次$digest() 轮回,$gigest轮回的次数到达了10次(凌驾10次后抛出一个非常，为了防备无穷轮回)
依托注入
依托注入(Dependency Injection)
须要依托的缘由：没法掌握这实例背地隐蔽的依托。 当不能掌握依托时，类就会变得难以测试。
按需注入，须要才注入。
经由历程给函数增加形参，使得caller传入的参数的callee吸收的参数逻辑星散，使得函数经由历程依托治理体系仅仅须要声明需呀的合作对象，而不须要晓得从哪里来，怎样建立等题目。
依托注入等于设想形式，同时又是一种机制：当运用递次的一些组件须要别的一些组件的时刻，运用依托注入机制来建立被要求的部件并将其注入到发出要求的组件中。
供应类的新势力的一种体式格局，担任处置惩罚好累所需的悉数依托。大多数依托都是效劳。Angualr运用依托注入供应所需的组件以及组件所需的效劳。
angular构建运用递次时：定义许多精简的小部件，每一个小部件只做一件事，而且做好它，然后在运转期把这写精简小部件装配在一同构成运用递次。
依托注入的中心是：注入器(Injector),这个注入器依据须要返回被依托的部件。injector.get(token) 要领返回与token(令牌)参数相干的依托部件。
令牌是一个Angular中范例.绝大多数类要领都接收类名或字符串。Angular会把这些类称号和字符串转换成令牌。当挪用injector.get(Foo)时，注入器返回用Foo类天生的令牌所对应的依托值，该依托值一般是Foo 类的实例。
注入器(Injector)保护一个令牌与响应依托值的对照表(map)。假如注入器不能找到一个令牌对应的依托值，它就会运用供应商(Provider) 来建立一个依托值.
供应商是建立依托实例的“菜谱”之一，这个实例会与一个特定的令牌关联起来。
只有当注入器内部的供应商注册表中存在于令牌对应的供应商时，注入器才能为这个令牌建立一个依托值。
angular会为每一个注入器注册许多angular内建供应商。
一般注册供应商的最好时候是在运用递次指导(Bootstrap)的时刻。
依托注入渗入在全部框架中，而且被随处运用。
注入器担任保护一个 容器 ，用于寄存它建立过的效劳实例。
注入器能运用 供应商 建立一个新的效劳实例。
供应商 是一个用于建立效劳的“配方”。
把 供应商 注册到注入器。
指令
指令(Directive)
指令是一个Angular类
作用：建立和重塑浏览器DOM中的HTML元素，担任与HTML元素的应对体系
指令包括的种别：
组件(Component): 用来把递次逻辑和HTML模板组合起来，衬着出运用递次的视图。组件平常示意成HTML元素的情势，
属性型指令：可以监控和修正别的HTML元素，HTML属性，DOM属性，组件等行动。
构造性指令：担任塑造HTML规划。平常是经由历程增加，删除或操纵HTML元素及其子元夙来完成的。
注入器
注入器(Injector)
Anuglar依托注入体系中的一个对象。
作用：从缓存中找到一个”有名字的依托”或许运用一个已注册的供应商来建立依托。
注入器是一个保护效劳实例的容器，寄存着之前建立的实例。
假如容器中还没有所要求的效劳实例，注入器就会建立一个效劳实例，而且增加到容器中，然后把这个效劳返回给Angular。
当摆布效劳都被剖析并返回时，Angular会以效劳为参数去挪用组件的组织函数。
插值表达式
插值表达式(Interolation)
属性数据绑定的情势：位于双大括号中的模板表达式会被衬着成文本。
模块
模块(Module)
运用递次一般由许多个模块组装而成。
模块导出东西–类，函数，值，供别的模块引入。
把运用写成一组模块，每一个模块只导出一样东西。
模块：具有单一用处的内聚代码块
一个模块加载器来按需加载模块并剖析模块的依托关联。
模块库
有些模块是别的模块的库
Anuglar 本身就是经由历程npm包宣布的一组模块库， 以@angular为前缀。
每一个库包括一个 封装桶 。是公然的表面层(facade) 包括一些逻辑相干的私有模块。
管道
管道（Pipe）
管道是一个函数
作用：把输入值换成输出值供视图显现。
供应商
供应商(Provider)
作用：依托注入体系依托供应商来建立依托实例。
它把一个供查阅用的令牌和代码关联到一同，以便建立依托值。
效劳
效劳是一个类，详细完成一件事变，具有专注，优越定义的用处。
险些任何东西都可以是一个效劳。
构造型指令
增加，删除或操纵元素和其各级子元夙来塑造或重塑HTML规划的指令。
比方：ngIf
模板
模板(Template)
模板是大块HTML。
作用：衬着视图
Angular会在指令和组件的支撑和延续指导下，衬着视图。
装潢器
装潢器 (Decorator | Decoration)
装潢器是一个 函数，这个函数将元数据增加到类，类成员(属性，要领)和函数上。
angular 运用本身一套装潢器来完成运用递次各个部份之间的互相操纵。
基本指令
ng-app
运用递次的指令，一个递次中必须要有该指令
<body ng-app></body>
ng-model
数据绑定的指令，将数据绑定到运用递次中
<input type="text" ng-model="msg" />
ng-bind
绑定数据，它的简写体式格局直接在元素中{{key}}
<div>{{ msg }}</div>
当页面加载终了，angularjs启动起来，起首归去页面中寻觅ng-app指令，找到后初始化运用递次。
ng-app示知angular这个运用是绑定谁人DOM元素，也就是递次初始化的元素时body，所以今后绑定的指令可以生肖的只能在ng-app地点的元素中
angularjs找到ng-model指令，它将该指令对应数据绑定在该递次的作用域中。
angularjs找到ng-bind或许{{key}} 指令，它将数据衬着到该元素内。
angularjs遍历别的指令，终了后，就可以运用运用递次。
ng-init
示意初始化运用递次中的变量，多个变量用; 注重定义多个变量不能用逗号，只能用分号;
<div ng-init="msg='hello wrold'; info='您输入的信息为：'" ng-controller="msg">
<input type="text" name="" id="" value="" ng-model="msg" />
<span ng-bind="msg"></span>
<span>{{ info }}</span>
<span>{{ msg }}</span>
</div>
module
经由历程angular.module要领
该要领有两个参数
参数1，示意递次的称号。
参数2，示意依托效劳(依托鸠合)
依托就是到达某个目标的必要前提(不可或缺)。
var app = angular.module('app', []);
controller掌握器
定义掌握器
App的controller要领：
两个参数
第一个参数示意掌握器的称号
第二参数示意掌握器的组织函数
参数是你须要的数据，须要什么可以通报什么，如许在组织函数中就可以运用它，假如没有通报就没法运用
ng-controller 掌握运用递次的，后期对某一视图动态转变的作用
定义掌握器
app.controller();
参数1：掌握器称号
参数2：掌握器的回调函数(组织函数)
回调函数的参数是所须要的数据，须要什么可以通报什么，如许在回调函数中就可以运用它，假如没有通报就没法运用
angular参数注入：想用什么东西就在参数中注入。
不要再掌握器中操纵 DOM。 经由历程指令完成。
经由历程掌握器完成的功用定名掌握器,并以字符串Ctrl末端，比方：(HomePageCtrl)
掌握器不应当全局中定义
尽量精简掌握器，将通用函数抽线为自力的效劳
经由历程要领援用举行跨掌握器通信(一般是子掌握器与父掌握器通信) 或许 $emit,$broaadcast 以及 $on 要领。发送或播送的音讯应当限定在最小的作用域。
置顶一个经由历程 $emit，$boradcast 发送的音讯列表而且梗塞的治理以防备定名争执
在须要花样化数据时，将花样化逻辑封装成 过滤器
<div ng-controller="msg"></div>
// 掌握器
app.controller('msg', function ( $scope ) {
console.log( this );
console.log( arguments );
});
掌握器$scope
$scope: 用来完成数据与视图的衔接，在$scope上定义的数据，可以用视图在上，那末视图上绑定的数据可以在$scope上也能猎取到
$scope 是经由历程原型式继续完成， 子作用域会继续父作用域中的变量，然则可认为子作用域增加变量还重写符作用域中的变量。
scope特性
$scope 是一个 POJO 简朴的Java对象
$scope 供应了一些东西要领$watch()/$apply();
$scope 表达式实行环境，或许说作用域
$scope 是一个树型构造，与DOM标签平行
每一个angularjs运用都有一个跟作用域$rootScope,位于ng-app上
$scope 可以流传事宜，相似DOM事宜，可以向高低可以向下
$scope 不仅是MVC 的基本，也是后买呢完成双向绑定的基本，运用最先先找rootScope，然后把下级scope附加到rootScope上从而构成树型构造.
scope生命周期
建立（creationd）
在建立掌握器或指令时，angularjs会用$onjector建立一个新的作用域，并在这个新建的掌握器或指令时把作用域传进去
链接
scope对象会附加或链接到视图。这些作用域将会注册到 angular高低文中发作变化时须要运转的函数
$watch -> 注册监控(Watcher registration) 变化时实行 回调函数
更新
事宜轮回实行时，顶级的$rootScoep和每一个子作用域都实行本身的脏值搜检。某个监控函数监控变化，检测到变化后，$scope会触发指定的回调函数。
烧毁
当scope在视图中不再须要时，会清楚和烧毁本身。
$scope.$destory();
events
ng-eventsName
比方：ng-click
假如想在回调函数中通报参数，在圆括号内里直接增加
实行的作用域是$scope,当前的作用域
参数经由历程元素挪用时通报的参数一致，末了一个参数为事宜对象
<button ng-click="clickBtn('info',$event)" ng-bind="red"></button>
// 事宜
$scope.clickBtn = function ( msg, ev ) {
}
显隐
ng-show 示意显现元素指令
ng-show 显现元素：true显现，false隐蔽
ng-hide 隐蔽元素：true隐蔽，false显现
<span ng-show="isShow">1</span>
<span ng-hide="isShow">2</span>
表达式
插值和数据的历程当中可以运用表达式
的绑定历程我们可以运用表达式
在表达式中不单单议可以用运算符，还可以运用js供应的要领
<div>{{'面积是：' + width * height}}</div>
<div>{{ msg.toUpperCase() }}</div>
过滤器
用来对绑定数据显现时刻处置惩罚
{{key | filter}}
内置过滤器
currency
花样化数字为钱银花样
<div>{{msg | json}}</div>
<div>{{ msg | currency }}</div>
filter
过滤数组项
<div ng-controller="filters">
<div>{{ color | filter : 'n' }}</div>
<div>{{ color | filter : filterChar }}</div>
<div>{{ color | filter : filterFirstStr }}</div>
</div>
<script type="text/javascript">
// app
var app = angular.module('appBody', []);
// controller
app.controller('filters', function ( $scope ) {
$scope.color = ['tan', 'khaki', 'Pink', 'cyan'];
// a 过滤出来
$scope.filterChar = 'a';
$scope.filterFirstStr = function ( val ) {
// 婚配首字母大写
return val[0] === val[0].toUpperCase();
}
});
</script>
date
日期过滤器,花样化日期
<div ng-controller="dates">
<span>{{ iDate | date : 'yyyy' + '年'}}</span>
<span>{{ iDate | date : 'MM' + '月' }}</span>
<span>{{ iDate | date : 'dd' + '日' }}</span>
<span>{{ iDate | date : 'HH' + ':' + 'mm' }}</span>
<p>{{ iDate | date : 'yyyy年 MM月dd日 HH:mm' }}</p>
</div>
// app
var app = angular.module('appBody', []);
// controller
app.controller('filters', function ( $scope ) {
$scope.color = ['tan', 'khaki', 'Pink', 'cyan'];
// a 过滤出来
$scope.filterChar = 'a';
$scope.filterFirstStr = function ( val ) {
// 婚配首字母大写
return val[0] === val[0].toUpperCase();
}
});
limitTo
截取过滤器
参数示意截取的长度
这个过滤器不单单议可以截取字符串，还可以截取数组
<div>{{ color | limitTo : 2 }}</div>
<div>{{ msg | limitTo : 3 }}</div>
字符串大小写
uppercase 将字符串转化成大写
lowercase 将字符串转化成小写
这个过滤器痛对数据直接挪用字符串要领toUpperCase和toLowerCase效果是一样的
然则angular发起运用过滤器
过滤器可以被复用
不发起在表达式中运用要领(除特殊情况)
<div>{{ msg | uppercase }}</div>
<div>{{ msg | lowercase }}</div>
<div>{{ msg.toLowerCase() }}</div>
number过滤器
是一种数字范例数据过滤器
参数示意截取小数位置
该过滤器是将数字以每三为支解衬着的
不通报参数默许保存三维，末了一名四舍五入
<div>{{ num | number }}</div>
<div>{{ num | number : 4 }}</div>
orderBy
对数组举行排序的过滤器
参数1，数组中每一个成员排序的索引属性称号
参数2，正序照样倒序 (true反序)
<div>{{ color | orderBy : '' : true }}</div>
<div>{{ color | orderBy }}</div>
自定义过滤器
定义
经由历程app供应的filter要领来定义过滤器 app.filter();接收两个参数
参数1，过滤器的称号
参数2，过滤器的回调函数(组织函数)
回调函数必需返回一个函数，这个函数在每次数据更新时刻实行。
回调函数只实行一次
返回的函数，可以接收过滤器运用时通报的参数，然则第一个参数永远是绑定的数据，后的参数才是通报的参数，参数的递次痛运用时通报参数的递次一致。
挪用
运用体式格局同内置过滤器一样，在管道标记背面增加过滤器的称号，经由历程：增加参数
运用小驼峰定名
尽量使过滤器精简。 过滤器在 $digest loop 中频仍被挪用，过于庞杂的运算使得全部运用实行迟缓。
在过滤器中只做一件事. 越发庞杂的操纵可以用pipe来完成.
<!--自定义过滤器--> <input type="text" ng-model="msg" /> <div>{{ msg | CaseChar }}</div> <div>{{ msg | CaseChar : true }}</div>
app.filter('CaseChar', function () {
return function ( val, FirstToUpper ) {
if ( val ) {
// FirstToUpper 参数 示意第一个字母大写
if ( FirstToUpper ) {
// 第一个字母 大写
val = val.replace(/^[a-z]/, function ( match, $1 ) {
return match.toUpperCase();
});
}
// 存在输入的val 值 转驼峰
return val.replace(/_([\w])/g, function ( match, $1 ) {
return $1.toUpperCase();
});
}
return '';
}
});
表单考证
当对表单元素form增加name属性时刻，angular会自动将该属性的值增加到作用域中，而且该属性具有表单考证的属性. 具有FormContorller对象
$dirty 表单是不是被用户输入过，输入过，值为true，没有输入过值为false
$pristine 表单是不是被用户输入过，输入过，值为false，没有输入过值为true
$valid 输入的值是不是正当，正当值为true，不正当为false
$invalid 输入的值是不是正当，正当值为false，不正当为true
$valid 属性值为true时，一切表单元素必需$valid都是true
$invalid 属性为true时，只需有一个表单元素$invalid之为true
$dirty 属性为true时，只需有一个表单元素被修正过，$dirty值为true
$pristine 属性为true时，一切的元素未被修正过，那末$pristine值为true
<form name="appForm">
<label for="">用户名：</label>
<input type="text" name="username" ng-model="uname" ng-maxlength="5" id="" value="" />
<span ng-show="appForm.username.$invalid">输入的长度大于5</span>
</form>
<form name="appForm">
<!-- 兼容 HTML5 表单元素 -->
<label for="">邮箱：</label>
<input type="email" name="emial" ng-model="emailModel" id="" value="" />
<span ng-show="appForm.emial.$invalid">输入内容必需是emial</span>
</form>
<form name="appForm">
<!--运用 ng-pattern 婚配正则-->
<input type="text" name="txt" ng-model="passModel" ng-pattern="/^\d{4,6}$/" id="" value="" />
<span ng-show="appForm.txt.$invalid">输入的内容必需是4-6位数字</span>
</form>
run-$rootScope
猎取app并实行(递次进口指令会供应一个run要领)，一般会在该要领中接见根作用域，该要领吸收一个函数作为参数，
函数中的this指向window，因而可以接见到全局作用域下的变量。
arugments默许没有值，须要什么值，须要经由历程参数注入来供函数内运用。
作用：处置惩罚的是根作用域，因而一般要将$rootScope通报进来.
app.run(function ( $rootScope ) {
});
controller与作用域
var app = angular.module('main', []);
app.controller('parentCtrl', function ( $scope ) {
$scope.clickParent = function () {
$scope.msg = 'parentScope';
}
}).controller('childCtrl', function ( $scope ) {
$scope.clickChild = function () {
$scope.msg = 'childScope';
}
});
// rootScope
app.run(function ( $rootScope ) {
$rootScope.msg = 'rootScope';
})
console.log( app );
ng指令
ng-disabled
表单是不是可以操纵
<input type="text" ng-disabled="isable" name="" />
ng-readonly
表单是不是是只读
<input type="text" ng-readonly="isable" name="" id="" value="" />
ng-checked
挑选框是不是被选中
值为true：选中
值为false：未挑选
<input type="checkbox" ng-checked="isabel" name="" id="" value="" />
ng-change
监听输入表单内容的转变，当表单内容转变的时刻就会触发.
转变的时刻，须要晓得数据是不是变动，须要加上ng-model
<input type="text" ng-model="msg" ng-change="change()" name="" />
app.controller('inp', function ( $scope ) {
$scope.change = function () {
alert($scope.msg);
}
});
ng-submit
对form表单元素绑定submit事宜，当点击表单中submit元素时刻，会触发该事宜
ng-submit须要搭配标签form运用
<form name="forms" ng-submit="submit()">
<input type="text" name="" ng-model="msg" id="" value="" />
<input type="submit" value="提交"/>
</form>
ng-src
浏览器翻开页面，浏览器不认识ng-src属性，所就不会发要求，那末当ng-src绑定的数据imgSrc有数据的时刻，angular会把这个数据赋值给src属性，让img标签发送一个要求
<img ng-src="{{imgSrc}}" />
ng-href
当浏览器翻开页面的时刻，元素不具有href属性，就不具有链接行动(为#号却可以点击)，ng-src对这一征象做了优化，当ng-href绑定的数据加载胜利后，将这一属性值，赋值给a标签的href属性，让a标签具有衔接的行动。
<a ng-href="{{Url}}">跳转</a>
ng-class
是用来动态建立类的一个指令，它的只是一个对象，对象中的舒心代表类的称号，属性值只能是一个Boolean
true，会将该类名增加到元素的class属性中。
false，会将该该类名从该元素的class属性中删除。
<div ng-class="{red: ngClassInfo>4, green: ngClassInfo <=4 }">{{ ngClassInfo }}</div>
ng-style
用来动态建立款式，它的值是一个对象，对象中的属性示意css属性，值为css属性值。
<div ng-style="{background: 'tan', width: '100px', height: '100px'}"></div>
ng-if
推断指令.
angular中没有ng-else指令，可以经由历程ng-if模仿
<div ng-if="isable">111111111111</div>
<div ng-if="!isable">222222222222</div>
ng-switch
分支推断
当元素这是了ng-switch，元素是一个ie分支推断的模板，一切分支都要包括在该元素内。
经由历程on指令来设置推断前提，ng-switach和on合营运用
ng-switch-when=”key”：示意推断某一前提，当on的绑定的数据值为该分支对应的值的时刻，实行。
<!--须要将分支推断的元素放入 ng-switch 容器中-->
<div ng-switch="" on="switchInfo">
<div ng-switch-default="">默许</div>
<div ng-switch-when="first">1111</div>
<div ng-switch-when="second">2222</div>
</div>
ng-repeat
轮回衬着模板
语法： ng-repeate=”item in list”;
内置变量$index 轮回的索引值，从0最先计数$first 第一次轮回是true，别的次轮回是false$last 末了一次轮回是true，别的此轮回是false$middel 撤除第一次和末了一次值是true $even 偶数次轮回是true，奇数次轮回是false$odd 奇数次轮回是true，偶数次轮回是false
<ul>
<li ng-repeat="item in colors" ng-class="{red: $odd}">{{ item }} --- {{'索引值:'+$index}} --- {{ $middle }}</li>
</ul>
ng-include
模板定义在零丁文件中，经由历程ng-include引入进来.
ng-include=”url” 注重url是字符串
<div ng-controller="aMsg">
<div ng-include="'a.html'"></div>
</div>
// 数据传输
var aMsgApp = app.controller('aMsg', function ( $scope ) {
$scope.msg = '载入胜利';
});
运用 ng-bind 或许 ng-cloak 而 不是运用 {{}} 插值体式格局，防备页面衬着闪灼
防止在插值中运用庞杂代码
须要动态设置
<img>的 src 时运用 ng-src 而不运用 src中嵌套 {{}}须要动态设置
<a>的 href 时运用 ng-href 而不是用 href 中嵌套 {{}}经由历程对象参数和scope变量作为值来运用 ng-style 指令， 而 不是运用 scope 变量作为字符串经由历程 {{}} 用于 style 属性。
自定义指令
directive();
参数1： 指令的称号
参数2： 组织函数，自定义指令式，只实行一次，将一些庞杂营业逻辑放在该函数中，末了改函数返回是一个对象(用来形貌指令)
划定规矩：
运用小驼峰定名。
在link function 中运用 $scope 。 在compile中， 定义参数的post/pre link functions 将在函数实行时被通报，没法经由历程依托注入转变它们。
指令增加自定义前缀防止与第三方指令争执
可复用组件建立自力作用域
运用 scope.$on(‘$destroy’, fn) 来消灭. 这点在运用第三方指令的时刻迥殊有效.
返回对象
restrict: 自定义指令的范例
E,该指令是一个自定义元素(element)
A,该指令在元素时属性上(attributes)
C,该指令在元素的类上(class)
M,解释指令(comment)
template: 通报的是模板字符串
templateUrl: 模板文件的途径
replace: false
是不是替代原有的元素，true会替代掉原有的元素，false不会替代掉元素。
当设置true时，会对controller中运用的参数$element 和 $attrs 有影响
controller
用来定义自定义指令的作用域。
this 指向的controller{}空对象
arguments默许情况下是一个空数组，须要参数注入。
$scope 该指令的作用域
$element 该指令的元素
$attrs 该指令的元素的属性
// directive() 自定义指令
app.directive('curtoms' , function () {
console.log(111);
return {
// 指令范例
restrict: 'EAC',
// 模板字符串
// template: '<h1>自定义指令</h1>',
// 模板文件猎取 url
templateUrl: 'a.html',
// replace示意是不是替代本来的元素，true是替代，false不替代
// replace: false,
replace: true,
controller: function ( $scope, $element, $attrs ) {
// this 指向 controller{} 空对象
console.log( $scope, $element, $attrs );
}
}
});
scope
断绝自定义的作用域的属性，经由历程对其社会字一个对象来断绝指令的作用域。
假如值是true或许false，指令的作用域就会疏忽本身作用域，而去寻觅父级作用域中的变量。
假如值是空对象{} ，作用域会指向该空对象
directive返回对象中的scope和controller
自定义指令中，scope属性对controller的影响：
假如scope的值是true，在controller中，定义与父作用域中雷同变量时，自定义指令中的变量不会遭到副作用于中的变量的影响。
假如scope是一个false，在controller中，定义与父作用域雷同变量时，该变量与父作用域中的变量同步(同时修正，数据双向绑定)
假如scope是一个对象，在controller中，定义与父作用域雷同的变量时，自定义指令中的变量不会收到父作用域的变量影响。
app.directive('myCutom', function () {
return {
restrict: 'E',
template: '<h1>{{ msg }} -- {{ title }}</h1>',
// scope: {},
// scope: true,
scope: false
controller: function ( $scope, $element, $attrs ) {
$scope.title = 'aaaa';
$scope.msg = 'xixixi';
}
}
});
@修饰符
可以屏障模板中变量去controller作用域中寻觅值的历程，而是让其去该自定义指令地点元素的属性中寻觅数据变量. 疏忽自定义指令的scope。
@修饰符会去自定义指令中地点元素的属性去寻觅。
属性值是插值传入，作为一般属性处置惩罚。
<my-custom my-title="{{title}}"></my-custom>
app.directive('myCutom', function () {
return {
restrict: 'E',
template: '<h1>{{ msg }} -- {{ title }}</h1>',
scope: {
// 示知 自定义指令 不须要从 本身的作用域中寻觅 变量
title: '@myTitle'
},
controller: function ( $scope, $element, $attrs ) {
$scope.title = 'aaaa';
$scope.msg = 'xixixi';
}
}
});
=修饰符
经由历程在scope属性中定义含有=修饰符的变量时，可以获得父作用域中的变量，经由历程属性映照.
作用：自定义指令作用域中变量与父作用域的双向绑定历程.
注重：自定义元素中的属性值是一个父作用域中的一个变量，在自定义指令中看成一个变量来处置惩罚。
template,中的数据和 父级的作用域$scope,数据绑定
tempalte: '<h1>{{title}}</h1>',
app.controller('main', function ( $scope ) {
$scope.title = '';
});
link
操纵自定义指令的DOM
link的函数
this指向window
arguments：
1 scope， 指令作用域
2 jqlite 猎取自定义元素
3 attrs 自定义指令元素上的属性
// 操纵自定义指令元素
// @param {Object} scope 子作用域
// @param {Object} jqlite JQ对象
// @param {Object} attrs 自定义上的属性
link: function ( scope, jqlite, attrs ) {
// this -> window
var el = jqlite.children('h1').attr('nodeValue', 1);
// 运用 data 自定义属性 ，会自动省略 data-
for ( var i=0; i<attrs.repeate; i++ ) {
jqlite.append( el.clone() );
}
}
complie
this指向的是指令形貌对象.
参数1： jqlite 猎取的自定义元素
参数2： attrs 自定义指令地点元素的属性
返回一个函数， 指向 link 函数
在返回函数中，可以操纵自定义指令地点元素.
<div ng-controller="main">
<my-directive data-color="pink">
<h1>嘻嘻哈哈</h1>
</my-directive>
</div>
<script type="text/javascript">
// 建立 app
var app = angular.module('app', []);
// 建立掌握器
app.controller('main', function ( $scope ) {});
// 自定义指令
app.directive('myDirective', function () {
return {
restrict: 'E',
// 自定义指令的编译要领
// @param {Object} jqlite 猎取自定义指令元素
// @param {Object} attrs 自定义指令地点元素上的款式
// @return {Function} cb 指代 link
compile: function ( jqlite, attrs ) {
// this -> compile 对象
return function ( scope, jqlite, attrs ) {
// this -> window
var color = attrs.color;
jqlite.css('color', color);
}
}
}
});
</script>
transclude
它通知自定义指令，要将自定义元素中未知的元素内容插进去到已知模板具有ng-transclude指令地点的元素中(增加自定义指令元素中的未知元素)
未知元素：自定义标签中的元素.
示知自定义指令，要将自定义中未知的元素内容插进去到已知模板。
前提： 模板标签上具有ng-transclude指令
须要设置 transclude: true.
征象：模板标签会包裹自定义标签内的内容.
app.directive('myDirective', function () {
return {
restrict: 'E',
template: '<div ng-transclude></div>',
transclude: true
}
});
require
自定义指令援用别的指令，作为link()要领的第四个参数.
比方，将ngModel引入到自定义指令中. 在link要领中可以接见到ngModel中的属性值
require: 'ngModel'
// 自定义指令
app.directive('myDirective', function () {
// 返回一个形貌指令对象
return {
restrict: 'A',
// 引入别的指令
require: 'ngModel',
link: function ( scope, jqlite, attrs, ngModel ) {
// $watch 检测某个值 发作转变，触发某个函数
// 当 ngModel 值发作转变， 触发函数
scope.$watch(attrs.ngModel, function () {
console.log(ngModel.$viewValue);
});
}
}
});
效劳
对一些要领的封装，复用要领更加轻便。比方：音讯体系，作为音讯效劳.
运用效劳，运用参数注入即可。
大驼峰和小驼峰都可
将营业逻辑封装成效劳
将营业逻辑封装成 service 而非 factory
运用 $cacheFactory 举行绘画级别的缓存。 运用于缓存要求或庞杂运算的效果。
内置效劳
$timeout
对setTimeout()的封装
app.controller('main', function ($scope, $timeout) {
$timeout(function () {
console.log(this);
console.log(arguments);
}, 2000);
});
$interval
对setInter();的封装
app.controller('main', function ($scope, $interval) {
// 定义一个时候
$scope.date = new Date();
$interval(function () {
// 从新定义日期
$scope.date = new Date();
}, 1000);
});
$http
异步要求
设置参数:
method： 要求体式格局 “GET”,”POSt”
url: 要求的地点
$http 要领实行完后链式挪用success(),要求胜利的回调函数
POST要求：
经由历程设置data属性增加POST要求发送数据
params属性增加要求的参数数据
// $http 效劳
$http({
method: 'GET',
url: 'data/service.json'
}).success(function ( res ) {
if ( res.errno === 0 ) {
$scope.msg = res.msg;
console.log(res);
}
});
$http({
method: 'POST',
url: 'demo.json',
// 该属性会将键值对转化成url上参数
params: {
id: 11
},
// post要求 增加要求数据
data: {
username: 'aa'
}
});
$http.get，$http.post
$http效劳中的get要乞降post要求简写体式格局
params 设置要求参数
// get 要求
$http.get('data/service.json', {
params: {
id: 1
}
})
// 要求胜利
.success(function ( res ) {
console.log( res );
});
// post 要求
// 参数1：url ，参数2：要求照顾的数据
$http.post('data/service.json', {
id: 1
})
// 要求胜利
.success(function ( res ) {
console.log(res);
});
promise对象
许诺对象，在内部是一个异步操纵，当操纵完成时，这个对象会完成它的许诺.
特性： 可以无穷增加许诺。 一定在某些操纵完成时才动身。
范例中许诺对象运用 then要领.
自定效劳
须要种种效劳以支撑种种功用，也可以手动开启或封闭某些效劳以到达响应的功用.
factory()
工场形式定义自定义效劳
参数1：效劳称号
参数2：效劳工场要领
返回值：效劳对象，这个对象供应别的掌握器运用
var app = angular.module('app', []);
// 别的掌握器运用效劳
app.controller('facotryCtrl', function ( $scope, news ) {
$scope.msg = news.data;
});
// factory 定义 效劳
app.factory('news', function () {
return {
data: '嘻嘻哈哈'
}
});
service
面向对象建立效劳
参数1：效劳称号
参数2：效劳的组织函数(组织函数中须要运用this来暴露接口)
// 运用 service 自定义效劳
app.service('data', function () {
this.title = '嘻嘻哈哈';
});
路由
运用组件合营运用：angular-route.jsangular-ui-router.js
用来寻觅页面，一般经由历程设置一些路由来映照一些页面
路由：就是URL到函数的映照。
ngRoute
须要在递次进口处引入，增加到依托鸠合中
angualr.module('app', ['ngRoute']);
ng-view
动态衬着的视图，视图怎样衬着依据路由决议
<div ng-view></div>
衬着视图须要在页面初始化之前晓得路由设置.
运用congfig();
congfig();
在运用递次实行之前实行一个设置要领，在页面还未被衬着，可以将路由逻辑放入该要领中。
回调函数：
this -> window
默许参数是空的，须要将效劳注入
// 设置
app.config(function ( $routeProvider ) {
$routeProvider.when('/', {
// 模板
// template: '<div>嘻嘻哈哈</div>',
templateUrl: 'a.html',
// 掌握器
controller: function ( $scope ) {
console.log( $scope );
$scope.style = {
color: 'deeppink'
}
}
});
$routeProvider
路由效劳：
路由供应效劳，供应一个when要领，供运用设置路由.
controller
在路由对象中，可以经由历程controller属性，为路由对象增加掌握器，建立一个作用域，让模板可以运用作用域中的变量。
template
设置模板字符串
templateUrl
设置外部模板
会发送异步要求
otherwise
重定义路由
设置两个路由以上，otherwise 才会有效果.
设置参数为 redirectTo 来重定向到差别路由，值是定义过途径.
// app
var app = angular.module('app', ['ngRoute']);
// controller
app.controller('routerCtrl', function ( $scope ) {
$scope.shop = 'shopPage1';
});
// config
app.config(function ( $routeProvider ) {
// 设置首页 路由
$routeProvider.when('/', {
template: '<h1>{{ index }}</h1>',
controller: function ( $scope ) {
$scope.index = 'indexPage';
}
})
// 设置 shop 页面 路由
.when('/shop', {
template: '<h1>{{ shop }}</h1>',
controller: function ( $scope ) {
// $scope.shop = 'shopPage';
}
})
// 别的路由 重定义 到 / 目次中
.otherwise({
redirectTo: '/'
});
});
路由参数
路由途径设置参数(参数名前须要加：冒号)
将猎取路由参数效劳注入掌握器中($routeParams注入掌握器中).
app.config(function ( $routeProvider ) {
// 设置参数
$routeProvider.when('/shop/:pageNum/:type', {
template: '<h1>{{ shop }}</h1>',
// 参数注入
controller: function ( $scope, $routeParams ) {
$scope.shop = 'shopPage';
console.log( $routeParams );
}
});
});
路由时候
路由时候一般定义须要监听该事宜的掌握器中，在全局作用域下监听，经由历程对作用域$on()要领监听路由事宜。
比方：$routeChangeSuccess
监听路由转变胜利
参数1： 示意事宜对象
参数2：示意当前路由对象
参数3：示意前一个路由(假如当前没有前一个路由对象，因而参数会是undefined)
app.run(function ( $rootScope ) {
$rootScope.$on('$routeChangeSuccess', function ( ev, routeObj, preRouteObj ) {
});
});
$location
治理地点栏状况信息，包括query，path
path(): 转变路由中的path.
读：$location.path();
设：$loction.path(arg);
app.run(function ( $rootScope, $location ) {
$rootScope.$on('$routeChangeSuccess', function ( ev, routeObj, preRouteObj ) {
// var q = $location.path(); // 读
$location.path('/xixi'); // 设置
});
});
ui-router
ngRoute: 每一个页面对应一个地点(path), 须要衬着谁人页面，就须要设置路由.
uiRouter: 引入state(状况)观点，假如哪一个页面假如显现，衬着出对应的页面，衬着以后会有一种状况，可以将该状况纪录，设置路由
ui-view
在ui-router 中运用的指令ui
<div ui-view=""></div>
$stateProvider
参数注入到config()来定义状况
app.config(function ( $stateProvider ) {});
state();
定义状况
参数1：状况称号
参数2：设置参数
url: 状况页面的地点
tempate： 状况对应页面的模板
controller 定义状况对应页面的作用域
// 参数注入 ui.router
var app = angular.module('app', ['ui.router']);
// 设置路由
app.config(function ( $stateProvider ) {
// $stateProvider 定义状况
console.log( $stateProvider );
$stateProvider.state('home', {
// 设置 #/
url: '/',
template: '<h1>{{ indexPage }}</h1>',
controller: function ( $scope ) {
$scope.indexPage = 'indexPage';
console.log( this,arguments );
}
})
.state('shop', {
url: '/shop',
template: '<h1>{{ shopPage }}</h1>',
controller: function ( $scope ) {
$scope.shopPage = 'shopPage';
console.log( this,arguments );
}
})
});
uiRouter路由参数划定规矩
路由划定规矩：
固定值：/key
可捕捉的参数： /:key
限定字段范例： /{key:type} type: int,string
捕捉query： ?queryNum&queryNum2
$stateProvider.state('shop', {
// url: '/shop/xixi/is/100?form=10&to=20'
url: '/shop/:value/is/{pageNum:int}?form&to',
template: '<h1>{{ shopPage }}</h1>',
controller: function ( $scope, $stateParams ) {
console.log( $stateParams );
$scope.shopPage = 'shopPage';
}
})
$urlRouterProvider
when(); 将参数1的路由途径重定向到参数2路由途径
otherwise(); 婚配不存在的路由，跳转到定义过的路由.
// 设置 不存在路由
$urlRouterProvider.when('', '/').otherwise('/error');
views 多视图
ui-router 可以衬着页面中的多个视图，经由历程为页面中ui-view指令增加称号，多个视图衬着须要在config() 设置。
<div>
<div class="left" ui-view="leftView"></div>
<div class="content" ui-view="contentView"></div>
<div class="right" ui-view="rightView"></div>
</div>
app.config(function ( $stateProvider, $urlRouterProvider ) {
$stateProvider.state('home', {
url: '/',
views: {
leftView: {
template: '<h1>leftView</h1>'
},
rightView: {
template: '<h1>rightView</h1>'
},
contentView: {
template: '<h1>contentView {{ msg }}</h1>',
controller: function ( $scope ) {
$scope.msg = '中心模块'
}
}
}
});
view 嵌套
在 ui-reouter 中视图是可以嵌套。
在state() 定义状况称号的时刻增加定名空间。
路由须要有递次，定义在父路由的后边。
注重：父视图须要增加动态视图ui-view
多视图不能与嵌套视图同时运用
婚配主页，定义途径不须要增加 ‘/shop’, 直接 ‘shop’;即可.
app.config(function ( $stateProvider, $urlRouterProvider ) {
$stateProvider.state('home', {
url: '/',
template: '<div>index<div ui-view></div></div>'
})
.state('home.shop', {
url: 'shop',
template: '<h1>shopPage</h1>'
});
$urlRouterProvider.when('','/');
});
路由事宜
增加在全局作用域$rootScope 下检测途径变化
事宜名以state开首
参数1： 事宜对象
参数2： 当前路由对象
参数3： 当前路由参数对象
参数4： 前一个路由对象
参数5： 前一个路由参数对象
app.run(function ( $rootScope ) {
$rootScope.$on('$stateChangeSuccess', function ( ev, routeObj, routeParamsObj, preRouteObj, preRouteParamsObj ) {
console.log( this,arguments );
})
});