Angular vs Angular 2

几个月前,我决定学习Angular。 当我进行一些改进并创build一些使用它的应用程序时,我意识到Angular 2是在开发者预览版中,所以在发布之前是一个时间问题。 因为Angular 2不会与Angular 1兼容,而且有很多变化,所以问题是,继续使用Angular 1.x开发还是开始开发Angular 2会更好?

事实上,我们并不总是要使用最新版本,也不是市场上最新的语言,但在这种情况下,应用程序仍然很小,所以我可以改变没有问题。

让我先说一句,我假设你,每个将要阅读的人都已经对Angular 1(现在称为AngularJS ,而不是简单的Angular为新版本)感到舒服。 这就是说,让我们来看看Angular 2+中的一些增加和主要区别。

  1. 他们增加了一个angular度cli

您可以运行ng new [app name]来启动一个新项目。 你可以通过运行ng serve来为你的项目了解更多: https : //github.com/angular/angular-cli

  1. 你的angular码是用ES6 Typescript编写的,它在运行时编译成浏览器中的Javascript。

为了充分掌握这一点,我build议查看一下我的答案底部的资源列表。

  1. 项目结构

在一个基本的结构中,你将拥有一个app/ts文件夹,你将在这里完成大部分的工作和一个app/js你会在app/js文件夹中find一个扩展名为.js.map文件。 他们将您的“.ts”文件“映射”到您的浏览器进行debugging,因为您的浏览器无法读取本地打字稿。

更新 :已经过testing。 在大多数情况下,项目结构有所改变,如果您使用angular度cli,您将在src/app/文件夹中工作。 在一个初学者项目中,您将拥有以下内容。

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

app.component.css :您应该使用特定于component.html CSS文件

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

app.component.spec.t :用于testingapp.component.ts

app.component.ts :绑定到app.component.html代码

app.module.ts :这是什么启动您的应用程序,以及您在哪里定义所有插件,组件,服务等。这是相当于Angular 1中的app.js

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

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

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

如果你认为我必须学习一门全新的语言? 呃…有点儿,TypeScript是JavaScript的超集。 不要被吓倒; 它在那里让你的开发更容易。 玩了几个小时后,我觉得好好把握,三天后全部放下。

  1. 你绑定到你的HTML,就像在Angular 1指令中一样。 所以像$scope$rootScope这样的variables已经被弃用了。

这一个你可能已经暗示。 Angular 2仍然是一个MV *,但是您将使用“ 组件 ”作为将代码绑定到模板的方式,例如,采取以下

  import { Component } from '@angular/core'; @Component({ selector:'my-app', template: '<h1> Hello World! </h1>' }) export class AppComponent {} 

在这里可以将import语句看作v1控制器中的dependency injection。 您可以使用import导入您的软件包,其中import {Component}表示您将要创build一个要绑定到HTML

注意@Component装饰器有一个selectortemplate 。 这里把selector想象成你使用的$scope ,就像你使用v1 directivesselector的名字就是你用来绑定到HTML的东西

 <my-app> </my-app> 

其中, <my-app>是您的自定义标记的名称,您将使用它作为模板中声明内容的占位符。 即) <h1> Hello World! </h1> <h1> Hello World! </h1> 。 而在v1中看起来如下所示:

HTML

 <h1>{{hello}}</h1> 

JS

 $scope.hello = "Hello World!" 

你也可以在这些标签之间添加一些东西来生成一个加载消息,如下所示:

 <my-app> Loading... </my-app> 

然后它会显示“ 加载… ”作为加载消息。

请注意, template声明的内容是在selector标记中的HTML中使用的path或原始HTML。


更完整的Angular 1实现看起来更像这样:

HTML

 <h1 ng-controller="myCtrl">{{hello}}</h1> 

在v1中,这看起来像

JS

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

这是我真正喜欢v2的。 我发现指令对我来说是一个陡峭的学习曲线,即使我有他们想通了,我经常有CSS呈现不是我的意图。 我觉得这样比较简单。

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

把你的项目从v1转换成v2怎么样?


从我从开发团队那里听到的,如果你想把你的v1项目更新到v2,你只需要去掉和删除已弃用的blob,并用selector sreplace你的$scope 。 我发现这个video很有帮助。 这是与一些与angular度团队并肩工作的一些离子团队,因为V2更强调移动https://youtu.be/OZg4M_nWuIk希望这有助于。;

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

更新2:这仍然是一个受欢迎的问题,所以我只是想当我开始使用angular2的时候,我发现了一些我觉得非常有用的资源。

有用的资源:

有关ES6的更多信息,我build议查看“新波士顿ECMAScript 6 / ES6新function教程 – YouTube播放列表”

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

通过function分解来看Angular 2中的Angular 1等价是什么,请参阅Angular.io – Cookbook -A1 A2快速参考

它可能会帮助你了解Angular 1和Angular 2。

Angular 2与Angular 1相比有很多好处:

  • 它完全基于组件。
  • 更好地改变检测
  • 提前编译( AOT )提高了渲染速度。
  • TypeScript可用于开发Angular 2应用程序

  • Angular 2比Angular 1有更好的performance。

  • Angular 2拥有更强大的模板系统,然后是Angular 1。

  • Angular 2具有更简单的API,延迟加载,更容易debugging。

  • Angular 2比Angular 1更容易testing。

  • Angular 2提供了嵌套的组件。

  • Angular 2提供了一个执行两个以上系统的方法。

  • 等等..

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

angular色2为networking标准的当前状态和networking的未来状态(ES6 \ 7,不可变性,组件,影子DOM,服务工作者,移动兼容性,模块,打字稿等等)做好了准备。

angular2杀死了angular1中的许多主要特性,比如控制器,$ scope,指令(用@component注释代替),模块定义等等,甚至像ng-repeat这样简单的事情也不会像以前那样保持原样。

任何方式,改变是好的,angular1.x有它的缺陷,angular2更为未来的web需求做好准备。

总结一下 – 我不build议你现在开始一个angular度1.x的项目 – 这可能是最糟糕的时候这样做,因为你将不得不稍后迁移到angular2,我设置你的关于angular的angular度比selectangular2,谷歌已经推出了angular度为2的项目,到项目完成时angular度2应该已经成为焦点。 如果你想要更稳定的东西,你可以考虑反应\榆树和stream量JS框架。

angular2将是真棒,这是毫无疑问的。

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

有一点要注意的是angular2是使用打字稿。

我在我的实习生里用cordova来做angular1,现在我正在做一个angular度2.我认为angular2将会是趋势,因为它在我看来更加结构化,但缺点是当你遇到问题或者困难的时候,很less有资源可以提及。 angular 1.x有大量个性化的指令,可以超级简单的使用。

希望它有帮助。

Angular v2和ReactJs中的一个突出特点是它们都采用了新的Web-Components开发架构。 这意味着我们现在可以创build独立的Web组件,并将它们插入到具有与此Web组件相同的技术堆栈的世界上的任何网站。 凉! 是非常酷。 🙂

Angular v2中另一个最显着的变化是它的主要开发语言是TypeScript。 尽pipeTypeScript属于Microsoft,并且是2015年的JavaScript(或ECMAScript6 / ES6)的超集,但它具有一些非常有前途的特性。 阅读本教程之后,我会build议读者详细地了解TypeScript(这很有趣)。

在这里,我想说的是,试图将Angular v1和Angular v2相互关联的人们进一步混淆了读者,我认为Angular v1和Angular v2应该被看作是两个不同的框架。 在Angular v2中,我们有Web组件开发Web应用程序的概念,而在Angular v1中,我们必须使用控制器,并且(可悲或幸运地)在Angular v2中没有控制器。

Angular 2比1更好,它提供的atlist,支持web组件,使用typecript,性能和界面的整体简单性,是我决定使用angular 2开始一个项目的原因。意识到在angular度2(从apache的实例路由)有一个问题,很less或没有文档可用,所以angular2的文档和社区是angular2最大的陷阱,因为它没有足够的发展。

我想说,如果你需要在短时间内快速build立一个网站,使用众所周知的angular色1,如果你在一个更长的项目中,并且能够花时间调查新的问题(你可能是第一个遇到的问题,如果你想到你可能会给angular2社区做出的贡献,那么将会是一个奖励),而不是angular2。