从角度1的背景中进入角度2的思考

Question

假设我已经习惯于开发带有角1的客户端SPA，但现在我想将其更改为角2。

在做出改变时，哪些人将是需要考虑的重要范例？

以下是一些可能有助于你解答的问题：

• 与1相比，角2建筑设计的主要区别是什么？
• 我该停止/开始做什么？

Answer 1

建筑设计的主要区别可能是单向数据流和对组件的关注。

如果您想要更容易的转换，就开始使用带有类型记录类的controllerAs作为控制器。开始学习RxJS的基础知识，Ng2是建立在它之上的。

Answer 2

体系结构的主要区别是单向数据流，如上所述，我还想补充几点：

基于组件的UI

Angular正在采用基于组件的UI，这是开发人员可能会熟悉的概念。在某种意义上，角1.x控制器和指令模糊为新的角2分量。

这意味着在角2中没有控制器，也没有指令。相反，组件有一个选择器，它对应于组件将要表示的html标记，以及一个@View，用于指定要填充的组件的HTML模板。

下面的示例使用TypeScript，这是ES6 javascript标准的超集。Range2目前正在TypeScript中开发，但将与ES5和ES6 javascript标准兼容。

角1.x：

angular.module(‘example’)
.controller(‘ExampleCtrl’, function() {
});

角2.0：

import {Component} from 'angular2/core';
@Component({
  selector: 'example',
  templateUrl: './components/example/example.html'
})   
export class App {}

具有事件语法的用户输入

角应用程序现在通过使用事件语法来响应用户输入。事件语法由括号(事件)包围的动作表示。

还可以使用#var语法将元素引用作为局部变量提供给模板的其他部分。

角1.x：

<input ng-model=”thing.item” type=”text”>
<button ng-click=”thing.submit(item)” type=”submit”>

角2.0：

<input #item type=”text”>
<button (click)=”submit(item)” type=”submit”>

告别$scope

尽管“$scope”已经被“控制器作为”取代为一个最佳实践，从角度1.2，它仍然停留在许多教程。角2最终杀死它，因为属性被绑定到组件上。

角1.x：

angular.module(‘example’)
.controller(‘ExampleCtrl’, function($scope) {
        $scope.name = “John Smith”;
});

角2.0：

@Component({
selector: 'example',
templateUrl: './components/example/example.html'
})
export class App{
    constructor() {
    this.name = “John Smith”;
    }
}

更好的性能

随着超快的变化检测和不变的数据结构，角2承诺是更快和更有效的内存。此外，由Flux推广的单向数据流的引入，有助于缓解使用角应用程序调试性能问题时的一些担忧。

这也意味着不再有双向数据绑定，这是角1.x中流行的特性。不用担心，即使ng模型已经不复存在，同样的概念也可以用同样的角度2来解决。