AngularJS vs Angular

几个月前，我决定学习 Angular。当我在做一些预览和创建一些应用程序使用它，我意识到角2是在开发者预览，所以这是一个时间问题，它将被释放。因为角度2和角度1是不兼容的，而且有很多变化，问题是，是继续使用角度1. x 还是开始使用角度2更好？

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

94052 次浏览
小开
最佳答案

让我先说，我假设你和将要阅读这篇文章的每个人都已经很舒服地使用了 Angular 1(现在被称为“ em”AngularJS，相对于新版本的简单 角度)。也就是说，让我们来讨论一下角度2 + 中的一些增加和关键差异。

  1. 他们增加了一个有角度的 cli。

可以通过运行 ng new [app name]启动新项目。 您可以通过运行 ng serve来为您的项目服务 点击这里了解更多信息: < a href = “ https://github.com/angle/angle-cli”rel = “ norefrer”> https://github.com/angular/angular-cli

  1. 角度代码是用 ES6打字机编写的，在运行时会在浏览器中编译成 Javascript。

为了完全掌握这一点，我建议查看一些资源列表，我有在我的答案底部。

  1. 工程项目结构

在一个基本的结构中，你会有一个 app/ts文件夹，在那里你会做大部分的工作和一个 app/js你会发现在 app/js文件夹文件与 .js.map扩展。他们“地图”你。当您的浏览器无法读取本机类型脚本时，请将“ ts”文件转移到您的浏览器进行调试。

更新 : 它已经超出测试版。项目结构发生了一点变化，在大多数情况下，如果您使用角斜面，您将在 src/app/文件夹。

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

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

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

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

Ts : 绑定到 app.component.html的代码

App.module.ts : 这是开启应用程序的地方，也是定义所有插件、组件、服务等的地方。这相当于角度1的 app.js

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

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

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

如果你在考虑 我得学一门全新的语言？... ... 呃... ... 差不多，TypeScript 是 JavaScript 的超集。不要害怕，它会让你的发展变得更容易。我觉得我有一个很好的把握后，仅仅几个小时玩它，并在3天后把它下来。

  1. 您绑定到您的 HTML 类似，如果您将在一个角度1指令。所以像 $scope和 $rootScope这样的变量已经被废弃了。

这个你可能已经被暗示了。角度2仍然是一个 MV * ，但你将使用’组件’作为一种方式绑定代码到您的模板，例如，采取以下

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


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


export class AppComponent {}

在这里，可以把 import语句想象成 v1控制器中的依赖注入。你使用 import到 进口你的软件包，在那里 import {Component}说你将制作一个 component你想绑定到你的 HTML。

注意，在 @Component装饰器中有一个 selector和一个 template。在这里，可以将 selector想象成您使用的 $scope，就像您使用 v1 directives一样，其中 selector的名称就是您用来绑定到 HTML 的名称，如下所示

<my-app> </my-app>

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

超文本标示语言

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

JS

$scope.hello = "Hello World!"

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

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

然后它将显示“ 装弹中。”作为加载消息。

请注意，在 template中声明的是 selector标记中的 HTML中将使用的路径或原始 HTML。

角度1的一个更完整的实现看起来更像这样:

超文本标示语言

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

在 v1中，这看起来像

JS

angular.module('controller', [])






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

这就是我真正喜欢 v2的地方。我发现指令是一个陡峭的学习曲线为我在 v1，甚至当我有他们指出我往往有 CSS渲染不是我的意图。我觉得这样简单多了。

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

如何将您的项目从 v1转换为 v2？

我从开发团队那里听说，如果你想把你的 v1项目升级到 v2，你只需要浏览并删除废弃的 blobs，然后用 selector代替你的 $scope。我觉得这个视频很有用。这是与一些爱奥尼亚团队，正在并肩工作的角度团队，因为 v2有一个更强大的重点在移动 https://youtu.be/OZg4M_nWuIk希望这有所帮助。

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

更新2: 这似乎仍然是一个流行的问题，所以我只是想我有一些资源，我发现非常有帮助，当我开始与角2工作。

有用资源:

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

要编写 Type 脚本函数并查看它们是如何编译成 Javascript 的，请查看 操场

要看到一个函数的功能分解角1等价是在角2看到的 Angular.io-食谱 -A1 A2快速参考

小开

没有一个框架是完美的。你可以阅读在角度1 给你和 给你的缺陷。但这并不意味着它是坏的。问题是你在解决什么问题。如果你想快速推出一个简单的应用程序，这是轻量级的，有限的数据绑定 用途，然后继续与角度1。角度1号是6年前建造的用来解决快速成型问题的它做得很好。即使你的用例是复杂的，你仍然可以使用角度1，但是你应该意识到细微差别和最佳实践周围建立一个复杂的 Web 应用程序。如果你正在开发一个用于学习目的的应用程序，我建议你转移到角度2，因为那是角度的未来所在。

小开

需要注意的一件事是 angular2正在使用类型脚本。

我在实习时和 Cordova 做过角度测试，现在我在做角度测试2。我认为 angular2将是一个趋势，因为它在我看来更加结构化，但缺点是，当你有问题或困难时，几乎没有资源可以参考。Angle 1.x 拥有大量的个性化指令，使用起来非常简单。

希望能有帮助。

小开

它可以帮助你理解角度1和角度2的比较。

角度2被证明比角度1有很多好处:

  • 它完全是基于组件的。
  • 更好的变化检测
  • AOT 提高了渲染速度。
  • TypeScript 主要用于开发 Angular 2应用程序。
  • 角度2比角度1有更好的性能。
  • 角度2有一个更强大的模板系统比角度1。
  • 角度2有更简单的 API，延迟加载，更容易调试。
  • 角度2比角度1更容易测试。
  • 角度2提供了嵌套组件。
  • 角度2提供了一种方法来执行两个以上的系统在一起。
  • 等等..。
小开

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

Angular v2的另一个最显著的变化是，它的主要开发语言不是别的，正是 TypeScript。尽管 TypeScript 属于微软，是2015年 JavaScript (或 ECMAScript6/ES6)的超集，但它有一些非常有前途的特性。我建议读者在阅读完本教程后，稍微详细地检查一下 TypeScript (当然这很有趣)。

这里我要说的是，那些试图将角度 v1和角度 v2相互关联的家伙进一步混淆了读者，在我看来，角度 v1和角度 v2应该被视为两个不同的框架。在 Angular v2中，我们有 Web 组件开发 Web 应用程序的概念，而在 Angular v1中，我们必须使用控制器，而且(可惜或幸运的是)在 Angular v2中没有控制器。

小开

角度2比角度1好得多，至少在它所提供的方面: 对 web 组件的支持，使用打印脚本，性能和界面的整体简洁性，是我决定使用角度2开始一个项目的原因。然而，从一开始，我就意识到在角2中存在一些问题(例如使用 apache 进行路由) ，这些问题很少或根本没有文档可用，所以角2的文档和社区是角2最大的缺陷，因为它还没有得到足够的开发。

我会说，如果你需要快速提高一个网站的最后期限很短，使用众所周知的角1，如果你在一个较长的项目，并能够提供时间来研究新的问题(你可能是第一个遇到的，这可能是一个奖金，如果你认为的贡献，你可能会给角2社区)比去角2。

小开

角度2和角度1基本上是一个不同的框架，有着相同的名字。

角度2更适合当前的 web 标准和未来的 web 状态(ES67，不可变性，组件，影子 DOM，服务工作者，移动兼容性，模块，打印脚本等等)

Angle 2扼杀了 angle 1中的许多主要特性，比如控制器、 $scope、指令(用@组件注释替换)、模块定义，以及更多，甚至像 ng-repeat 这样简单的东西也没有保持原样。

无论如何，改变是好的，棱角1.x 有它的缺陷，棱角2更适合未来的网络需求。

总而言之——我不建议你现在就开始一个角度为1. x 的项目——这可能是最糟糕的时间，因为你将不得不在稍后迁移到角度2，我你下定决心关于角度而不是选择角度2，谷歌已经启动了一个角度2的项目，当你完成项目角度2应该已经在聚光灯下。 如果您想要一些更稳定的东西，您可以考虑使用反应榆树和通量以及 redux 作为 JS 框架。

角度2将会很棒，这是毫无疑问的。


提交答案