几个月前,我决定研究Angular.当我做一些进步并使用它创建一些应用程序时,我意识到Angular 2处于开发人员预览中,因此它将在它发布之前的时间问题.因为Angular 2不会与Angular 1兼容,并且有很多变化,问题是,继续使用Angular 1.x开发还是开始开发Angular 2会更好吗？

事实上,我们并不总是必须使用市场上的最新版本或最新语言,但在这种情况下,应用程序仍然很小,所以我可以毫无问题地进行更改.

1> garrettmac..：

---

让我先说一下,我假设你,所有将要阅读它的人已经很容易使用Angular 1(现在称为AngularJS,而不是简单的Angular用于新版本).话虽如此,让我们来看看Angular 2+的一些补充和关键差异.

他们增加了一个角度cli.

您可以通过运行来启动新项目ng new [app name].您可以通过ng serve 在此处了解更多信息来为您的项目提供服务:https://github.com/angular/angular-cli

您的角度代码是用ES6 Typescript编写的,它在运行时编译为浏览器中的Javascript.

为了全面掌握这一点,我建议查看我答案底部的一些资源列表.

项目结构

在基本结构中,您将拥有一个app/ts文件夹,您将在其中完成大部分工作,并且app/js您将在app/js具有.js.map扩展名的文件夹文件中找到该文件夹.他们将".ts"文件"映射"到您的浏览器进行调试,因为您的浏览器无法读取本机打字稿.

更新:它已经过时了.在大多数情况下,项目结构发生了一些变化,如果您使用的是角度cli,那么您将在该src/app/文件夹中工作 .在初学者项目中,您将拥有以下内容.

app.component.css 
app.component.html
app.component.spec.ts
app.component.ts 
app.module.ts
index.ts

app.component.css:你应该使用特定的CSS文件component.html

app.component.html:一个视图(在app.component.js中声明的变量)

app.component.spec.ts:用于测试app.component.ts

app.component.ts:你绑定的代码app.component.html

app.module.ts:这就是启动应用程序以及定义所有插件,组件,服务等的地方.这相当于app.jsAngular 1中的

index.ts用于定义或导出项目文件

附加信息:
专业提示:您可以运行ng generate [option] [name]以生成新的服务,组件,管道等.

此tsconfig.json文件也很重要,因为它为您的项目定义了TS编译规则.

如果你认为我必须学习一门全新的语言？......呃...有点儿,TypeScript是JavaScript的超集.不要被吓倒; 它可以让您的开发更轻松.经过几个小时的玩耍后,我觉得自己已经很好地掌握了它,并在3天后完全放下了.

绑定到HTML的方式与Angular 1指令中的方式类似.所以变量喜欢$scope并且$rootScope已被弃用.

你可能暗示过这一个.Angular 2仍然是MV*,但您将使用" 组件 "作为将代码绑定到模板的方法,例如,请执行以下操作

    import { Component } from '@angular/core';

    @Component({
         selector:'my-app',
         template: '
 Hello World! 
'
    })

    export class AppComponent {}

这里将该import语句视为v1控制器中的依赖注入.您可以使用import来导入你的包,其中import {Component}说,你会做一个component你想绑定到你的HTML.

注意@Component装饰你有selector和template.这里想到的selector是你$scope,你使用像使用V1 directives地方的名字selector是你用什么绑定到你的HTML像这样

您将使用的自定义标记的名称在哪里,它将充当模板中声明的内容的占位符.即)

Hello World!

.虽然这看起来像v1中的以下内容:

HTML

{{hello}}

JS

$scope.hello = "Hello World!"

您还可以在这些标记之间添加内容以生成加载消息,如下所示:

 Loading...  

然后它将显示" 正在加载... "作为加载消息.

请注意,声明的内容template是您HTML在selector标记中使用的路径或原始HTML .

---

更全面的Angular 1实现看起来更像这样:

HTML

{{hello}}

在v1中,这看起来像

JS

angular.module('controller', [])



.controller('myCtrl', function( $scope) {
    $scope.hello = "Hello World!"
})

这就是我真正喜欢的v2.我发现指令在v1中对我来说是一个陡峭的学习曲线,即使我让他们弄清楚我经常有CSS渲染而不是我的意图.我发现这更简单.

V2允许您的应用程序更容易扩展,因为您可以比在v1中更容易地分解您的应用程序.我喜欢这种方法,因为你可以将所有工作部件放在一个文件中,而不是在角度v1中有几个.

将项目从v1转换为v2怎么样？

---

根据我从开发团队那里听到的内容,如果您想将v1项目更新为v2,那么您只需要通过并删除已弃用的blob并将$scopes 替换为selectors.我觉得这个视频很有帮助.这是一些与角色团队并肩工作的Ionic团队,因为v2更专注于移动设备https://youtu.be/OZg4M_nWuIk希望这会有所帮助.

更新:我通过添加示例来更新,因为Angular 2的官方实现已经浮出水面.

更新2:这似乎仍然是一个受欢迎的问题所以我只是认为当我开始使用角度2时,我发现了一些非常有用的资源.

有用的资源:

有关ES6的更多信息,我建议您查看新波士顿的ECMAScript 6/ES6新功能教程 - YouTube播放列表

要编写Typescript函数并查看它们如何编译为Javascript,请查看Typescript语言Playground

要通过功能细分来看Angular 1等效性在Angular 2中的功能,请参阅Angular.io - Cookbook -A1 A2快速参考

2> Anil Singh..：

---

它可能会帮助你了解Angular 1 vs Angular 2.

事实证明Angular 2比Angular 1有很多好处:

它完全基于组件.

更好的变化检测

提前编译(AOT)提高了渲染速度.

TypeScript可用于开发Angular 2应用程序

Angular 2比Angular 1具有更好的性能.

Angular 2具有比Angular 1更强大的模板系统.

Angular 2具有更简单的API,延迟加载,更容易调试.

角度2比Angular 1更可测试.

Angular 2提供嵌套组件.

Angular 2提供了一种同时执行两个以上系统的方法.

等等..

---

告诉我们,这是怎么回事？:)你的答案是针对Angular 1中的性能问题.https://www.quirksmode.org/blog/archives/2015/01/the_problem_wit.html

3> 小智..：

---

Angular 2和Angular 1基本上是一个具有相同名称的不同框架.

angular 2更适合Web标准的当前状态和Web的未来状态(ES6\7,不可移动性,组件,影子DOM,服务工作者,移动兼容性,模块,打字稿等等......)

angular 2杀死了角度1中的许多主要功能 - 控制器,$ scope,指令(用@component注释替换),模块定义等等,甚至像ng-repeat这样的简单事情也没有像现在这样保持不变.

无论如何,变化是好的,角度1.x有缺陷,角度2更适合未来的网络要求.

总结一下 - 我不建议你现在开始一个角度1.x项目 - 这可能是最糟糕的时间,因为你必须稍后迁移到角度2,你设置你的角度而不是选择角度2,谷歌已经推出了一个角度为2的项目,当你完成项目时,角度2应该已经成为焦点.如果你想要更稳定的东西,你可以将react\elm和flux视为JS框架.

角度2将是非常棒的,这是毫无疑问的.

4> 小智..：

---

没有框架是完美的.你可以在这里和这里阅读Angular 1中的缺陷.但这并不意味着它很糟糕.问题是你在解决什么问题.如果你想快速推出一个简单的应用程序,它是轻量级的,具有有限的数据绑定用法,那么请继续使用Angular 1. Angular 1是在6年前建立的,用于解决快速原型设计,它做得非常好.即使您的用例很复杂,您仍然可以使用Angular 1,但是您应该了解构建复杂Web应用程序的细微差别和最佳实践.如果您正在开发一个用于学习目的的应用程序,我建议转移到Angular 2,因为这是Angular的未来.

5> Ammar Hasan..：

---

Angular v2和ReactJs的一个突出特点是它们都采用了新的Web组件开发架构。这意味着我们现在可以创建独立的Web组件，并将它们即插即用到世界上任何具有与该Web组件相同的技术堆栈的网站。凉！是的，很酷。:)

Angular v2中另一个最显着的变化是它的主要开发语言就是TypeScript。尽管TypeScript属于Microsoft，并且是2015年JavaScript（或ECMAScript6 / ES6）的超集，但它具有一些非常有希望的功能。我建议读者阅读本教程后，详细了解TypeScript（这很有趣）。

在这里，我要说的是试图将Angular v1和Angular v2相互关联的家伙，这进一步使读者感到困惑，并且以我的拙见，Angular v1和Angular v2应该被视为两个不同的框架。在Angular v2中，我们具有Web组件开发Web应用程序的概念，而在Angular v1中，我们必须使用控制器，（不幸的是，幸运的是）在Angular v2中没有控制器。

---

从1.5版开始，组件也可在Angular 1中使用。但是实际上，以前的元素指令也可以做到这一点。