AngularJS vs Angular

锺威

2023-03-14

问题内容：

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

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

问题答案：

首先，我想假设您和将要阅读此文章的每个人都已经对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的超集。不要被吓倒；它可以使您的开发更加轻松。玩了几个小时后，我感觉自己已经掌握了很多，三天后一切都消失了。

您绑定到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>

$scope.hello = "Hello World!"

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

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

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

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

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

HTML

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

在v1中，这看起来像

angular.module('controller', [])



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

这就是我真正喜欢的v2。我发现指令在v1中对我来说是一个陡峭的学习曲线，即使当我弄清楚指令时，我经常也得到了CSS渲染效果，而不是我想要的。我发现这更简单。

V2允许您简化应用程序的可伸缩性，因为与v1相比，您可以更轻松地拆分应用程序。我喜欢这种方法，因为您可以将所有工作部件放在一个文件中，而不是在角度v1中拥有多个。

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

根据我从开发团队那里得到的消息，如果您想将v1项目更新为v2，您将经历并删除不推荐使用的blob，并将$scopes替换为selectors。我觉得这部影片很有帮助。与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快速参考

AngularJS vs Angular

相关阅读

相关文章

相关问答