Your message is required
Your message is required
...
// 1.4 +
...
ctrl.getMessages = function($index) {
return ctrl.form['field_' + $index].$error;
}
```
**1.2.2、ngOptions**
ngOptions仅仅只是内部实现变化，在使用上并没有多大差异。其中当遍历Object时，之前的版本是用的 ``for in``，导致输出的key是字符序的。新版本采用 ``Object.keys``，输出的key是定义时候的顺序。
另外当ngOptions表达式执行之后，将不会再触发ngOptions了。
**1.2.3、select**
在 **select** 元素中，这是一个非常大的变更。简单理解，如下：在1.3中，ngModel和<option>的value比较仅仅是 ``==``，所以 ``200 == '200' //true``。在1.4+中，比较方式成了 ``===``,所以 ``200 === '200' //false``。
这个时候我们可以通过如下方式处理：
```javascript
ngModelCtrl.$parsers.push(function(value) {
return parseInt(value, 10); // Convert option value to number
});
ngModelCtrl.$formatters.push(function(value) {
return value.toString(); // Convert scope value to string
});
```
实现指令如下：
```javascript
app.directive('convertNumber', function() {
return {
require: 'ngModel',
link: function(scope, el, attr, ctrl) {
ctrl.$parsers.push(function(value) {
return parseInt(value, 10);
});
ctrl.$formatters.push(function(value) {
return value.toString();
});
}
}
});
```
当然，如果我们保证ngModel的值为string类型，那就没啥问题了（在不使用ng-value的情况下）。
**1.2.4、Form**
表单的变化，主要是name属性，在 < 1.4 的版本中，我们可以设置name为 "my:form1"，在1.4+版本中，不在允许这种特殊的用法。
### 1.3、模板相关
**1.3.1、ngRepeat**
< 1.4 版本中，ng-repeat的遍历顺序是字母序。
1.4+版本中，顺序是有浏览器的 ``for in`` 来返回的。
**1.3.2、ngInclude**
```javascript
// < 1.4
$scope.findTemplate = function(templateName) {
return $sce.trustAsResourceUrl(templateName);
};
// 1.4+
var templateCache = {};
$scope.findTemplate = function(templateName) {
if (!templateCache[templateName]) {
templateCache[templateName] = $sce.trustAsResourceUrl(templateName);
}
return templateCache[templateName];
};
// Or
angular.module('myApp', []).config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['self', 'https://example.com/templates/**'])
});
```
### 1.4、Cookie
在1.4+中，cookie增加了新的API：
```javascript
get
put
getObject
putObject
getAll
remove
```
另外，``$cookieStore`` 将不推荐使用。
### 1.5、HTTP
在1.4+中，$http的 ``transformRequest`` 将不允许修改请求header。但是我们可以使用如下方式进行动态的header设置：
```javascript
$http.get(url, {
headers: {
'X-MY_HEADER': function(config) {
return 'abcd'; //you've got access to a request config object to specify header value dynamically
}
}
})
```
### 1.6、Filter
``fliter``如果作用在非数组上，将会抛出一个异常，之前则是返回一个空数组。
``limitTo``作用在不合法的value上，现在将会原样返回，之前是返回空对象，空数组。
## 2、从1.4.x到1.5.x
从 1.4.x 到 1.5.x 是一个为升级ng2做准备的变更版本。
该版本主要是增加了一些功能，所以从1.4.x升级到1.5.x基本不需要太大的改动。
在 1.5.x 版本中，增加了一些接近ng2的新特性，如：
1. angular.component() //一种偏向于angular2风格的组件（特殊的指令）
2. $onInit //生命周期钩子
3. ngAnimateSwap // ngAnimate中一个新的指令
接着，我们来看下它的一些具体变更。
### 2.1、Core
**2.1.1、$parse**
``$parse`` 增加新特性，可以使用locals来覆盖原本的context。用法如下：
```javascript
var context = { user: { name: 'Jay' } };
var locals = { user: { name1: 'Local Jay' } };
var getter = this.$parse('user.name');
console.log(getter(context)); // 'Jay'
console.log(getter(context, locals)); // 'Local Jay'
```
**2.1.2、ngOptions**
如果元素上有 ``ngOptions`` 指令，那么 ``ngModel`` 指令也必须存在，否则就会抛出错误。
另外 ``ngOptions`` 接受假值（'', 0, false, null）
**2.1.3、orderBy**
对 ``undefined`` 或者 ``null`` 进行 ``orderBy`` 将会抛出错误。
### 2.2、ngAria
取消了部分元素的可访问性设置。
### 2.3 ngMessages
将 ``ngMessages`` 指令的优先级设置为1，如果有优先级低于1的指令有transclude功能，那么需要设置为更高的优先级。
### 2.4、ngResource
``$resource`` 增加了 ``$cancelRequest()`` 方法。
### 2.5、ngRoute
增加了 ``$resolveAs`` 配置属性，允许对 ``$resolve`` 指定别名。
### 2.6、ngTouch
默认禁用了 ``ngClickOverrideEnabled``，在触摸屏上，可能还有300ms的延迟。
如果要启用，那么可以使用如下方式：
```javascript
angular.module('myApp').config(function($touchProvider) {
$touchProvider.ngClickOverrideEnabled(true);
});
```
另外，建议使用FastClick来实现该功能。
需要注意，某些现代浏览器在某些场景下已经删除了300ms延迟：
Chrome 和 Firefox for Android 发现设置了 ```` 将会删除300ms延迟。
IE当设置 ``touch-action`` 为 ``none`` 或者 ``manipulation`` 移除延迟。
**注意：这些变化并不影响ngSwipe指令**。
## 3、总结
Angular1.x基本已经进入维护期了，很少会有新特性加入了。现在的重心在angular2，所以我们也可以优先对angular2做一些技术储备。
================================================
FILE: AngularJS相关/AngularJS官方FAQ.md
================================================
---
title: AngularJS官方FAQ
date: 2015/3/13 11:24:39
---
## 相关：最佳实践，反模式
### 1、为什么会觉得jQuery插件缺失？
请记住：当你在使用jQuery插件时，请在AngularJS之前加载jQuery库
**分析：** 因为AngularJS自带jqLite（可以理解为jQuery的精简版），如果先引入AngularJS的话，那么AngularJS会采用jqLite，而不是完整的jQuery库。
### 2、如何从一个Controller中访问DOM元素？
不要从Controller中执行DOM的选择/遍历。HTML还没有被渲染。查一查”directive“
### 3、为什么Angular说 controller/directive等缺失？
调用 `angular.module('myApp',[])` 总是会创建一个新的模块（同时干掉已有的重名模块）。相反，使用一个参数的方式调用 angular.module('myApp') 来引用已经存在的模块。
### 4、如何渲染未转义的数据？
```javascript
$sce.trustAsHtml(data)
如何禁用$sce?
app.config(['$sceProvider', function($sceProvider) {
$sceProvider.enabled(false);
}]);
```
### 5、当array/object/$resource-result变化时，应该如何监视？
```javascript
$scope.$watch 有第三个参数设置来监视值变化（非引用变化）
$watch(watchExpression, listener, [objectEquality]);
[objectEquality]设置为true，则使用angular.equals对象相等，而不是使用引用相等比较。
```
### 6、怎样才能序列化表单数据提交？
**不要这么做！** 不要尝试手动收集输入框值。仅仅只需要在每一个表单元素上附加 `ng-model="data.myField`，在需要使用的地方，使用 `$scope.data` 即可
### 7、总是在 ng-models 上使用(.) =>最佳实践
```html
```
### 17、如何从DOM检查上查看 scope ？
Google Chrome:安装 Batarang extension,检查一个DOM元素，然后在console中键入$scope
Firefox/Firebug：检查一个DOM元素，然后在console中键入 `angular.element($0).scope()`
或者 `$($0).scope()`
IE10+: 使用F12工具，检查一个元素。然后在console中键入 `angular.element($0).scope()`
或者 `$($0).scope()`
### 18、你有一些好的指令示例/库吗？
[AngularUI](http://angular-ui.github.com/) 是非常棒的AngularJS工具集合（甚至是更好的示例代码）
### 19、IE？
针对IE8.0或者更早，你需要[阅读这个](https://docs.angularjs.org/guide/ie)和[使用这个](http://angular-ui.github.io/#ieshiv)
### 20、必须对路由使用#?
参考 [$locationProvider](https://docs.angularjs.org/api/ng/provider/$locationProvider)
### 21、你应该在尝试用指令包装jQuery插件前，优先尝试使用[AngularUI Passthru Directive (uiJq) ](http://angular-ui.github.io/#directives-jq)
### 22、为什么我的 $scope.$watch() 递归触发?
如果你在 $scope.$watch(newVal,oldVal)中改变 newVal ，它会重复触发。在 $watch 运行后，$scope 会重新评估，被观察对象将被重新触发。
### 23、何时我需要使用 $scope.$apply() ?
仅仅需要在没有angular 事件/回调时 使用 $scope.$apply()。它通常不属于任何地方。
### 24、启用了 html5Mode ，如何获取<a href />的后退行为？
如果你想一个链接能够全页面刷新，那么只需要在a标记上添加 target="_self"
### 25、如何 .preventDefualt() 或 .stopPropagation() ?
所有的 ng-click 和相关的绑定都注入了 $event 事件对象，你可以用它来调用 .preventDefualt()，甚至是对象传递给你的方法。
### 26、AngularJS在我的Chrome扩展中不工作！
你需要使用 [ng-csp](http://docs.angularjs.org/api/ng.directive:ngCsp)
### 27、如何缓存 $http 和html 分部视图
```javascript
//使用装饰器，添加缓存功能
myAppModule.config(function($routeProvider, $provide) {
$provide.decorator('$http', function($delegate){
var get = $delegate.get;
$delegate.get = function(url, config){
url += (url.indexOf('?') !== -1) ? '?' : '&';
url += 'v=' + cacheBustVersion;
return get(url, config);
};
return $delegate;
});
});
```
## 测试
### 1、拒绝/解决一个 $q.defer() 不通过
你必须在处理它们的时候添加 `$scope.$apply()`
### 2、Jasmine spyOn() 不执行 spy'd 功能
不一定是AngularJS的问题，但是你需要追加 `.addCallThrough()`
================================================
FILE: AngularJS相关/AngularJS教程：1W字综合指南.md
================================================
---
title: AngularJS教程：1W字综合指南
date: 2015/3/13 11:24:39
---
# AngularJSj教程：1W字指南（译）
**原文地址：**[http://www.airpair.com/angularjs](http://www.airpair.com/angularjs)
## 1、AngularJS简介
Angular 是用于编写引人注目的Web应用程序的是客户端 MVW JavaScript框架。它由Google创建好维护，（offers a futuristic spin on the web and its upcoming features and standards.
Read more at http://www.airpair.com/angularjs#tY7q00WpGrTLB71Z.99）
MVW 即 Model-View-Whatever,它是能在开发应用程序时，为我们提供灵活性的一种设计模式。我们可以选择MVC(Model-View-Controller)或者是MVVM(Model-View-ViewModel)方式。
本教程可以作为一个最终的资源来开始学习AngularJS,它的概念和它背后的API，同时能帮助您学习如何实现现代的Web应用程序。
AngularJS自身作为增强HTML的一个框架。它从多种语言包括JavaScript和服务端语言中获得灵感，使得HTML也成为了动态语言。这意味着我们获得了一个完全的数据数据方式来开发应用程序，不再需要刷新实体，更新DOM和其他费时任务如浏览器bug和不一致。我们可以只关注数据，让数据关心HTML的方式来编写我们的应用程序。
## 2、JavaScript框架中的工程概念
AngularJS在处理提供数据绑定和其他工程概念上，和其他框架如Backbone.js和Ember.js采取了不同了做法。我们坚持使用熟悉的、令人喜欢的HTML，使Angular拦截它，并增强它。Angular将纯粹的JavaScript对象用于数据绑定，保证任何模型变化都会更新DOM。当模型值更新了一次，Angular会更新来自应用程序的状态来源对象。
### 2.1、MVC 和 MVVM
如果你已经习惯了构建静态网站，你可能更熟悉手动一块一块的构建HTML，通过数据一遍一遍的打印相同的HTML。这可能是grid中的列，一个导航结构，一个链接列表或者是图片等等。在这个实例中，你需要习惯一点小东西的变化都需要手动更新HTML的痛苦，你必须更新模板来保持其他用途的一致性。你还要为每个导航项目杜绝相同的HTML。
深呼吸一下，通过Angular我们能实现恰当的关注点分离以及动态HTML。这意味着数据在模Model中，HTML是作为一个微小的模板被渲染为View，我们能使用Controller来连接它们两个，并驱动Model和View值的变化。
================================================
FILE: AngularJS相关/AngularJS：Looking under the hood.md
================================================
---
title: AngularJS：Looking under the hood
date: 2015/3/13 11:24:39
---
原文地址：[https://www.binpress.com/tutorial/angular-js-looking-under-the-hood/153](https://www.binpress.com/tutorial/angular-js-looking-under-the-hood/153)
**用AngularJS写得越多，你就越惊叹于它的神奇。我对Angular能做的一些奇妙的事情非常好奇，然后我决定分析它的源代码，看看我能否揭示它的一些秘密。我记录了我在23000多行Angular源码中发现的真正有用的，能够解释Angular先进（和隐藏）的方面的一些内容。**
## 1、Dependency Injection annotation process
依赖注入（DI）是除开用代码获取或创建依赖之外的一条不同的请求依赖的方式。简单的说，依赖是作为一个注入对象传递给我们的。Angular允许我们在我们的应用程序中通过像Controllers和Directives的方法来使用DI。我们能创建自己的依赖，同时允许Angular在请求它们的时候被注入。
在Angular中，一个最常用的被请求的依赖是 *$scope*。例如：
function MainCtrl ($scope){
//access to $scope
}
angular.module('app').controller('MainCtrl', MainCtrl);
对于没有使用过Angular提供的依赖注入的JavaScript开发者来说，这看起来像一个局部变量名。实际上，它仅仅是我们所请求的依赖名称的一个占位符。Angular查找这些占位符，然后通过DI将它们转换为真正的依赖对象，让我们来仔细看看。
### 方法参数 ###
直到我们压缩我们的应用前，方法参数都运行正常。当你压缩你的代码，你的方法定义将会用字符表示参数而不是单词-这意味着Angular不能找到你想要的！Angular使用了一个方式来解决，调用function的 *toString()* 方法。这将返回函数的字符串形式！接下来我们就能访问正在被请求的参数。Angular
var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m;
var FN_ARG_SPLIT = /,/;
var FN_ARG = /^\s*(_?)(\S+?)\1\s*$/;
var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;
Angular做的第一件事就是将函数转换为字符串，这是JavaScript中非常有用的一个特性。这将给我们一个字符串类型的函数，如：
'function MainCtrl ($scope) {...}'
接下来，Angular使用如下方法，移除所有的注释：
fnText = fn.toString().replace(STRIP_COMMENTS, '');
紧接着，Angular从处理好的function中分割参数来创建真正有用的部分，
argDecl = fnText.match(FN_ARGS);
Angular接下来使用 *.split()* 来移除空白字符，同时返回我们请求的参数数组。为了更完美，Angular使用了一个内部的forEach方法来迭代这个数组，并匹配参数名称然后将它们添加到 *$inject* 数组中。
forEach(argDecl[1].split(FN_ARG_SPLIT), function(arg) {
arg.replace(FN_ARG, function(all, underscore, name) {
$inject.push(name);
});
});
这是你能想象的一个昂贵的处理流程。对每个函数的4个正则查找和一很多转换会造成性能损耗。当我们得到了Angular抽象的 *$inject* 数组，我们可以直接切入且田填充 *$inject* 数组来保存Angular困难和开销时间长的操作。
### $inject 对象 ###
我们可以通过在函数上添加 *$inject*属性来指定依赖自身，其中，如果存在的话，Angular使用DI注解。这是很容易的最可读的语法。例子如下：
function SomeCtrl ($scope) {
}
SomeCtrl.$inject = ['$scope'];
angular.module('app', [])
.controller('SomeCtrl', ['$scope', SomeCtrl]);
这样节省了Angular的许多工作-替代了检查方法参数，或者是操纵数组（详情请查看下一章节：Array Arguments）,它仅仅返回和运行指定的 *$inject* 数组。简单，高性能。
理想情况下，由于依赖注入在我们自己的时间和Angular的转换时间上开销很大，我们可以使用任务运行工具如Grunt.js或者是Gulp.js 来自动化注入任务或者是数组语法。
**Note：这个并没有实例化被依赖的所有服务，Angular所做的只是标注相关的名字-框架的其他部分关心对象注入。**
### Array Arguments
最后一个例子使用了我们通常看见的数组索引对应函数参数序号的语法，例如：
['$scope', function($scope){}]
数组的顺序是非常重要的，因为函数的参数将会按照同样的顺序，以此来避免依赖被错误的实例化和可能引发的错误。
function SomeCtrl ($scope, $rootScope) {
}
angular.module('app', [])
.controller('SomeCtrl', ['$scope', ‘$rootScope’, SomeCtrl]);
我们需要做的是传递函数作为数组的最后一个项，Angular会删除这个函数，并遍历数组所注明的依赖名称，就好像我们创建的 *$inject* 属性。当Angular解析一个方法的时候，它会检查参数是不是一个数组，如果是，那么最后一项是函数，其他的则是依赖。
else if (isArray(fn)) {
last = fn.length - 1;
assertArgFn(fn[last], 'fn');
$inject = fn.slice(0, last);
}
## 2、Factory vs Service ##
Factory 和 Service 非常类似，但往往开发人员都难以理解它们。
当 *.service()* 已经实例化，那么 *new Service()* 将被引擎调用，返回一个新实例给我们。本质上，*。.service()* 是作为构造函数被使用的。
service 基本上是一个 factory，然而它是创建时被实例化，因为，你需要在 service 中使用this来注册变量和函数，来替代在factory中返回一个对象的方式。
factory 是非常接近面向对象中的“工厂模式”，当你注入了这个 factory ,你就获得了完整的方法，允许你创建你需要的新的实例-本质上是通过一个对象创建多个新对象。
你可以看下在Angular源码中的内部的工作：
function factory(name, factoryFn) {
return provider(name, { $get: factoryFn });
}
function service(name, constructor) {
return factory(name, ['$injector', function($injector) {
return $injector.instantiate(constructor);
}]);
}
## 3、New $scope creation from $rootScope
Angular中所有的scope都是 *$rootScope* 的下级。 *$rootScope* 是通过 *new Scope()*创建的，进一步的子 scope 是通过 *$scope.$new()* 创建的。
var $rootScope = new Scope();
在 *$new* 方法里面，Angular设置了一个原型链来允许允许 scope 引用它们的父亲，它们的自己跟踪（作为生命周期），和以前的兄弟 scope 。
从下面的代码，如果你请求了一个隔离的 scope ，它会创建一个 *new Scope()* ,否则，它会创建一个从父级继承的子 scope 。
我省略了一些不必要的代码，但这里的是重点：
$new: function(isolate) {
var child;
if (isolate) {
child = new Scope();
child.$root = this.$root;
} else {
// Only create a child scope class if somebody asks for one,
// but cache it to allow the VM to optimize lookups.
if (!this.$$ChildScope) {
this.$$ChildScope = function ChildScope() {
this.$$watchers = null;
};
this.$$ChildScope.prototype = this;
}
child = new this.$$ChildScope();
}
child['this'] = child;
child.$parent = this;
return child;
}
当你使用*$scope.$new()*来测试Controller的时候，这也是非常好的能了解测试目的。这有助于明确对我来说Angular是如何创建新的scope的，为什么用Angular mocks 模块来嘲笑测试驱动开发（TDD）。
## 4、Digest Cycle
Digest Cycle 经常作为 *$digest* 被我们看到，这是Angular双向绑定的能力。当一个模型值更新的时候，它会运行，检查它最后已知的值，如果值有变化，呼叫适当的监听器。这是基本的脏检查 - 它针对所有有可能的值来检查，如果是脏值，那么呼叫相关的监听器，直到他没有脏值。我们快速看一下它是如何工作的：
$scope.name = 'Todd';
$scope.$watch(function() {
return $scope.name;
}, function (newValue, oldValue) {
console.log('$scope.name was updated!');
} );
当你调用 *$scope.$watch*，你注册了两件事。参数一是一个函数，返回你想要监视的值（当你提供一个字符串的时候，Angualr会将他转换为函数）。当 $digest 运行时，监视的参数将被调用，返回任何你想要的值。参数二是当你的参数一变化时，想要执行的函数。看一下Angular是怎样注册watch的。
$watch: function(watchExp, listener, objectEquality) {
var get = $parse(watchExp);
if (get.$$watchDelegate) {
return get.$$watchDelegate(this, listener, objectEquality, get);
}
var scope = this,
array = scope.$$watchers,
watcher = {
fn: listener,
last: initWatchVal,
get: get,
exp: watchExp,
eq: !!objectEquality
};
lastDirtyWatch = null;
if (!isFunction(listener)) {
watcher.fn = noop;
}
if (!array) {
array = scope.$$watchers = [];
}
// we use unshift since we use a while loop in $digest for speed.
// the while loop reads in reverse order.
array.unshift(watcher);
return function deregisterWatch() {
arrayRemove(array, watcher);
lastDirtyWatch = null;
};
}
这个函数推送你提供的参数到 scope 的 *$$watchers* 数组中，同时，返回一个方法允许你停止watch。
然后，每当*$scope.$apply*或者*$scope.$digest* 运行时，digest cycle将被运行。
### 未完...待续...
================================================
FILE: AngularJS相关/Angular从0到1：function（上）.md
================================================
---
title: Angular从0到1：function（上）
date: 2017/02/21 14:47:10
---
## 1、前言
Angular作为最流行的前端MV*框架，在WEB开发中占据了重要的地位。接下来，我们就一步一步从官方api结合实践过程，来学习一下这个强大的框架吧。
Note：每个function描述标题之后的★标明了该function的重要程度（1~5星）。
## 2、function（上）
Angular封装了一系列公共方法，帮助我们更简单的使用JS。这些就是Angular的function。
### 2.1、angular.bind(★)
angular.bind类似于Function.prototype.bind，实现函数柯里化，返回一个函数代理。eg:
函数原型
angular.bind(/*this对象*/self, /*要封装的function*/fn, /*参数列表*/args);
//原始函数
function fun(arg1, arg2, arg3) {
console.log(this);
console.log(arg1);
console.log(arg2);
console.log(arg3);
}
fun('arg1', 'arg2', 'arg3');
//如果几个常用参数都是固定的，而且该函数被调用频繁，那么就可以包装一下
var fun2 = angular.bind(window, fun, 'arg1', 'arg2');
//新的调用方式
fun2('arg3');
### 2.2、angular.bootstrap(★★★★)
用于使用angular执行渲染元素。也是angular的启动方法，如果没有在页面上指定ng-app,必须要手动调用该函数进行启动。
angular.bootstrap(/*Dom元素*/element, /*Array/String/Function*/[modules], /*Object*/[config]);
//常规用法
angular.bootstrap(document, ['app'])
//带配置项
angular.bootstrap(document, ['app'], {strictDi: true/*Defaults: false*/})
### 2.3、angular.copy(★★★★★)
Angular.copy用于复制对象，由于angular的双向绑定特点，那么如果直接操作$scope对象，那么很容易就会改变ui的显示，这个时候就需要借助angular.copy来创建一个对象副本，并进行操作。
//原型
angular.copy(source, [destination]);
var obj = {a: 1};
var obj2 = angular.copy(obj);
var obj3;
angular.copy(obj, obj3);
console.log(obj2 === obj) //false
console.log(obj3 === obj) //false
var obj4;
//第二个和参数和返回值是相等的，而且第二个参数不管以前是什么，都会被重新赋值
var obj5 = angular.copy(obj, obj4);
console.log(obj4 === obj5); //true
### 2.4、angular.element(★★★★)
等价与jQuery的选择器，如果在angular之前没有引入jQuery，那么就使用jqLite包装.
angular.element('body');
//等价于
$('body');
//用法
var $body = angular.element('body');
### 2.5、angular.equals(★★)
用于比较两个对象是否相等，如下示例的规则和JS有区别，注意识别。
var obj1 = {a: 1};
var obj2 = obj1;
//引用一致，则相等
console.log(angular.equals(obj1, obj2)); // true
obj2 = {a: 1};
//引用不一致，对象表现一致，则相等
console.log(angular.equals(obj1, obj2)); // true
obj2 = {a: 1,$a: 2};
//对象比较时，忽略以$开头的属性
console.log(angular.equals(obj1, obj2)); // true
obj1 = /aa/;
obj2 = /aa/;
//正则表达式表现相等，则相等
console.log(angular.equals(obj1, obj2)); // true
//NaN与NaN比较，则相等
console.log(angular.equals(NaN, NaN)); // true
### 2.6、angular.extend(★★)
功能上和jQuery.extend没多大差异
//原型-第一个参数为目标，之后的参数为源，同时返回dst
angular.extend(dst, src);
//示例
var obj1 = {a: 1};
var obj2 = angular.extend(obj1, {a: 2}, {b: 3});
console.log(obj1)
console.log(obj1 === obj2); //true
### 2.7、angular.forEach(★★★★★)
angular.forEach用于遍历对象或者数组，类似于ES5的Array.prototype.forEach
//原型
angular.forEach(obj, iterator, [context]);
var values = {name: 'misko', gender: 'male'};
var arr = ['misko', 'male'];
angular.forEach(values, function (value, key) {
console.log(key + ' = ' + value);
});
angular.forEach(arr, function (value, i) {
console.log(i + ' = ' + value);
});
//还可以传递this
var obj = {};
angular.forEach(values, function (value, key) {
obj[key] = value;
}, obj);
console.log(obj);
### 2.8、angular.fromJson(★★★)
angular.fromJson将JSON字符串转换为JSON对象，注意，必须严格满足JSON格式，比如属性必须双引号，该函数内部实现是利用JSON.parse()。
//原型
angular.fromJson(/*string*/ jsonString)
var jsonString = '{"p1": "xx", "p2": 1, "p3": true}';
var jsonObj = angular.fromJson(jsonString);
console.log(jsonObj);
### 2.9、angular.toJson(★★★)
angular.toJson可以将对象，数组，日期，字符串，数字转换为json字符串
//原型
angular.toJson(obj, pretty);
var obj = {p1: 1, p2: true, p3: '2'};
var jsonString = angular.toJson(obj);
console.log(jsonString);
//美化输出格式（设置为true，默认采用2个字符缩进）
jsonString = angular.toJson(obj, true);
console.log(jsonString);
//还可以设置缩进字符数
jsonString = angular.toJson(obj, 10);
console.log(jsonString);
### 2.10、angular.identity(★)
angular.identity返回该函数参数的第一个值。编写函数式代码时，非常有用（待使用）。
//官方示例
function transformer(transformationFn, value) {
return (transformationFn || angular.identity)(value);
};
//简单演示
var value = angular.identity('a', 1, true);
console.log(value); // 'a'
### 2.11、angular.injector(★★)
angular.injector能够创建一个injector对象，可以用于检索services以及用于依赖注入。
//原型，[strictDi]默认false，如果true，表示执行严格依赖模式，
//angular则不会根据参数名称自动推断类型，必须使用['xx', function(xx){}]这种形式。
angular.injector(modules, [strictDi]);
//定义模块A
var moduleA = angular.module('moduleA', [])
.factory('F1', [function () {
return {
print: function () {
console.log('I\'m F1 factory');
}
}
}]);
var $injector = angular.injector(['moduleA'])
$injector.invoke(function (F1) {
console.log(F1.print());
});
//此种写法会报错，因为是严格模式
var $injector2 = angular.injector(['moduleA'], true)
$injector2.invoke(function (F1) {
console.log(F1.print());
});
//可以采用如下写法
$injector2.invoke(['F1', function (F1) {
console.log(F1.print());
}]);
### 2.12、angular.module(★★★★★)
angular.module可以说是最常用的function了。通过它，可以实现模块的定义，模块的获取。
//定义模块A
var moduleA = angular.module('moduleA', []);
//定义模块B，模块B依赖moduleA
var moduleB = angular.module('moduleB', ['moduleB']);
//可以在第三个参数上设置配置函数
var moduleB = angular.module('moduleB', ['moduleB'], ['$locationProvider', function ($locationProvider) {
console.log($locationProvider);
}]);
//等价于
var moduleB = angular.module('moduleB', ['moduleB'])
.config(['$locationProvider', function ($locationProvider) {
console.log($locationProvider);
}]);
//获取模块
angular.bootstrap(document, ['moduleB']);
================================================
FILE: AngularJS相关/Angular从0到1：function（下）.md
================================================
---
title: Angular从0到1：function（下）
date: 2017/02/21 14:47:10
---
## 1、前言
## 2、function（下）
### 2.13、angular.isArray(★★)
``angular.isArray``用于判断对象是不是数组，等价于``Array.isArray``
console.log(angular.isArray([])); // true
console.log(angular.isArray({0: '1', 1: '2', length: 2})); // false
### 2.14、angular.isDate(★★)
通过判断toString.call(value)是不是等于'[object Date]' 来判断对象是个是一个Date对象.
console.log(angular.isDate(new Date())); // true
console.log(angular.isDate(223)); // false
### 2.15、angular.isDefined(★★)
判断对象或者属性是否定义
var obj = {a: 1, b: null, c: undefined};
console.log(angular.isDefined(obj.a)); // true
console.log(angular.isDefined(obj.b)); // true
console.log(angular.isDefined(obj.c)); // false
console.log(angular.isDefined(obj.d)); // false
### 2.16、angular.isElement(★★)
此方法判断元素是不是一个元素（包含dom元素，或者jquery元素）
console.log(angular.isElement(document.getElementsByTagName('body')[0])); // true
console.log(angular.isElement($('body'))); // true
### 2.17、angular.isFunction(★★)
此方法判断对象是不是一个function ，等价于 typeof fn === 'function'
console.log(angular.isFunction(new Function('a', 'return a'))); // true
console.log(angular.isFunction(function(){})); // true
console.log(angular.isFunction({})); // false
### 2.18、angular.isNumber(★★)
判断数字是否为number
function isNumber(value) {
return typeof value === 'number';
}
### 2.19、angular.isObject(★★)
function isObject(value) {
return value !== null && typeof value === 'object';
}
### 2.20、angular.isString(★★)
function isString(value) {
return typeof value === 'string';
}
### 2.21、angular.isUndefined(★★)
function isUndefined(value) {
return typeof value === 'undefined';
}
### 2.22、angular.lowercase(★★)
转换字符串为小写模式，如果参数不是字符串，那么原样返回
var lowercase = function(string) {
return isString(string) ? string.toLowerCase() : string;
};
console.log(angular.lowercase(1)); // 1
console.log(angular.lowercase('ABCdef')); // 'abcdef'
### 2.23、angular.uppercase(★★)
转换字符串为大写模式，如果参数不是字符串，那么原样返回
var uppercase = function(string) {
return isString(string) ? string.toUpperCase() : string;
};
console.log(angular.uppercase(1)); // 1
console.log(angular.uppercase('ABCdef')); // 'ABCDEF'
### 2.24、angular.merge(★★)
将多个对象进行深度复制，与extend()不同，merge将会递归进行深度拷贝。该拷贝是完全深拷贝，就连对象引用也不一样。
var o = {};
var obj1 = {a1: 1, a2: 2, a3: [1]};
var obj2 = {b1: [2], b2: /abc/};
var obj3 = [o];
var obj4 = {d: o};
var result = angular.merge({}, obj1, obj2, obj3);
console.log(result);
console.log(result[0] === o); // false
console.log(result.d === o); // false
### 2.25、angular.noop(★★)
一个空函数，调试时非常有用。可以避免callback未定义引发的error。
function foo(callback) {
var result = calculateResult();
(callback || angular.noop)(result);
}
### 2.26、angular.reloadWithDebugInfo(★★)
启用DebugInfo，该设置优先级高于``$compileProvider.debugInfoEnabled(false)``
================================================
FILE: AngularJS相关/Angular再回首(1)-Component组件.md
================================================
---
title: Angular再回首(1)-Component组件
date: 2017/02/21 14:47:10
---
## 0、再谈组件
``Component(组件)`` 在 ``Angular1`` 就已经有雏形了，那就是指令。在 ``Angular2`` 中，组件的概念被大大的强化，甚至是Angular2的核心概念。
在前端这么多年的演变中，组件也反哺到 ``Angular1``，成为 ``Angular1`` 的一种重要特性，在此之前，我们仅仅可以用 ``Directive`` 来实现类似组件的效果。
## 1、Angular组件与指令
在 ``Angular 1.5.x`` 中，新增加了 ``angular.component`` 方法，用于实现组件的构造。
在此之前，我们可能用 ``angular.directive`` 来实现类似的效果。
这个时候我们可能就会疑惑，它们有什么区别呢？
| Feature | Directive | Component |
|---|---|---|
| bindings | No | Yes (binds to controller) |
| bindToController | Yes | (default: false) No (use bindings instead) |
| compile function |Yes | No |
| controller | Yes | Yes (default function() {}) |
| controllerAs | Yes | (default: false) Yes (default: $ctrl)|
| link functions | Yes | No|
| multiElement | Yes| No|
| priority| Yes| No|
| require | Yes| Yes|
| restrict |Yes| No (restricted to elements only)|
| scope |Yes (default: false) |No (scope is always isolate)|
| template |Yes |Yes, injectable|
| templateNamespace| Yes| No|
| templateUrl |Yes |Yes, injectable|
| terminal| Yes| No|
| transclude |Yes (default: false) |Yes (default: false)|
更多信息，请参考 [Angular 官方说明](https://docs.angularjs.org/guide/component)
从上表我们可以看出，对于 ``Directive``，``Component`` 从设计思路上更加完善，也更加纯粹。总得来说，组件显得更易理解，更简单易用。
## 2、组件生命周期
在 ``angular.directive()`` 中，是没有生命周期这个概念的，我们无法在指令的特定阶段插入自己的逻辑。
但是在 ``angular.component()`` 中，则是具有特定的生命周期，以方便我们进行控制。
生命周期如下：
1. $onInit -- 指令初始化时执行（放置初始化代码）
2. $onChanges(changesObj) -- 组件数据变化时执行，并可获取变更对象
3. $doCheck() -- 执行变更检测时执行
4. $onDestroy() -- 组件释放时执行（放置清理代码）
5. $postLink() -- 类似后连接函数 （一般放置dom操作，因为此时组件已经渲染好）
实例：
```javascript
((angular, window) => {
class AlertComponent {
constructor() {
}
$onInit() {
console.log('init');
}
$onChanges(changesObj)
console.log('change', changesObj);
}
$doCheck() {
console.log('check');
}
$onDestroy() {
console.log('destroy');
}
$postLink() {
console.log('post link');
}
}
AlertComponent.$inject = []; // 配置依赖项
angular.module('components').component('jAlert', {
templateUrl: 'components/alert/alert.html',
// scope绑定语法，< 单向绑定（变量），@ 单向绑定（纯字符串）， = 双向绑定，& 事件绑定
bindings: {
menuData: '<'
},
controller: AlertComponent,
controllerAs: '$ctrl',
require: '',
transclude: false
});
})(window.angular, window);
```
在页面使用该指令后，可以在控制台看出如下输出：
```
init
check
post link
N个check（脏检查）
```
在切换路由，或者其他会删掉该组件的操作时，会看出控制台输出 ``destroy``。
如果中途有数据变化，控制台还会输出 ``change``。
这就是整个组件的生命周期。
## 3、属性绑定
在 ``directive`` 中，我们要获取数据，一般会采用 ``$scope`` 传参，或者通过link函数来捕获参数。
在新的组件申明中，我们只需要通过 ``bindings`` 就可以实现复杂的参数绑定。
简单思考下，我们可能需要哪些绑定呢？
1. 双向绑定 （双向）
2. 单向绑定变量 （从外到内）
3. 单向绑定属性（字符串）（从外到内）
4. 输出绑定 （从内到外）
在组件的 ``bindings`` 属性中，我们也刚好有四种语法，来一一对应这四种绑定。
具体写法如下：
```javascript
bindings: {
model: '=', // 双向绑定
title: '@', // 单项绑定字符串（直接用组件上的属性值）
key: '<', // 单项绑定变量，取到属性值，然后返回$scope[属性值]
onClick: '&' // 输出绑定，执行外部函数
}
```
假设组件标签为 ````，那么用法如下：
```javascript
$scope = {
model: '1',
key: 'abc',
onClick: () => {
}
};
```
```html
我会被传递到主键内部
```
### 4.2、传递多个HTML片段
以上，我们知道了如何传递单个HTML片段，但传递多个HTML片段也是非常有必要的，如 ``Dialog``组件，
我们很可能会传递 ``dialog-header``, ``dialog-body`` 等等，那此时又应如何呢？
这个场景，我们可以借助 ``ng-transclude`` 的 ``slot`` 功能实现，
首先，是占位符的变化，如下：
```html
我是Panel Header（可选）
我是Panel Body（必须）
```
## 5、组件 ``require``
同 ``Directive`` 一样，组件也可以相互依赖，只需要在注册组件时，设置require属性即可，写法如下：
```javascript
require: {
componentCtrl: '^parentComponent'
}
```
## 6、小结
新增的 ``angular.component`` 就是这么一个东西，比起 ``directive`` 更加纯粹，更加强大，更加易用。
建议在后续使用中，多多尝试该方式。
================================================
FILE: AngularJS相关/Angular再回首(2)-那些容易忽略的Component细节.md
================================================
---
title: Angular再回首(2)-那些容易忽略的Component细节
date: 2017/02/21 14:47:10
---
## 0、前言
在 ``Angular 1.5.x`` 中，增加的组件方法，相当实用和易用。但也有许多小细节问题值得注意，
以下为本人在组件实践过程中遇到的问题，或者是需要注意的小细节。
## 1、问题/小细节（需要注意的点）
### 1.1、如何判断是否添加了可选的 ``transclude`` 元素？
在很多时候，我们会给一个组件设定多个 ``transclude``，可能其中有一部分是可选的，那如何判断可选的 ``transclude`` 被用户设置了值呢？
此时，我们可以依靠 ``$transclude`` 来进行判断：
```javascript
class XXXComponent{
constructor($transclude){
this.$transclude = $transclude;
}
$onInit(){
// 判断transclude是否存在
let transcludeName = 'xxx';
let hasXXX = this.$transclude.isSlotFilled(transcludeName);
}
}
XXXComponent.$inject = ['$transclude'];
```
### 1.2、如何监控绑定属性的变更？
属性绑定，分为一次性绑定(@)（也算是单向绑定），单向绑定(<)，双向绑定(=)。
**# 监控单向绑定属性**
对于单向绑定的属性，可以通过生命周期钩子 ``$onChanges(changesObj)`` 来进行监控。
```javascript
class XXXController{
$onChanges(changesObj){
console.log(changesObj);
}
}
```
其中参数 ``changesObj`` 是所有变更属性的一个汇总，数据结构如下：
```json
changesObj = {
key1: { // 有变更的绑定属性
currentValue: any // 当前值 （变化后的值）
previousValue: any // 上一次的值 （变化前的值）
isFirstChange(): fn // 方法，用于判断是否是第一次变更。
}
}
```
**注意：``$onChanges`` 无法监控双向绑定属性，切记！**
**# 监控双向绑定**
由于 ``$onChanges`` 无法监控双向绑定属性，那么我们就必须另外想办法来进行监控，可以有以下几种方案：
*方案一：利用 ``$interval``*
既然是双向绑定，那么肯定变化是直接生效的，关键就在于我们无法监视到，这个时候我们可以利用 ``$interval`` 来实现定时监控。
```javascript
class XXXController{
constructor($interval){
this.$interval = $interval;
this.init();
}
init(){
let previousValue = null;
this.$interval(() => {
if(previousValue !== this.value){
previousValue = this.value;
console.log('value changed');
}
}, 200);
}
}
XXXController.$inject = ['$interval'];
angular.module('xxx').component('xxx', {
bindings: {
value: '='
},
controller: XXXController,
controllerAs: 'vm'
});
```
优点：
1. 易于理解
缺点：
1. 浪费资源
2. 需要自己书写逻辑
推荐指数： ☆
*方案二：利用 ``$scope.$watch(keyString)``*
组件也有独立的 ``$scope``，那么借助 ``$scope.$watch`` 也可以实现监听属性变化，代码如下：
```javascript
class XXXController{
constructor($scope){
this.$scope = $scope;
this.init();
}
init(){
this.$scope.$watch('vm.value', (newVal, oldVal) => {
console.log('value changed);
});
}
}
XXXController.$inject = ['$scope'];
angular.module('xxx').component('xxx', {
bindings: {
value: '=' // 双向绑定属性
},
controller: XXXController,
controllerAs: 'vm'
});
```
优点：
1. 使用简单
缺点：
1. 字符串形式的 ``$watch``,依赖 ``controllerAs``,不易理解
2. 实质仍然是定时器，只不过是使用的 ``angular`` 自身的 ``$diget`` 循环
推荐指数： ☆☆
*方案三：利用 ``$scope.$watch(fn)``*
``$scope.$watch`` 也接受函数类型的参数，相对于字符串形式，没有 ``controllerAs`` 的相关性，而且更灵活，代码如下：
```javascript
class XXXController{
constructor($scope){
this.$scope = $scope;
this.init();
}
init(){
this.$scope.$watch(() => this.value, (newVal, oldVal) => {
console.log('value changed);
});
}
}
XXXController.$inject = ['$scope'];
angular.module('xxx').component('xxx', {
bindings: {
value: '=' // 双向绑定属性
},
controller: XXXController,
controllerAs: 'vm'
});
```
优点：
1. 使用简单
缺点：
1. 实质仍然是定时器，只不过是使用的 ``angular`` 自身的 ``$diget`` 循环
推荐指数： ☆☆☆☆
*方案四：利用 ``getter & setter``*
因为我们使用了 ``ES6 Class``，那么 ``ES6`` 的 ``getter setter`` 特性，我们也是能够使用的，方式如下：
```javascript
class XXXController{
set value(val){
this._value = val;
console.log('value changed');
}
get value(){
return this._value;
}
}
XXXController.$inject = [];
angular.module('xxx').component('xxx', {
bindings: {
value: '=' // 双向绑定属性
},
controller: XXXController,
controllerAs: 'vm'
});
```
优点：
1. 没有额外的开销，性能高
缺点：
1. 使用相对较为复杂
推荐指数： ☆☆☆☆
================================================
FILE: AngularJS相关/Angular再回首(3)-我们来实现一个组件.md
================================================
---
title: Angular再回首(3)-我们来实现一个组件
date: 2017/02/21 14:47:10
---
## 0、前言
前两文写了 ``Component`` 的一些方面，但没有一个比较线性的串联关系，本文，就来从一个实例出发，来尝试概括一个组件的方方面面。
## 1、
## 2、组件实现
### 2.1、先整一个组件
```javascript
angular.module('app', [])
.component('finalComponent', {});
```
这个组件啥都不干，就提供了一个新的标签，显得毫无意义，但是我们可以从这里看到如何定义一个组件。
**注意：组件名称，请使用小驼峰命名法，在HTML中，请使用连字符+小写字母，这种实现是为了处理js和html大小写敏感的差异(js区分大小写，html不区分)**
**注意2：如果在组件标签中，嵌入有效的标签，是会显示出来的，如下：**
```html
```
会显示出大号的 “Hello”。
### 2.2、带模板的组件
接着，来实现一个有意义的组件，比如我要渲染一个特定的字符串，代码如下：
```javascript
angular.module('app', [])
.component('finalComponent', {
template: 'ABC `，则会显示 "Hello World" 内容了。
**注意：当组件指定了模板属性后，其内部的标签，将不会生效（transclude除外，）**
### 2.3、复杂模板的组件
以上，我们已经实现了带模板的组件，可是我们的模板可能会比较复杂，这个时候直接写 `template` 就不太好用了,此时，我们会考虑把模板拆分到一个独立的 `.html` 文件中，代码如下：
```html
Angular Demo
Angular Demo
Angular Demo
Angular Demo
Angular Demo
原始的内容，
还会在这里。
```
#### 分析
1. 通过在指令中设置transclude=true，同时在template中包含*<div ng-transclude>*，实现了将元素内部元素移动到了ng-transclude元素内部，并创建了新的作用域
### 示例三（link与compile）
```javascript
/*指令*/
angular.module('app.directive.demo3',[]).directive('demo3Link',function(){
return {
restrict:'E',
template:'
components/
hello_world.html
hello_world.ts
bootstrap.ts
index.html
package.json
```
首先第一步，我们要通过npm安装我们的依赖项：
``npm install angular2 rxjs systemjs es6-shim typescript --save``
接着，实现我们的``index.html``内容：
```html
Angular2 Hello World
Angular2: Hello, {{username}} ``` ```javascript import {Component} from 'angular2/core'; @Component({ selector: 'hello_world', //此处指明了组件的标记，我们就可以使用 ，依赖直接子元素上的指令
constructor(@Query(DepDirective) depDirective: QueryList) {
}
}
```
```html
```
6、注入后代集合元素的指令 --该指令依赖后代元素的指令
```javascript
import {User} from 'xxx';
@Directive({ selector: '[my-directive]' })
class MyDirective {
//使用 @Query ，依赖直接子元素上的指令
constructor(@Query(DepDirective, {descendants: true}) depDirective: QueryList) {
}
}
```
```html
```
7、可选注入 --该指令的依赖是可选的。
```
@Directive({ selector: '[my-directive]' })
class MyDirective {
// 使用 @Optional 标记，依赖是可选的。
constructor(@Optional() depDirective:DepDirective) {
}
}
```
**注：以上多种注入方式也适用于 Component 。**
#### 2.1.3、Injectable
``Injectable`` 允许使用注入。在编写组件/指令时，如果有注入，那么就需要将指令/组件标记为可注入的。
#### 2.1.4、Pipe
``Pipe`` 允许我们定义管道方法，实现ng1中filter类似的功能。
如何编写一个Pipe？
```javascript
@Pipe({name: 'lowercase'})
class Lowercase {
transform(v: string, args: any[]) { return v.toLowerCase(); }
}
```
### 2.2、In angular2/router
#### 2.2.1、CanActivate
``CanActivate`` 允许我们在使用路由时，检查组件的权限，来确定是否可以使用。
```javascript
@Component({selector: 'control-panel-cmp', template: ` = new EventEmitter();
```
也等同于：
```typescript
outputs: [
'updated: updated'
]
private updated: EventEmitter = new EventEmitter();
```
**注意：在之前的版本中，也可以用events属性来替代outputs，现在也还可以使用**
要对外发出通知，只需要使用如下代码：
```typescript
this.updated.emit('updated');
this.updated.next('updated2');
```
HTML标签使用时，代码如下：
```html
= new EventEmitter();
constructor(el: ElementRef) {
this.nativeElement = el.nativeElement;
}
private _setElementStyle(): void {
clearTimeout(this.timeoutId); //先清除已有的timeout
//保证只执行最后一次。
this.timeoutId = setTimeout(() => {
this.nativeElement.style.backgroundColor = this.bgColor;
this.nativeElement.style.color = this.color;
this.updated.emit('updated');
this.updated.next('updated2');
}, 500);
}
ngOnInit() {
console.log('bgColor', this.bgColor);
console.log('color', this.color);
this._setElementStyle();
}
ngOnChanges() {
console.log('bgColor-change', this.bgColor);
console.log('color-change', this.color);
this._setElementStyle();
}
}
```
```html
//test.html
= new EventEmitter();
constructor() {
}
}
```
通过host直接在元素上添加绑定。
## 2、结构指令
结构指令帮助我们修改dom结构，我们就简单实现一个templateInclude指令。
```typescript
import {Directive, Input, Output, ElementRef, EventEmitter, OnChanges} from '@angular/core';
import {Http} from '@angular/http';
@Directive({
selector: '[templateInclude]'
})
export class TemplateIncludeDirective implements OnChanges {
private nativeElement: any;
@Input('templateInclude')
private templateUrl: string;
@Output()
private loaded: EventEmitter = new EventEmitter();
constructor(el: ElementRef, private http: Http) {
this.nativeElement = el.nativeElement;
}
private _setTemplate() {
this.http.get(this.templateUrl)
.subscribe(res => {
this.nativeElement.innerHTML = res.text();
this.loaded.next(`${this.templateUrl} loaded`);
});
}
ngOnChanges() {
console.log(this.templateUrl);
this._setTemplate();
}
}
```
## 3、总结
**1、指令的元数据有很多属性可以使用**
```typescript
class DirectiveMetadata {
selector : string //指令使用的标记（选择器）
inputs : string[] //输入参数绑定
properties : string[] //属性绑定（过期，请使用inputs）
outputs : string[] //输出参数绑定
events : string[] //事件绑定（过期，请使用outputs）
host : {[key: string]: string} //宿主元素属性设置
providers : any[] //服务绑定
bindings : any[] //服务绑定（过期，请使用providers）
exportAs : string //导出名称
queries : {[key: string]: any} //用于指令依赖关系
}
```
**2、在使用指令（不仅仅是指令）进行绑定的时候，[]表示输入属性，()表示输出属性和事件**
**3、尽量使用统一的做法，用装饰器优于在属性上做绑定**
**4、在编写指令（不仅限于指令）时，将class中内容按照特定顺序进行排列，推荐顺序如下（个人建议，仅供参考）：**
1. 私有变量
2. 共有变量
3. @Input变量
4. @Output变量
5. 构造函数
6. 私有方法（建议下划线开头）
7. 公有方法
8. 生命周期钩子方法
================================================
FILE: Angular系列/05_Angular2组件简析.md
================================================
---
title: 05_Angular2组件简析
date: 2017/02/21 14:47:10
---
## 0、Angular2组件
**注：由于Angular2的API好不够稳定，书写该文时，采用的是Angular2 rc1（@angular rc.1）版本，其他版本请自行测试。**
在上篇中，我们已经讲到了指令，这篇呢，我们一起来看看Angular2组件是怎么一回事。
首先，组件也是指令，组件是一种有模板（内嵌视图）的特殊指令。
从元数据[指令源代码](https://github.com/angular/angular/blob/2.0.0-rc.1/modules/%40angular/core/src/metadata/directives.ts)中也可以看出组件与指令的关系：
```typescript
export class ComponentMetadata extends DirectiveMetadata {
}
```
相比 ``Directive``, ``Component`` 新增了一些属性，如下：
```typescript
{
changeDetection : ChangeDetectionStrategy; 定义变化检测类型
viewProviders: any[]; 用于在组件中注入特定的class。一般是实体类
moduleId: string; 定义主键的ID
templateUrl: string; 如ng1，外部模板地址
template: string; 如ng1，内嵌模板内容
styleUrls: string[]; 外部样式表文件
styles: string[]; 内嵌样式
directives: Array; 使用到的指令
pipes: Array; 使用到的管道
encapsulation: ViewEncapsulation 封装视图的类型
}
```
## 1、组件生命周期
既然组件也是指令，那么指令所拥有的四大阶段组件也同样拥有。
而且，由于组件带有视图，还多了几个和视图相关的生命周期阶段。如下：
1. ngAfterContentInit 组件内容渲染到页面之后触发
2. ngAfterContentChecked 检查组件内容绑定数据后触发
3. ngAfterViewInit 创建组件视图之后触发
4. ngAfterViewChecked 检查组件视图绑定数据后触发
它们的执行顺序也和以上顺序一致。
## 2、整一个组件试试？
接下来，我们就简单实现一个组件 ``TodoList`` 来实验一下以上的知识点。
首先，搭建好一个简单的架子，如下：
```typescript
import {Component} from '@angular/core';
@Component({
selector: 'todo-list'
})
export class TodoListComponent{
constructor(){
}
}
```
使用组件装饰器 ``Component`` 来定义一个组件，注意其中 ``selector`` 属性和 ``Directive`` 中的写法不一样了。
组件必须以标签的方式存在，所以 selector 属性值仅仅只需要写标签名就可以了，不再需要其他特别的符号了。
组件和指令最大的差别就在于模板，所以我们接下来添加上模板代码：
```typescript
import {Component} from '@angular/core';
@Component({
selector: 'todo-list',
template: `
Todo List
`
})
export class TodoListComponent{
constructor(){
}
}
```
如上，一个简单的模板就搞好了。这里需要注意 ``templateUrl`` 和 ``template`` 是互斥的两个属性。一般来说只选择一个赋值，如果两者都存在，那么会采用 ``tempalte`` 的值。
模板有了，我们就来点业务逻辑：
先假设Todo有三个状态：
```typescript
enum TodoStatus {
Open,
Processing,
Closed
}
```
在来定义Todo的实体类：
```typescript
class Todo {
private name: string;
private description: string;
private status: TodoStatus;
constructor(name: string, status: TodoStatus, description?: string) {
this.name = name;
this.status = status;
this.description = description || '';
}
}
```
接着来实现一个组件：
```typescript
@Component({
selector: 'todo-list',
template: require('./todo-list.component.html')
})
export class TodoList {
private todos: Array;
private todo: { name: string, desc: string } = { name: '', desc: '' };
constructor() {
this.todos = [];
}
addTodo() {
this.todos.push(new Todo(this.todo.name, TodoStatus.Open, this.todo.desc));
}
}
```
这个时候，HTML页面内容如下：
```html
;
transform(value:string, args:string[]):any {
if (!this.fetchPromise) {
this.fetchPromise = window.fetch(value)
.then((result:any) => result.json())
.then((json:any) => this.fetchedValue = json);
}
return this.fetchedValue;
}
}
```
================================================
FILE: Angular系列/07_Angular2使用路由.md
================================================
---
title: 07_Angular2使用路由
date: 2017/02/21 14:47:10
---
## 0、关于路由
此处所说的路由是指URL路由（也许叫URL Rewrite）。其实是把网址（URL）映射到相关Controller、Component的这个功能。
Angular2的路由其实也就是URL路由，在Angular2中，有两个模块提供了路由功能，``@angular/router-deprecated`` 和 ``@angular/router``。
``@angular/router-deprecated`` 从名称也可以看出，它是一个过时的模块（beta版本中它的名字是 ``angular2/router``，在rc版本被更名）。但疑惑的是，它一直存在于 ``@angular`` 包中。在这里，我主要使用 ``@angular/router`` 来实现路由功能。
## 1、使用Angular2路由
建议在根组件中配置路由。要使用路由，必须先依赖 ``ROUTER_PROVIDERS``；如果要使用路由指令，必须先依赖 ``ROUTER_DIRECTIVES``。
大概结构如下：
```typescript
//bootstrap.ts
import {provide} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';
import {AppComponent} from './app/app.component';
bootstrap(AppComponent, [
provide(LocationStrategy, { useClass: HashLocationStrategy })
]);
```
```typescript
//app.component.ts
import {Component, provide} from '@angular/core';
import {Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';
import {HomeComponent} from './../home/home.component';
import {AboutComponent} from './../about/about.component';
@Component({
selector: 'demo-app',
template: `
``来让我们确定是否跳转。
## 3、自定义回调处理invalidState
通过以上的方式，我们实现了状态路由，也实现了路由跳转的控制。接下来，我们另辟蹊径来实现动态加载。
由于当我们请求不合法的state时，uiRouter都会执行到 ``invalidCallbacks`` 这个函数，我这里就通过它加载动态模块。
实现代码如下：
```typescript
configure(uiRouter: UIRouter) {
... //省略不相关代码
uiRouter.stateProvider.invalidCallbacks = [($from$, $to$) => {
return new Promise((resolve, reject) => {
let toStateName = $to$.name();
let moduleName = this._getModuleName(toStateName);
if (!moduleName) {
return;
}
this.moduleLoader.load(moduleName).then(_ => {
let state = uiRouter.stateService.target(toStateName);
resolve(state);
});
});
}];
}
```
接着，再来看看moduleLoader的代码：
```typescript
import { Injectable, Inject } from '@angular/core';
import {Http} from '@angular/http';
import {UIRouter} from 'ui-router-ng2';
@Injectable()
export class ModuleLoader {
private uiRouter: UIRouter;
private loadedModules: Set;
constructor(private http: Http) {
this.loadedModules = new Set();
}
setRouter(uiRouter) {
this.uiRouter = uiRouter;
}
load(moduleName): Promise {
if (this.loadedModules.has(moduleName)) {
return Promise.resolve();
}
return new Promise((resolve, reject) => {
this.http.get(`../dist/assets/js/${moduleName}.js`)
.toPromise()
.then(res => {
let mod = eval(res.text());
mod.MODULE_STATES.forEach(state => {
this.uiRouter.stateRegistry.register(state);
});
this.loadedModules.add(moduleName);
resolve();
}).catch(err => reject(err));
});
}
}
```
通过请求指定的文件，然后利用eval执行出具体的state数组，通过register方法，动态注入到我们的ui-router中。
**注意invalidCallbacks回调中的参数($from$, $to$)，必须使用这两个名字，通过分析源代码发现它是用参数名做了匹配的，如果换成其他名称，会提示注入错误。**
**invalidCallbacks回调中的逻辑非常关键，演示了如何获取原始要跳转的state，也演示了如何恢复继续跳转。**
## 4、更多待探索
当前对 ``ui-router-ng2`` 的探索还不够多，另外它本身也还在beta版本，该处理方式应该还有优化空间。
================================================
FILE: Angular系列/Angular2踩坑大全.md
================================================
---
title: Angular2踩坑大全
date: 2017/02/21 14:47:10
---
## Angular2的那些坑
1、同样的代码，引用Rxjs库的版本不对，就会导致在IE11下无法运行。(特定版本下重现)
正确的版本：[https://code.angularjs.org/2.0.0-beta.12/Rx.js](https://code.angularjs.org/2.0.0-beta.12/Rx.js)
2、在使用TypeScript编写Angular2代码时，一定要将注意 ``tsconfig.json``，其中 ``experimentalDecorators`` 和 ``emitDecoratorMetadata`` 必须要设置为true，否则无法使用依赖注入。
3、<router-outlet> 不能放在带有 *ngIf的容器内，否则会出现初始化时无法找到。
================================================
FILE: Angular系列/利用Angular实现多团队模块化SPA开发框架.md
================================================
---
title: 利用Angular实现多团队模块化SPA开发框架
date: 2017-11-23 11:11:11
---
# 0、前言
当一个公司有多个开发团队时，我们可能会遇到这样一些问题：
1. 技术选项杂乱，大家各玩各
2. 业务重复度高，各种通用api，登录注销，权限管理都需要重复实现（甚至一个团队都需要重复实现）
3. 业务壁垒，业务之间的互通变得比较麻烦
4. 部署方式复杂，多个域名（或IP地址）访问，给用户造成较大的记忆难度
5. 多套系统，风格难以统一
6. 等等...
当然，解决方式有不少。以下就来讲解下我们这边的一种解决方案。
# 1、思路
**Angualr**
`Angular`（注：非AngularJS） 是流行的前端 `MVVM` 框架之一，配合 `TypeScript`，非常适合用来做后台管理系统。由于我们曾今的一套 `Angularjs` 开发框架，我们继续选择 `Angular` 来进行实现，并尽可能的兼容 `AngularJS` 的模块。
**SPA**
选 `SPA` 还是多页？多余 `Mvvm` 来说，多页并不是标配。而且多页开发中，我们势必会关注更多的内容，包括通用header，footer，而不仅仅是页面的核心内容。
**模块化**
为什么要模块化呢？当有多个团队开发时（或者项目较大时），我们希望各个团队开发出来的东西都是 `模块`（不仅限于JS模块），这样可以让我们独立发布、更新、删除模块，也能让我们的关注点集中在特定模块下，提高开发效率和可维护性。
**平台化**
我们需要有一个运行平台（Website站点），允许在里面运行指定的模块。这样就可以实现单一入口，也容易实现通用逻辑，模块共享机制等等。
**兼容 AngularJS 模块**
在考虑将框架切换到 `Angular` 时，我们无可避免的会遇到如何兼容当前已有模块的问题。大致可选的方案如下：
1. 参考 `AngualrJS -> Angular` 官方升级指南，一步步将模块切换为 `Angular` 的实现。（工作量大，需要开发团队调整很多东西）
2. `iframe嵌入`，会有一定的体验差异，但对开发团队来说，基本无缝升级，也不需要做什么改动。（无疑，我们选择了这套方案）
**模块打包**
我们需要将单个的模块打包为资源包，进行更新。这样才能做到模块独立发布，及时生效。
**CSS冲突**
在大型 `SPA` 中，CSS冲突是很大的一个问题。我们期望通过技术手段，能够根据当前使用的模块，加载和卸载CSS。
**跨页面共享数据**
由于涉及到iframe兼容旧有模块，我们无可避免，需要考虑跨窗口的页面共享。
**公共模块**
当一个团队的模块较多时，就会有一些公共的东西被抽取出来，这个过程，框架是无法知道的，所以这个时候，我们就需要考虑支持公共模块。（模块之间也有依赖关系）
# 3、实现
基于以上的一些思考，我们首先需要实现一个基础的平台网站，这个没什么难度，直接用 `Angular` 实现即可。有了这一套东西，我们的登录注销，基本的菜单权限管理，也就实现了。
在这个基础之上，我们也能实现公共服务、公共组件了（封装一系列常用的玩意）。
## 如何模块化？如何打包？
**注意：此模块并非Angular本身的模块。** 我们通过约定，在 `modules/` 下的每一个目录都是一个业务模块。一个业务模块一般会包含，静态资源、CSS以及JS。根据这个思路，我们的打包策略就是：遍历 `modules/` 的所有目录，对每一个目录进行单独打包（webpack多entry打包+CSS抽取），另外使用 `gulp` 来处理相关的静态资源（在我看来，gulp才是构建工具，webpack是打包工具，所以混合使用，物尽其用）。
一般来说，`webpack` 会把所有相关依赖打包在一起，A、B 模块都依赖了 `@angular/core` 识别会重复打包，而且框架中，也已经打包了 `@angular` 相关组件。这个时候，常规的打包配置就不太合适了。那该如何做呢？
考虑到 `Angular` 也提供了 `CDN` 版本，所以我们将 `Angular` 的组件通过文件合并，作为全局全量访问，如 `ng.core`、`ng.common` 等。
既然这样，那我们打包的时候，就可以利用 `webpack` 的 `externals` 功能，把相关依赖替换为全局变量。
```js
externals: [{
'rxjs': 'Rx',
'@angular/common': 'ng.common',
'@angular/compiler': 'ng.compiler',
'@angular/core': 'ng.core',
'@angular/http': 'ng.http',
'@angular/platform-browser': 'ng.platformBrowser',
'@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
'@angular/router': 'ng.router',
'@angular/forms': 'ng.forms',
'@angular/animations': 'ng.animations'
}
```
这样处理之后，我们打包后的文件，也就不会有 `Angular` 框架代码了。
**注：这个对引入资源的方式也有一定要求，就不能直接引入内层资源了。**
## 如何动态加载模块
打包完成之后，这个时候就要考虑平台如何加载这些模块了（发布过程就不说了，放到指定位置即可）。
什么时候决定加载模块呢？其实是访问特定路由的时候，所以我们的顶级路由，会使用Promise方法来实现，如下：
```js
const loadModule = (moduleName) => {
return () => {
return ModuleLoaderService.load(moduleName);
};
};
const dynamicRoutes = [];
modules.forEach(item => {
dynamicRoutes.push({
path: item.path,
canActivate: [AuthGuard],
canActivateChild: [AuthGuard],
loadChildren: loadModule(item.module)
});
});
const appRoutes: Routes = [{
path: 'login', component: LoginComponent
}, {
path: 'logout', component: LogoutComponent
}, {
path: '', component: LayoutComponent, canActivate: [AuthGuard],
children: [
{ path: '', component: HomeComponent },
...dynamicRoutes,
{ path: '**', component: NotFoundComponent },
]
}];
```
我们把每个模块，按照 `umd` 的格式进行打包。然后再需要使用该模块的时候，使用动态构建 `script` 来运行脚本。
```js
load(moduleName, isDepModule = false): Promise {
let module = window['xxx'][moduleName];
if (module) {
return Promise.resolve(module);
}
return new Promise((resolve, reject) => {
let path = `${root}${moduleName}/app.js?rnd=${Math.random()}`;
this._loadCss(moduleName);
this.http.get(path)
.toPromise()
.then(res => {
let code = res.text();
this._DomEval(code);
return window['xxx'][moduleName];
})
.then(mod => {
window['xxx'][moduleName] = mod;
let AppModule = mod.AppModule;
// route change will call useModuleStyles function.
// this.useModuleStyles(moduleName, isDepModule);
resolve(AppModule);
})
.catch(err => {
console.error('Load module failed: ', err);
resolve(EmptyModule);
});
});
}
// 取自jQuery
_DomEval(code, doc?) {
doc = doc || document;
let script = doc.createElement('script');
script.text = code;
doc.head.appendChild(script).parentNode.removeChild(script);
}
```
CSS的动态加载相对比较简单，代码如下：
```js
_loadCss(moduleName: string): void {
let cssPath = `${root}${moduleName}/app.css?rnd=${Math.random()}`;
let link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', cssPath);
link.setAttribute('class', `xxx-module-style ${moduleName}`);
document.querySelector('head').appendChild(link);
}
```
为了能够在模块切换时卸载，还需要提供一个方法，供路由切换时使用：
```js
useModuleStyles(moduleName: string): void {
let xxxModuleStyles = [].slice.apply(document.querySelectorAll('.xxx-module-style'));
let moduleDeps = this._getModuleAndDeps(moduleName);
moduleDeps.push(moduleName);
xxxModuleStyles.forEach(link => {
let disabled = true;
for (let i = moduleDeps.length - 1; i >= 0; i--) {
if (link.className.indexOf(moduleDeps[i]) >= 0) {
disabled = false;
moduleDeps.splice(i, 1);
break;
}
}
link.disabled = disabled;
});
}
```
## 公共模块依赖
为了处理模块依赖，我们可以借鉴 AMD规范 以及使用 `requirejs` 作为加载器。当前在我的实现里，是自定义了一套加载器，后期应该会切换到 AMD 规范上去。
## 如何兼容 `AngularJS` 模块？
为了兼容 `AngularJS` 的模块，我们引入了 iframe， iframe会先加载一套曾今的 `AngularJS` 宿主，然后再这个宿主中，运行 `AngularJS` 模块。为了实现通信，我们需要两套平台程序中，都引入一个基于 `postMessage` 实现的跨窗口通信库（因为默认跨域，所以用postMessage实现），有了它之后，我们就可以很方便的两边通信了。
## AOT编译
按照 `Angular` 官方的 `Aot` 编译流程即可。
## 多Tab页
在后台系统中，多Tab页是比较常用了。但是多Tab页，在单页中使用，会有一定的性能风险，这个依据实际的情况，进行使用。实现多Tab页的核心就是如何动态加载组件以及如何获取到要加载的组件。
多Tab页面，实际就是一个 `Tabset` 组件，只是在 `tab-item` 的实现稍显特别一些，相关动态加载的源码：
```js
@ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer: ViewContainerRef;
constructor(
private elementRef: ElementRef,
private renderer: Renderer2,
private tabset: TabsetComponent,
private resolver: ComponentFactoryResolver,
private parentContexts: ChildrenOutletContexts
) {
}
public destroy() {
let el = this.elementRef.nativeElement as HTMLElement;
// tslint:disable-next-line:no-unused-expression
el.parentNode && (el.parentNode.removeChild(el));
}
private loadComponent(component: any) {
let context = this.parentContexts.getContext(PRIMARY_OUTLET);
let injector = ReflectiveInjector.fromResolvedProviders([], this.dynamicComponentContainer.injector);
const resolver = context.resolver || this.resolver;
let factory = resolver.resolveComponentFactory(component);
// let componentIns = factory.create(injector);
// this.dynamicComponentContainer.insert(componentIns.hostView);
this.dynamicComponentContainer.createComponent(factory);
}
```
**注意：要考虑组件卸载方法，如 destroy()**
为了获取到当前要渲染的组件，我们可以借用路由来抓取：
```js
this.router.events.subscribe(evt => {
if (evt instanceof NavigationEnd) {
let pageComponent;
let pageName;
try {
let nextRoute = this.route.children[0].children[0];
pageName = this.location.path();
pageComponent = nextRoute.component;
} catch (e) {
pageName = '$$notfound';
pageComponent = NotFoundComponent;
}
let idx = this.pageList.length + 1;
if (!this.pageList.find(x => x.name === pageName)) {
this.pageList.push({
header: `页面${idx}`,
comp: pageComponent,
name: pageName,
closable: true
});
}
setTimeout(() => {
this.selectedPage = pageName;
});
}
});
```
# 3、总结
以上就是大概的实现思路以及部分相关的细节。其他细节就需要根据实际的情况，进行酌情处理。
该思路并不仅限于 `Angular` 框架，使用 `Vue、React` 也可以做到类似的效果。同时，这套东西也比较适合中小企业的后台平台（不一定非要多团队，一个团队按模块开发也是不错的）。
如需要了解更多细节，可以参考：[ngx-modular-platform](https://github.com/hstarorg/ngx-modular-platform)，能给个 `star` 就更好了。
在此抛砖引玉，希望能集思广益，提炼出更好的方案。欢迎讨论和 `提Issue`, `发PR`。
================================================
FILE: Angular系列/跟我学Angular2（1-初体验）.md
================================================
---
title: 跟我学Angular2（1-初体验）
date: 2017/02/21 14:47:10
---
## 0、导言
Angular1作为最流行的前端MV*框架，给前端开发带来了极大的便利性。但是，仍然有许多不好的地方已经很难再改变了。Angular团队根据WEB发展的趋势和Angular1中积累的经验来开发了一个全新的Angular，也就是Angular2。
## 1、优势
Angular2做了很激进的变化，带来的成果也是显而易见的。
1. 极大的提高了性能
2. 更强大的模块化
3. 改进的依赖注入
4. 对Web Component友好
5. 原生移动支持 - iOS 和 Android
6. 服务端渲染，搜索引擎优化
## 2、工具链
由于Angular2面向未来，使用了太多还不被当前主流浏览器支持的技术，跑起来还真不是一个容易的事情，所以我们需要一个工具链：
systemjs - 通用模块加载器，支持AMD、CommonJS、ES6等各种格式的JS模块加载
es6-module-loader - ES6模块加载器，systemjs会自动加载这个模块
traceur - ES6转码器，将ES6代码转换为当前浏览器支持的ES5代码。systemjs会自动加载 这个模块。
## 3、Angular2 Hello world
### Step1、下载angular2
[https://angular.io/](https://angular.io/)是angular2的官网，我们需要通过npm进行下载angular2： npm install angular2 [https://www.npmjs.com/package/angular2](https://www.npmjs.com/package/angular2)。
### Step2、引入angular2
================================================
FILE: CSS3学习之路/CSS3入门之转换.md
================================================
---
title: CSS3入门之转换
date: 2017/02/21 14:47:10
---
## 1、CSS3 转换
### 1.1、转换是什么，能实现哪些效果？
转换是使元素改变形状、尺寸和位置的一种效果，主要能实现的效果如下：
1. 移动
2. 缩放
3. 转动
4. 拉长
5. 拉伸
### 1.2、浏览器兼容
CSS3的转换属性为 ``transform`` ，IE10+,Firefox,Chrome,Opera,Safari等现代浏览器支持transform属性，IE9需要-ms-前缀。
## 2、 2D 转换
准备工作：
### 2.1、translate() -- 移动
translate(/\*x坐标移动位移\*/ left, /\*y坐标移动位移\*/ top)
### 2.2、rotate() -- 旋转
rotate(/\*旋转角度\*/ deg)
### 2.3、scale() -- 缩放
scale(/\*宽度缩放比例\*/ widthScale, /\*高度缩放比例\*/ heightScale)
### 2.4、skew() -- 倾斜
skew(/\*X轴倾斜角度\*/ xDeg, /\*Y轴倾斜角度\*/ yDeg)
### 2.5、matrix() --矩阵
### 2.6 Transform方法
## 3、3D 转换
### 3.1、rotateX、rotateY
### 3.2、Transform方法
================================================
FILE: CSS3学习之路/CSS3入门之边框与背景.md
================================================
---
title: CSS3入门之边框与背景
date: 2017/02/21 14:47:10
---
## 1、前言
CSS3作为CSS的最新版本，在展示效果上有非常大的提升，接下来，我们就一起领略一下CSS3的风采吧。
## 2、CSS3边框
```
```
### 2.1、border-radius(用于设置圆角边框)
在CSS2时代，要想实现圆角边框，是一件非常麻烦的事情。一种实现方式是使用一个背景图片，为了实现伸缩效果，还需要至少3张图片拼凑，相当麻烦。另外一种实现方式是使用多个div重叠来实现圆角。
在CSS3中，有一个非常简单的属性，那就是border-radius。
语法： ``border-radius: 1-4 length|% / 1-4 length|%;``
```css
border-radius: 10px;
//等价于
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
```
background-origin属性则可以设置背景图片放置于哪个区域上（content-box,padding-box,border-box）
```html
```
### 3.3、多重背景
可以针对标签设置多个背景，用法如下：
```css
body
{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
```
================================================
FILE: Canvas学习札记/01_初识Canvas，绘制简单图形.md
================================================
---
title: 01_初识Canvas，绘制简单图形
date: 2017/02/21 14:47:10
---
## 0、关于Canvas
``
Hello
Hello World.
' }); ``` 现在我们再使用：`Hello World.
``` 然后，使用 `templateUrl` 属性进行关联 ```javascript angular.module('app', []) .component('finalComponent', { templateUrl: '/app/template.html' }); ``` 该代码可以达到 2.2 同样的效果，只是把模板内容拆分到独立文件中了。 **注意：模板路径可以是相对路径，也可以是绝对路径，需要注意路径的写法，否则会出现找不到模板** **注意2：如果使用 `gulp` 构建，可以考虑使用 `gulp-angular-embed-templates` 将独立的模板文件，打包到组件中。** ### 2.4、组件属性绑定 之前实现的组件，感觉太死板了，我想改下文字，都不好实现（你非要用js强制操作dom，我拿你也没办法，不过后果自负），这个时候，我们迫切的需要能给组件传递参数。 `Angular` 组件中，有多个参数传递方式，如下： * @ 单向绑定字符串（原值绑定） - 传什么就是什么，不做任何处理 * < 单向绑定变量（取scope的值绑定） - 传的值会先用 `$scope` 转换，把结果传递给组件 * = 双向绑定 - 组件内外变化都会通知另一方 #### 2.4.1 直接传递字符串参数 使用 `@` 进行单向字符串绑定 ```javascript angular.module('app', []) .component('finalComponent', { templateUrl: '/app/template.html' bindings: { name: '@' } }); ``` ```htmlHello {{$ctrl.name}}.
Hello {{$ctrl.name}}.
Hello {{$ctrl.name}}.
{{t.name}}
key = {{key}}
以上代码的变化在于，使用了scope: {name: '='}，该代码将父作用域的属性和指令的属性进行双向绑定。所以指令中文本框的值的变化，将会同步影响controller中key的变化。
**注意：在使用指令的时候，html代码，并不是和示例1.1一致了，如果是双向绑定，那么应该使用
key = {{key}}
点击指令生成的按钮，会执行controller的show方法，利用在scope: {showName: '&'}，可以将父级作用域的方法绑定到指令中。
**注意，一定要注意属性命令，在html中书写showName，那么在iAttrs中对应showname，只有在html中书写show-name,在会在iAttrs中对应showName。**
## 2、在controller中，拿到directive的作用域
### 2.1、拿到scope的元素，调用isolateScope获取scope
key = {{key}}
此代码中，利用$('#d1').isolateScope，拿到了该指令的scope，所以可以随时方式，该方式在多种指令中也有效。
**如果判断应该用isolateScope()还是scope()获取作用域？一个最简单的方式，用F12查看源码，找到该元素，然后查看class是ng-isolate-scope还是ng-scope**
## 3、 指令之间相互获取数据
### 3.1、通过directive依赖来共享数据
### 3.2、通过如2.1的方式获取数据
## 4、 其他Hacky的方式
1. 通过``$parent``访问父级作用域
2. 通过``$$prevSibling``访问该作用域的上一个兄弟作用域
3. 通过``$$nextSibling``访问该作用域的下一个兄弟作用域
4. 通过``$$childHead``访问儿子作用域的第一个
5. 通过``$$childTail``访问儿子作用域的最后一个
## 5、参考资料
1. [SHARING DATA BETWEEN CHILD AND PARENT DIRECTIVES AND SCOPES (IN ANGULARJS)](http://tech.blinemedical.com/sharing-data-between-child-and-parent-directives-and-scopes-in-angularjs/)
2. [directive和controller如何通信](http://www.cnblogs.com/bigdataZJ/p/AngularJS1.html)
================================================
FILE: AngularJS相关/[20140917]Angular：如何编写一个指令.md
================================================
---
title: Angular：如何编写一个指令
date: 2015/3/13 11:24:39
---
## Angular是什么？
AngularJS是一个用JavaScript编写的客户端MVC框架，它运行于Web浏览器，能够极大的帮助我们（开发者）编写模块化，单页面，Ajax风格的Web Applications。
PS：**AngularJS适合开发CRUD的SPA**
## Angular Directive是什么？
Angular Directive是构建在DOM元素（属性、标签名、注释和CSS类）上的标记，告诉AngularJS的HTML编译器($compile) 附加指定的行为到元素或者甚至变换这个元素和它的子集。
PS：**通过扩展HTML标签的方式提供可复用的web组件**
PS2：**指令的作用：提供语义化标签**
## 完整的Directive参数
var directiveModule=angular.module('Newkit.negHotkeys');
directiveModule.directive('negHotkeys',function(injectables){
var directiveDefineObject={
restrict:(string),
priority:(number),
template:(string),
templateUrl:(string),
replace:(bool),
transclude:(bool),
scope:(bool or object),
controller:(function),
require:(string),
link:(function)
compile:(function)
};
return directiveDefineObject;
});
##### 参数说明
- restrict：(string)指令的使用方式，可选值：元素[E]、属性[A]、样式类[C]、注释[M]，并且可以采用组合的方式使用，示例：'AE'
- priority：(number)优先级，描述了多个指令时，指令的执行顺序。数字越大，优先级越高，默认值0。
- template：(string)文本模板
- templateUrl：(string)模板文件地址，如果设置了该属性，那么将会忽略template的配置。
- replace：(bool)指示是否替换元素，如果设置为true,则替换，否则（设置为false或不设置）追加到元素内部
- transclude：(bool)是否将指令的子节点移动到一个新模板内部，如果在模板中指定了ng-transclude，那么会将元素原本的内容移动到新的模板内部，具体看示例二
- scope：(bool or object)设置作用域，如果设置为false[默认值]，则使用现有的作用域；如果设置为true，则创建一个新的作用域。设置为object时，设定作用域绑定策略
- controller：创建一个控制器，它会暴露一个API，实现在多个指令之间进行通信
- require：设置依赖的指令。不设置，则无依赖，示例：'?\^testDirective'，其中，?表示该指令可选，^表示需要遍历DOM树查找指令
- link：链接函数，function(scope,iElement,iAttrs){}，其中的i表示实例，所以在link中接收的是实例元素和实例元素属性
- compile：编译函数，function(tElement,tAttrs,transclude){}，其中t表示模板，所以在compile中使用的是模板元素。在编译过程中，可以返回preLink(链接前)，postLink(链接后)函数，compile函数只会调用一次，而link函数的调用次数等于things中的元素个数，所以多余共同的东西，那么最好放在compile函数中实现（出于效率考虑） **注：设置了compile属性之后，指令将忽略link属性，同时compile函数的返回值将作为link函数使用**
## Angular Directive 示例
### 示例一(简单指令)
```javascript
angular.module('app').directive('demo1',function(){
return {
restrict:'AE',/*标签或者属性*/
template:'Hello
',
replace:true
}
});
...
Hello World!
Hello World!
```
### 操作步骤分析
1. 定义一个模块app，并创建了一个指令demo1。
2. 设定该指令可采用元素的标签和属性申明，并设置了一个文本模板，同时设置了replace=true。
3. 在html中，采用标签如*<demo1>
angular.module('app.directive.demo2',[]).directive('demo2',function(){
return {
restrict:'E',
template:'This is Demo2
',
transclude:true
}
});
还会在这里。
This is Demo2
原始的内容，
还会在这里。
还会在这里。
This is Demo2
This is Demo3Link
',
link:function(scope,iElement,iAttrs){
iElement.html('good link
');
}
}
}).directive('demo3Compile',function(){
return {
restrict:'E',
template:'This is Demo3Compile
',
compile:function(tElement,tAttrs,transclude){
tElement.html('test demo3 compile
');
return function(scope,iElement,iAttrs){
//iElement.html('good compile
');
};
}
}
});
/*使用*/
good link
good link
test demo3 compile
test demo3 compile
');
return {
pre:function preLink(scope,iElement,iAttrs){
console.log('preLink');
},
post:function postLink(scope,iElement,iAttrs){
console.log('postLink');
}
};
}
```
link用于对替换后的元素进行操作，如果参数是iElement。
### 示例四（简单加法计算器）
```
/*代码在这里*/
angular.module('app.directive.demo4',[]).directive('demo4',function(){
return {
restrict:'E',
template:'',
replace:true,
link:function(scope,iElement,iAttrs){
scope.num1=0;
scope.num2=0;
scope.total=0;
scope.$watch('num1+num2',function(to,from){
scope.total=+scope.num1+(+scope.num2)
})
}
}
});
/*HTML在这里*/
Hello Angular2
My name is:Angular2: Hello, {{username}} ``` ```javascript import {Component} from 'angular2/core'; @Component({ selector: 'hello_world', //此处指明了组件的标记，我们就可以使用
Basic Info
' }) export class AboutComponent{ constructor() { } } ``` 要实现输入和输出呢？ ```javascript import {Component, Input, Output, EventEmitter} from 'angular2/core'; @Component({ selector: 'basic-info', template: `Basic Info, {{abc}}
` }) export class BasicInfo{ @Input('test') set value(val){ this.abc = val; this.callback.next([val]); } @Output('callback') callback = new EventEmitter(); constructor(){ this.abc = 'aaaa'; } } ``` 如何使用？ ```htmlBasic Info, {{abc}}
` }) export class BasicInfo{ @Input('test') set value(val){ this.abc = val; this.callback.next([val]); } @Output('callback') callback = new EventEmitter(); constructor(){ this.abc = 'aaaa'; } // 组件Init时创建 ngOnInit(){ console.log('basic info init.'); } } ``` **生命周期钩子（组件和指令都有的）** 1. ngOnInit //组件初始化，在Angular初始化数据绑定输入属性之后 2. ngOnChanges // 3. ngDoCheck 4. ngOnDestroy **生命周期钩子（组件特有的）** 1. ngAfterContentInit // Angular将外部内容放入视图后 2. ngAfterContentChecked // 在Angular检测放到视图内的外部内容的绑定后 3. ngAfterViewInit // Angular创建视图之后 4. ngAfterViewChecked //Angular检测了组件视图的绑定之后 **执行顺序** 1. ngOnChanges //绑定属性变化时 2. ngOnInit //在第一次ngOnChanges之后，初始化时 3. ngDoCheck //每次Angular变化检测时 4. ngAfterContentInit //组件内容初始化之后 5. ngAfterContentChecked //组件内容变化后 6. ngAfterViewInit //初始化组件视图和子视图之后 7. ngAfterViewChecked //在数组视图和子视图检查之后 8. ngOnDestroy 我们将组件设定上钩子函数如下： ```javascript import {Component, Input, Output, EventEmitter} from 'angular2/core'; @Component({ selector: 'basic-info', template: `Basic Info, {{abc}}
` }) export class BasicInfo{ @Input('test') set value(val){ this.abc = val; this.callback.next([val]); } @Output('callback') callback = new EventEmitter(); constructor(){ this.abc = 'aaaa'; } ngOnInit(){ console.log('basic info init.'); } ngDoCheck(){ console.log('basic info do check.'); } ngOnChanges(){ console.log('basic info changes.'); } ngOnDestroy(){ console.log('basic info destroy'); } ngAfterContentInit(){ console.log('basic info after content init'); } ngAfterContentChecked(){ console.log('basic info after content checked'); } ngAfterViewInit(){ console.log('basic info after view init'); } ngAfterViewChecked(){ console.log('basic info after view checked'); } } ``` 控制台打印的结果是： ```html basic info changes. test.component.js:23 basic info init. test.component.js:26 basic info do check. test.component.js:35 basic info after content init test.component.js:38 basic info after content checked test.component.js:41 basic info after view init test.component.js:44 basic info after view checked test.component.js:26 basic info do check. test.component.js:38 basic info after content checked test.component.js:44 basic info after view checked test.component.js:26 basic info do check. test.component.js:38 basic info after content checked test.component.js:44 basic info after view checked test.component.js:26 basic info do check. test.component.js:38 basic info after content checked test.component.js:44 basic info after view checked ``` ================================================ FILE: Angular系列/03_Angular2的那些Decorator.md ================================================ --- title: 03_Angular2的那些Decorator date: 2017/02/21 14:47:10 --- ## 0、Decorator ``Decorator`` 是ECMAScript中建议的标准，使得我们可以在设计时对类和属性进行注解和修改。 ## 1、Angular2的Decorator 在Angular2的早期版本（使用AtScript）中，我们是使用Annotation（注解），它以一个声明的方式将元数据添加到代码中。 在后来迁移到TypeScript的时候，我们可以使用 Decorator 和 Annotation 。作为使用者来说，使用 Decorator 和 Annotation 几乎是一样的，唯一的区别是我们没有去控制 Annotation 如何将元数据添加到我们的代码中，而 Decorator 是对 这些 Annotation 的最终实现。 从长远看，我们更应该多关注 Decorator ，因为它才是真正的标准建议。 ## 2、Angular2的那些Decorator ### 2.1、In angular2/core #### 2.1.1、Component ``Component`` 用于声明可重用的UI构建模块（组件），每个 Angular component都要求有一个 ``@Component`` 注解，它指定了组件何时被实例化，哪些属性和 hostListeners 被绑定。 当组件实现（implements）了一些生命周期钩子（lifecycle-hooks），那么将在特定的时间点访问这些钩子的回调函数。 **如何使用** ```javascript @Component({ selector: 'demo', // 配置选择器 inputs: [], outputs: [], properties: [], events: [], host: {}, providers: [], // 设定所依赖的Providers（ng1中的service，provider，factory） exportAs: '', moduleId: '', //设定模块ID viewProviders: [], queries: {}, //changeDetection templateUrl : '', // 指定模板文件URL，和template冲突 template: 'Hello {{name}}!', //指定模板内容，和templateUrl冲突 styleUrls: [], // 设定组件依赖的样式表文件 styles : [], //设定组件依赖的样式 directives: [], //设定所依赖的Directives（ng1中的directives） pipes: [] //设定所依赖的Pipes（ng1中的filter） //encapsulation }) export class Demo { private name: string = 'World'; } ``` **注：从继承关系来看，Component extends Directive。** #### 2.1.2、Directive ``Directive`` 允许你在DOM元素上附加行为。如果指令带有内嵌视图，那么就成为了组件。 指令同样也有生命周期钩子。使用方式和 Component 雷同。 指令允许多种注入方式来实例化： 1、无注入 -- 该指令没有外部依赖 ```javascript // 空构造，无注入 @Directive({ selector: '[my-directive]' }) class MyDirective { constructor() { } } ``` 2、组件级别的注入 -- 该指令依赖一些外部服务 ```javascript import {User} from 'xxx'; @Directive({ selector: '[my-directive]' }) class MyDirective { constructor(user: User) { //依赖外部服务 } } ``` 3、注入当前元素的其它指令 --该指令依赖当前元素上的其他指令，搭配其他指令一起使用 ```javascript import {User} from 'xxx'; @Directive({ selector: '[my-directive]' }) class MyDirective { constructor(depDirective: DepDirective) { //依赖当前元素上的其他指令 } } ``` ```htmlSettings: ...
`})
@CanActivate(checkIfWeHavePermission)
class ControlPanelCmp {
}
```
#### 2.2.2、RouteConfig
``RouteConfig`` 用于我们配置路由。
使用如下：
```
@Component({
selector: 'dojo-app',
moduleId: module.id,
templateUrl: 'app.html',
styleUrls: ['app.css'],
directives: [ROUTER_DIRECTIVES, HeaderComponent]
})
@RouteConfig([
{path: '/', name: 'Home', component: HomeComponent},
{path: '/about', name: 'About', component: AboutComponent}
])
export class AppComponent{
constructor() {
}
}
```
## 3、参考
1. [https://angular.io/docs/ts/latest/api/index.html#!?apiType=Decorator](https://angular.io/docs/ts/latest/api/index.html#!?apiType=Decorator)
2. [https://angular.io/docs/ts/latest/api/index.html#!?apiFilter=metadata](https://angular.io/docs/ts/latest/api/index.html#!?apiFilter=metadata)
================================================
FILE: Angular系列/04_Angular2指令简析.md
================================================
---
title: 04_Angular2指令简析
date: 2017/02/21 14:47:10
---
## 0、Angular2指令
在Angular1中，就已经有了指令的概念。Angular1中的指令用于实现可复用UI部件，也用于操作dom元素。
那么在Angular2中的指令是一样的东西么？
Angular2中有组件的概念，指令这个东西就变得更加纯粹。
Angular2的指令有三种：
- 组件
- 属性指令
- 结构指令
组件是有模板的指令，是指令的中一个另类，因为它使用@Component来装饰，而不是@Directive。
属性指令用于改变现有元素的展现和行为，使用的时候它们看起来像是正常的HTML属性，所以称之为属性指令。如ngModel指令。
结构指令通过添加、删除和替换DOM树中的元素来改变布局，由于可以更改DOM结构，所以称之为结构指令。如ngIf，ngSwitch。
由于Angular2的API好不够稳定，书写该文时，采用的是Angular2 rc1（@angular rc.1）版本，其他版本请自行测试。
## 1、属性指令
接着，我们就一步步来实现一个属性指令 dynamicColor 。
首先，我们需要创建一个ts文件，然后把指令的骨架搭建起来。
```typescript
import {Directive} from '@angular/core';
@Directive({
selector: '[dynamicColor]'
})
export class DynamicColorDirective{
constructor(){
}
}
```
以上代码中，我们创建了一个dynamicColor指令。
接下来，我们来实现具体的功能，可以设置元素的背景色和前景色，并能实现事件通知。
要实现动态背景色和前景色，那我们需要额外附加两个属性bgColor和color。
要想在指令中获取这两个属性值，那么我们可以通过@Input方式或者是inputs属性，代码如下：
```typescript
import {Directive, Input} from '@angular/core';
@Directive({
selector: '[dynamicColor]'
})
export class DynamicColorDirective{
@Input()
private bgColor: string;
@Input()
private color: string;
constructor(){
}
}
```
或者是：
```typescript
import {Directive, Input} from '@angular/core';
@Directive({
selector: '[dynamicColor]',
//注意，在之前的版本中，使用properties属性，而且，当前还可以使用。
inputs: [
'bgColor: bgColor', //字符串以冒号隔开，前者是DynamicColorDirective的属性，后者的html元素的属性
'color: color'
]
})
export class DynamicColorDirective{
// @Input()
private bgColor: string;
// @Input()
private color: string;
constructor(){
}
}
```
那么html中又应该如何传递值给指令呢？
```html
Hi!
```
**注意：在html元素的属性上，我们可以有两种写法。一种是直接书写属性，此时会把属性值原样传递给指令。第二种是使用[属性]，此时属性值应该是表达式（可以使用变量，判断等语句），传递给指令的是表达式的结果。**
我们又如何在后端查看这两个值呢？
直接在constructor中console？明确的说是不行的，因为constructor的代码会先于绑定执行。
这个时候，我们就需要借助指令的生命周期钩子。
指令的生命周期钩子有如下几个：
1. ngOnInit --初始化时
2. ngOnChanges -- 属性绑定之时（会有一次inputs属性绑定先于初始化）
3. ngDoCheck -- 执行属性检查时
4. ngOnDestroy -- 指令释放时
了解了生命周期钩子，我们就可以通过ngOnInit来查看绑定好的属性值了。
```typescript
import {Directive, Input, OnInit} from '@angular/core';
@Directive({
selector: '[dynamicColor]',
inputs: [
'bgColor: bgColor', //字符串以冒号隔开，前者是DynamicColorDirective的属性，后者的html元素的属性
'color: color'
]
})
export class DynamicColorDirective implements OnInit{
// @Input()
private bgColor: string;
// @Input()
private color: string;
constructor(){
}
ngOnInit(){
console.log('bgColor', this.bgColor);
console.log('color', this.color);
}
}
```
接下来，我们需要设置元素的background color和color样式，那么我们必须要拿到这个而元素的引用, 并在初始化之后进行绑定。
```typescript
import {Directive, Input, OnInit, ElementRef} from '@angular/core';
@Directive({
selector: '[dynamicColor]',
inputs: [
'bgColor: bgColor', //字符串以冒号隔开，前者是DynamicColorDirective的属性，后者的html元素的属性
'color: color'
]
})
export class DynamicColorDirective implements OnInit{
private nativeElement: any;
// @Input()
private bgColor: string;
// @Input()
private color: string;
constructor(el: ElementRef){
this.nativeElement = el.nativeElement;
}
private _setElementStyle(): void{
this.nativeElement.style.backgroundColor = this.bgColor;
this.nativeElement.style.color = this.color;
}
ngOnInit(){
console.log('bgColor', this.bgColor);
console.log('color', this.color);
this._setElementStyle();
}
}
```
当从元素上绑定的属性变化时，又应该从哪里获取到变更呢？这就需要借助生命周期里面的OnChanges函数，代码如下：
```typescript
import {Directive, Input, ElementRef, OnInit, OnChanges} from '@angular/core';
@Directive({
selector: '[dynamicColor]',
inputs: [
'bgColor: bgColor', //字符串以冒号隔开，前者是DynamicColorDirective的属性，后者的html元素的属性
'color: color'
]
})
export class DynamicColorDirective implements OnInit, OnChanges{
private nativeElement: any;
// @Input()
private bgColor: string;
// @Input()
private color: string;
constructor(el: ElementRef){
this.nativeElement = el.nativeElement;
}
private _setElementStyle(): void{
this.nativeElement.style.backgroundColor = this.bgColor;
this.nativeElement.style.color = this.color;
}
ngOnInit(){
console.log('bgColor', this.bgColor);
console.log('color', this.color);
this._setElementStyle();
}
ngOnChanges(){
console.log('bgColor-change', this.bgColor);
console.log('color-change', this.color);
this._setElementStyle();
}
}
```
由于每次变化都会触发OnChanges，那么为了提高性能，我们可以在这里加入一个节流函数。
```typescript
private _setElementStyle(): void {
clearTimeout(this.timeoutId);
this.timeoutId = setTimeout(() => {
this.nativeElement.style.backgroundColor = this.bgColor;
this.nativeElement.style.color = this.color;
}, 500);
}
```
有了节流函数，我们就不太确定到底执行了几次更新操作了。这个时候，我们可以加入事件通知。这就涉及到指令的@Output了。
```typescript
@Output()
private updated: EventEmitter
Hi!
```
至此，我们这个指令就已经完成了，所有代码如下：
```typescript
//dynamicColor.directive.ts
import {Directive, Input, Output, ElementRef, EventEmitter, OnInit, OnChanges} from '@angular/core';
@Directive({
selector: '[dynamicColor]',
inputs: [
'bgColor: bgColor', //字符串以冒号隔开，前者是DynamicColorDirective的属性，后者的html元素的属性
'color: color'
],
outputs: [
'updated: updated'
]
})
export class DynamicColorDirective implements OnInit, OnChanges {
private nativeElement: any;
private timeoutId: any;
// @Input()
private bgColor: string;
// @Input()
private color: string;
// @Output()
private updated: EventEmitterDynamic Color Directive
Hi!
```
```typescript
//test.component.ts
export class TestComponent{
private testBgColor: string = 'blue';
private testColor: string = 'red';
constructor(){
}
private test(data){
console.log('data', 'my', data);
}
private notify(data){
console.log('notify = ', data);
}
}
```
*思考一下？我们还有没有更简单的方式实现以上的效果呢？*
```typescript
import {Directive, EventEmitter} from '@angular/core';
@Directive({
selector: '[dynamicColor]',
inputs: [
'bgColor: bgColor', //字符串以冒号隔开，前者是DynamicColorDirective的属性，后者的html元素的属性
'color: color'
],
outputs: [
'updated: updated'
],
host: {
'[style.backgroundColor]': 'bgColor',
'[style.color]': 'color'
}
})
export class DynamicColorDirective {
private bgColor: string;
private color: string;
private updated: EventEmitterTodo List
No todos.
- {{todo.name}} - {{todo.description}}
Name:
Description:
```
功能做好了，我们得给它来点样式美化。
此时我们仅仅需要实现一点样式：
```css
.todo-list{
margin: 0;
padding: 0;
}
.todo-list li{
list-style: none;
border: 1px solid red;
}
```
然后在组件装饰器中申明就可以了：
```typescript
@Component({
selector: 'todo-list',
template: require('./todo-list.component.html'),
styles : [require('./todo-list.component.css')]
})
```
至此，一个简单的可以添加todo的todo-list就已经完成了。
**注意：注入@Input，@Output之类的和Directive都是一样的，此处就不再演示了。**
================================================
FILE: Angular系列/06_Angular2管道（Pipe）简析.md
================================================
---
title: 06_Angular2管道（Pipe）简析
date: 2017/02/21 14:47:10
---
## 0、Angular2 Pipe
**注：由于Angular2的API好不够稳定，书写该文时，采用的是Angular2 rc1（@angular rc.1）版本，其他版本请自行测试。**
对于 ``Pipe``，其实我们并不陌生。在angular1中，它被称之为 ``filter``。
``Pipe``用于对数据进行格式化处理，就好比管道，一个进一头出，中间过程就是管道的处理逻辑。
Angular2中的 ``Pipe`` 本质上是包含特定方法的类。
## 1、编写一个简单Pipe
``Pipe`` 相对于指令和组件来说，非常简单，我们仅仅需要编写一个类：
```typescript
class EmptyToZero{
}
```
实现特定的方法：
```typescript
exprt class EmptyToZero{
transform(v: any, args: any[]){
if(v === undefined || v === null || v === ''){
return 0;
}
return v;
}
}
```
使用 ``Pipe`` 装饰，请设定名称:
```typescript
import {Pipe} from '@angular/core';
@Pipe({ name: 'empty2zero' })
export class EmptyToZero {
transform(v: any, args: any[]) {
if (v === undefined || v === null || v === '') {
return 0;
}
return v;
}
}
```
如何使用？
```html
{{ value | empty2zero}}
```
当然前提是要在Component中申明要使用的Pipe：
```typescript
@Component({
selector: 'todo-list',
template: require('./todo-list.component.html'),
styles : [require('./todo-list.component.css')],
pipes:[EmptyToZero]
})
```
## 2、有状态的Pipe
在使用 ``Pipe`` 装饰器的时候，我们可以提供两个参数：
```typescript
@Pipe({
name: 'empty2zero', //string类型，必填项，指定pipe的名称
pure: true //boolean类型，可选项，默认为true，设定为true时，表示无状态管道。无论是输入或者是什么参数的改变都会触发重新计算结果。
})
```
有状态的 ``Pipe`` 可以收到一个Promise对象或者检测输入和自动订阅输入，最终返回一个可触发的值。
要使用有状态的管道，必须将pure属性设置为false。
比较典型的有状态异步管道如下：
```typescript
import {Pipe} from 'angular2/core';
@Pipe({
name: 'fetch',
pure: false
})
export class FetchJsonPipe {
private fetchedValue:any;
private fetchPromise:PromiseDescription:
Angular2 Router Test
Home AboutAbout
Go to Home Go to About User Go to About Me我是文本阴影
我是文本阴影
我是文本阴影
我是文本阴影
我是文本阴影
我是文本阴影
**该属性兼容IE10+以及所有现代浏览器** ### 1.2、word-break文本换行 语法： ``word-break: normal|break-all|keep-all;`` normal:默认换行；break-all:允许在单词内换行；keep-all:只能在半角空格或连字符处换行 示例：Nice to meet you. good mor-ning.
Nice to meet you. good mor-ning.
Nice to meet you. good mor-ning.
Nice to meet you. good mor-ning.
### 1.3、text-overflow修剪文本
语法：``text-overflow: clip|ellipsis|string;``
示例：
**注意：使用text-overflow的时候，需要与overflow:hidden;white-space:nowrap;协同使用**
## 2、CSS3字体
在CSS3之前，必须使用已经在用户计算机上安装好的字体，给Web设计带来很大的局限性。现在，通过CSS3,Web设计师可以使用他们喜欢的任意字体。
### 2.1、@font-face引入网络字体
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。
不兼容IE8，IE8-。
示例：
自定义字体演示
自定义字体演示
自定义字体演示
自定义字体演示
除此之外，在@font-face中，还可以设置多种字体描述符，如：
| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。规定字体的名称。 |
| src | URL | 必需。定义字体文件的 URL。 |
| font-stretch |
|
可选。定义如何拉伸字体。默认是 "normal"。 |
| font-style |
|
可选。定义字体的样式。默认是 "normal"。 |
| font-weight |
|
可选。定义字体的粗细。默认是 "normal"。 |
| unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
右移20px
下移20px
左移20px，下移20px
右移20px
下移20px
左移20px，下移20px
旋转135度
旋转135度
缩放到0.5倍
宽度缩放到1.5倍，高度缩放到0.25倍
缩放到0.5倍
宽度缩放到1.5倍，高度缩放到0.25倍
X轴翻转30度
X轴翻转30度，Y轴翻转10度
X轴翻转30度
X轴翻转30度，Y轴翻转10度
旋转30度
旋转30度
| 函数 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
| 函数 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate3d(x,y,z) | 定义 3D 转化。 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 定义 3D 转换元素的透视视图。 |
演示圆角边框
演示圆角边框
**兼容性说明：** IE9+，Chrome,FF,Safari,Oprea
```
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}
```
### 2.2、box-shadow(用于添加边框阴影)
语法： ``box-shadow: h-shadow v-shadow blur spread color inset;``,其中h-shadow和v-shadow是必须设置，允许负值。【参数说明：水平阴影的位置，垂直阴影的位置，模糊距离，阴影的尺寸，阴影的颜色，外部引用(outset)改为内部阴影】
```html
演示圆角边框
简单阴影
简单阴影
简单阴影
带模糊效果的阴影
带模糊效果的阴影
带模糊效果指定尺寸的阴影
带模糊效果指定尺寸的阴影
内部阴影
内部阴影
```
**兼容性说明：** IE9+，Chrome,FF,Safari,Oprea
### 2.3、border-image(CSS3边框图片)
border-image是简写属性，全部是：
```css
border-image-source //背景图片源
border-image-slice //图片边框内偏移
border-image-width //图片边框的宽度
border-image-outset //边框图像区域超出边框的量
border-image-repeat //边框是否适应平铺(repeated)、铺满(rounded)、拉伸(stretched)
```
```html
简单图片边框
简单图片边框
完全设置的图片边框
完全设置的图片边框
```
**兼容性说明：** Chrome,FF,Safari,Oprea
```
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
```
## 3、CSS3背景
### 整体兼容性
以下CSS背景的特性，全部支持IE9+,FF,Chrome,Safari,Oprea
### 3.1、background-size(用于规定背景图片的尺寸)
在以前的CSS中，背景图片的大小，是由图片本身的大小决定的。在CSS3中，有一个简单的CSS样式可以设置背景图片的大小，允许我们在不同的环境中重复使用背景图片。可以以像素或百分比规定尺寸。
```html
简单设置背景图大小
```
### 3.2、background-origin(规定背景图片的定位区域)
盒子模型示意图：
background-origin属性则可以设置背景图片放置于哪个区域上（content-box,padding-box,border-box）
```html
```
### 3.3、多重背景
可以针对标签设置多个背景，用法如下：
```css
body
{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
```
================================================
FILE: Canvas学习札记/01_初识Canvas，绘制简单图形.md
================================================
---
title: 01_初识Canvas，绘制简单图形
date: 2017/02/21 14:47:10
---
## 0、关于Canvas
``