AngularJS vs Angular

AngularJS vs Angular

首先，我想假设您和将要阅读此文章的每个人都已经对Angular 1（现在称为
AngularJS
，而不是较新版本的 Angular ）感到满意。话虽如此，让我们进入Angular 2+的一些新增功能和主要区别。

1. 他们增加了棱角

   cli

   。

您可以通过运行启动一个新项目

ng new [app name]

。您可以通过

ng serve

在此处运行更多信息来服务您的项目：https :
//github.com/angular/angular-cli

1. 您的角度代码是用ES6 Typescript编写的，并且在运行时会在浏览器中编译为Javascript。

为了对此进行全面了解，我建议您查看答案底部的一些资源列表。

1. 项目结构

在基本结构中，您将拥有一个

app/ts

文件夹，您将在其中完成大部分工作，并且

app/js

在

app/js

文件夹中会找到带有

.js.map

扩展名的文件。它们将“
.ts”文件“映射”到浏览器以进行调试，因为浏览器无法读取本机打字稿。

更新 ：它已经过测试版。在大多数情况下，项目结构有所变化，如果使用的是cli，则将在

src/app/

文件夹中工作
。在一个入门项目中，您将拥有以下内容。

app.component.css app.component.htmlapp.component.spec.tsapp.component.ts app.module.tsindex.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.js

Angular 1中的等效。

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

附加信息：
专家提示：您可以运行

ng generate [option] [name]

以生成新的服务，组件，管道等。

该

tsconfig.json

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

如果您认为 我必须学习一种全新的语言？ 嗯…
Typescript是Javascript的超集。不要被吓倒；它可以使您的开发更加轻松。玩了几个小时后，我感觉自己已经掌握了很多，三天后一切都消失了。

1. 您绑定到HTML的方式类似于在Angular 1指令中绑定的方式。 所以可变像

   $scope

   及

   $rootScope

   已过时。

您可能已经暗示了这一点。Angular 2仍然是 MV *， 但是您将使用’ components
‘作为将代码绑定到模板的一种方式，例如，请执行以下 *** 作

    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中看起来如下所示：

的HTML

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

JS

$scope.hello = "Hello World!"

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

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

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

请注意，在其中声明的

template

是您将

HTML

在

selector

标记中使用的路径或原始HTML 。

---

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相比，您可以更轻松地拆分应用程序。我喜欢这种方法，因为您可以将所有工作部件放在一个文件中，而不是在角度v1中拥有多个。

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

---

根据我从开发团队那里得到的消息，如果您想将v1项目更新为v2，您将经历并删除不推荐使用的blob，并将

$scope

s替换为

selector

s。我觉得这部影片很有帮助。与v2的一些Ionic团队并肩作战，因为v2更加关注移动设备

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

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

有用的资源：

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

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

要查看Angular 1中等效于Angular 1的等效函数，请参阅Angular.io-Cookbook -A1
A2快速参考