Question

如何评价 Angular 2 发布 Beta 版本

Answer 1

前者的话语义上像是问 Angular 2.0 beta0 相对于 Angular 2.0 alpha 55 有什么改进（这个 Change Log 里面还真没写，在 MileStone 里后几个 alpha 都算到了 beta 里。。所以我也不知道。。），后者问的是 Angular 2.0 这个框架进入到 Beta 版本的重大历史意义。。

---（虽然不是 Markdown 并不会变成实线）

至于框架细节上，相关的文档和教程已经不少了，所以这里主要说一些观念上的理解。。

0. 作为前端框架， Angular 2.0 太重？

是，也不是。

这个问题在 1.x 的时候就经常被讨论，也尝尝被一些人作为 Angular 的黑点。实际上，Angular 的一个基本理念就是提供一个大一统的前端解决方案，涵盖 MVC or MVVM or MVW 的每一个层面的每一个功能点，当然，并不是说每个环节 Angular 自己都是做的最好的，但用户基本都具有选择权，可以选择别的库或框架来替代（ui-router、restangular 等）。为此，本身 Angular 的库文件也是模块化的（不需要的可以不引入）。

而可能其他一些框架，更专注于某个特定层面（比如 View 或者 ViewModel），当需要在别的层面进行扩展时，就需要在相应的生态系统中寻找别的解决方案，为此可以保证自己的足够轻量。

就策略上来说，两种选择本身都无可厚非，但可能到具体实践中，Angular 中的很大一部分都是不会用到的（但是依然出现在文档中），所以导致了一种 Angular 十分臃肿不堪的观念。

1. Angular 2.0 完全重写了 Angular，相对于 1.x 的学习曲线太陡？

是，也不是。（好像快成废话了）

Angular 1.x 有一个奇怪的现象，就是一坨人觉得它易于上手，另一坨人觉得它过于复杂。其实确实说的都没有错，因为 1.x 上手需要用到的部分很少，知道有个 Controller 和 Scope 就已经可以做出很多应用了，所以用户水平严重分化（从能用 ngRepeat 和能造 ngRepeat 不等）。对于非科班出身的童鞋，要面对 compile、link、inject 等等名词可能有些力不从心。

因为 Angular 2.0 里去掉了 Scope 和 Controller，所以，Angular 2.0 真的推倒了 Angular 1.x 中的一切吗？我们来看一个简单的例子。

Angular 1.x 中有一个 Controller 的概念，Controller 虽然叫 Controller，但远没有后端框架中的 Controller 那么复杂的作用，Angular 1.x 中的 Controller，说得不好听一下，就仅仅是一个初始化器（Initializer），进行相关的数据绑定（包括字段和方法）而已，一般的初学者用法如下：

// Angular 1.x with $scope in ES5
myApp.controller('myController', ['$scope', 'itemService', function($scope, itemService) {
$scope.currentItem = itemService.current();
$scope.items = itemService.all();
$scope.add = function(item) {
itemService.add(item);
};
}]);

可以看到，上面的代码中，Controller 干的事情仅仅就是把相应的数据或者方法绑定到 ViewModel 中。随着 Angular 1.2 中 Controller As 语法的到来，就不再需要 $scope 了：

// Angular 1.x with 'controller as' in ES5
myApp.controller('myController', ['itemService', function(itemService) {
this.currentItem = itemService.current();
this.items = itemService.all();
this.add = function(item) {
itemService.add(item);
};
}]);

这样，就可以抛弃 $scope 了（其实事件传递还是有可能用到），很多人不知道 Angular 1.x 早就不需要（甚至可以说不应该）用 $scope，所以觉得 Angular 2.0 没有 $scope 还能算 Angular 吗？

接着（不过这里 Controller 看似多了一个职能，作为闭包），看到 this 之后，我们不妨思考一下，这些属性到底是对象独有的还是类（严格地说JavaScript中叫原型）共有的呢？通常字段都是前者、方法都是后者，即只要是这个 Controller，都要有这些方法。这样，我们就可以考虑，把不变性的内容（比如基本上所有的方法）作为原型的属性而非对象的属性：

// Angular 1.x with 'controller as' in ES5
myApp.controller('myController', ['itemService', ItemController]);

function ItemController(itemService) {
this.currentItem = itemService.current();
this.items = itemService.all();
}

ItemController.protoype.add = function(item) {
itemService.add(item);
};

这样就避免了把一坨方法绑定也挤到 Controller 里，也可以更清晰的看出 Controller 的初始化作用。（this 会顺着原型链查找的，但是可能很多用 Angular 的人并没有清晰的看到 Angular 仍然是普通的 JavaScript。）然后，随着 ES6 的流行，我们可以很轻松的转换成 ES6 的版本：

// Angular 1.x with 'controller as' in ES6
myApp.controller('myController', ['itemService', ItemController]);

class ItemController {
constructor(itemService) {
this.itemService = itemService;
this.currentItem = itemService.current();
this.items = itemService.all();
}
add(item) {
this.itemService.add(item);
}
}

所以，因为 Controller 的作用就只是初始化，在有了类（class）的情况下，就完全可以被同化到 class 的 constructor 里面了。如果开发人员喜欢静态类型的话，还可以使用 TypeScript，也就相当于在 ES6 的基础上增加了一个静态的类型系统：

// Angular 1.x with 'controller as' in TypeScript
myApp.controller('myController', ['itemService', ItemController]);

class ItemController {
private currentItem: Item;
private items: Item[];
constructor(private itemService: ItemService) {
this.currentItem = itemService.current();
this.items = itemService.all();
}
add(item: Item): void {
this.itemService.add(item);
}
}

其中，用到了 TypeScript 的一个语法糖，即在构造函数的参数名前加上可访问性修饰符（private、public）可以直接添加为实例的属性。

如果我们有组件化的需要，可以把使用 Controller 的地方都写成 Directive，避免 ngController 的滥用：

// Angular 1.x with 'directive' in TypeScript
myApp.directive('some-selector', () => ({
restrict: 'E',
controller: ['itemService', ItemController]
}));

class ItemController {
private currentItem: Item;
private items: Item[];
constructor(private itemService: ItemService) {
this.currentItem = itemService.current();
this.items = itemService.all();
}
add(item: Item): void {
this.itemService.add(item);
}
}

特别提醒，到这里都还是普普通通的 Angular 1.x 哦。（很明显的可以看出，Controller 就是 Directive 的一个方法。）

最后，我们再看看 Angular 2 中的写法：

// Angular 2 with 'component' in TypeScript
@Component({
selector: 'some-selector'
})
class ItemController {
private currentItem: Item;
private items: Item[];
constructor(private itemService: ItemService) {
this.currentItem = itemService.current();
this.items = itemService.all();
}
add(item: Item): void {
this.itemService.add(item);
}
}

基本上唯一的区别就是，由于 TypeScript 提供了 Metadata 支持，Angular 2 可以直接按类型注入（当然也依然可以使用按名注入，如果有特殊需求的话），不需要再手动键入依赖名称了。（@符号是 ES7 的 Decorator，并不是 Angular 或 TypeScript 的私有语法。）

另外，由于本身的组件化要求，Angular 2.0 的 Component 自身就可以构成一个连通树，用来相互通信，所以也不需要 1.x 中借助 $scope 来进行通信了，所以 Scope 这个概念被废弃了。Controller 作为一个进行初始化的方法，直接被类的构造函数取代，不再需要一个专门具名函数了，所以 Controller 这个概念也被废弃了。

所以，在 Angular 2.0 里，真的因为没有 Scope 没有 Controller 就是全部推倒重写了吗？并没有。Angular 2.0 仍然大量的继承了 1.x 的思想（好的那一部分），或者说，Angular 2.0 是 Angular 1.x 最佳实践的延伸，学习成本基本都在 Angular 1.x 的最佳实践上，但是如果本身在 Angular 1.x 就只会基本的 ngRepeat 使用的话，那是完全没有学会 Angular 1.x，而并不是在学会了 Angular 1.x 的情况下学不会 Angular 2.0。

（当然，侧面说明了 Angular 1.x 的学习曲线真心陡。。）