AngularJS 与 Angular

Question

关闭。这个问题是opinion-based .它目前不接受答案。












想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题.

5年前关闭。



Improve this question




几个月前，我决定学习 Angular。当我进行一些改进并使用它创建一些应用程序时，我意识到 Angular 2 处于开发者预览版中，因此发布它只是时间问题。因为 Angular 2 不会和 Angular 1 兼容，而且有很多变化，问题是，继续用 Angular 1.x 开发还是开始开发 Angular 2 更好？

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

Answer 1

让我先说一下，我假设您和所有阅读本文的人已经对 Angular 1( now referred to as AngularJS ，而不是新版本的简单 Angular)感到满意。话虽如此，让我们来看看 Angular 2+ 中的一些新增功能和主要差异。

他们添加了一个 Angular cli .

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

您的 angular 代码是用 ES6 Typescript 编写的，它会在运行时在浏览器中编译为 Javascript。

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

项目结构

在基本结构中，您将有一个 app/ts您将在其中完成大部分工作的文件夹和一个 app/js您会在 app/js 中找到带有 .js.map 的文件夹文件扩展名。他们将您的“.ts”文件“映射”到您的浏览器以进行调试，因为您的浏览器无法读取 native typescript 。

更新 : 已经过了测试版。项目结构发生了一些变化，在大多数情况下，如果您使用的是 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 : 一个 View (在 app.component.js 中声明的变量)

app.component.spec.ts : 用于测试 app.component.ts
app.component.ts :您绑定(bind)到 app.component.html 的代码

app.module.ts :这是启动您的应用程序以及您定义所有插件、组件、服务等的地方。这相当于 app.js在 Angular 1

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

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

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

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

您绑定(bind)到 HTML 的方式与在 Angular 1 指令中的绑定(bind)方式类似。像 $scope 这样的变量和 $rootScope已被弃用。

这个你可能已经被暗示了。 Angular 2 仍然是 MV* 但你会使用' 组件 ' 作为将代码绑定(bind)到模板的一种方式，例如，请执行以下操作

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

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

    export class AppComponent {}

这里想到了import语句作为 v1 Controller 中的依赖项注入(inject)。您使用 import导入您的包，其中 import {Component}说你要制作 component您想绑定(bind)到您的 HTML .

请注意 @Component装饰师你有一个 selector和 template .这里想到了selector作为您的 $scope您使用的就像使用 v1 一样 directives哪里的名字selector是你用来绑定(bind)到你的 HTML 像这样

<my-app> </my-app>

哪里<my-app>是您将使用的自定义标记的名称，它将充当模板中声明内容的占位符。即)<h1> Hello World! </h1> .而这在 v1 中将如下所示:

HTML

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

JS

$scope.hello = "Hello World!"

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

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

然后它将显示“正在加载...”作为加载消息。

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

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

HTML

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

在 v1 中，这看起来像

JS

angular.module('controller', [])



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

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

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

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

根据我从开发团队听到的消息，如果您想将 v1 项目更新到 v2，您只需完成并删除已弃用的 blob 并替换您的 $scope s 与 selector s。我发现这个视频很有帮助。它与一些 Ionic 团队与 angular 团队并肩工作，因为 v2 更专注于移动 https://youtu.be/OZg4M_nWuIk希望这会有所帮助。

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

更新 2:这似乎仍然是一个受欢迎的问题，所以我只是想我会在开始使用 angular 2 时发现一些非常有用的资源。

有用的资源:

有关 ES6 的更多信息，我建议查看 The New Boston 的 ECMAScript 6 / ES6 New Features Tutorials - YouTube Playlist

要编写 Typescript 函数并查看它们如何编译为 Javascript，请查看 Typescript language Playground

要按功能分割查看 Angular 1 等效项在 Angular 2 中的功能，请参阅 Angular.io - Cookbook -A1 A2 Quick Reference