角度与角度2

2018-06-07 13:35:44

几个月前，我决定学习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来为您的项目ng serve更多信息：https：//github.com/angular/angular-cli

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

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

项目结构

在基本结构中，您将拥有一个app/ts文件夹，您将在其中完成大部分工作和一个app/js您将在具有.js.map扩展名的app/js文件夹文件中找到该文件。他们将您的“.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 ：您应该使用特定于component.html CSS文件

app.component.html ：视图（在app.component.js中声明的变量）

app.component.spec.t ：用于测试app.component.ts

app.component.ts ：您的代码绑定到app.component.html

app.module.ts ：这是什么启动您的应用程序，并定义所有插件，组件，服务等。这是相当于Angular 1中的app.js

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

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

此外， tsconfig.json文件非常重要，因为它为您的项目定义了TS编译规则。

如果你认为我必须学习一门全新的语言？......呃......有点儿，TypeScript是JavaScript的超集。不要被吓倒; 它在那里让你的开发更容易。在我玩了几个小时后，我觉得我已经很好地掌握了它，并在3天后全部放弃。

你绑定到你的HTML，就像在Angular 1指令中一样。 所以像$scope和$rootScope这样的变量已被弃用。

这一个你可能已经暗示。 Angular 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> <h1> Hello World! </h1> 。而这在v1中看起来如下所示：

HTML

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

$scope.hello = "Hello World!"

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

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

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

请注意， template声明的内容是您在selector标记中的HTML中使用的路径或原始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更轻松地分割应用。我喜欢这种方法，因为您可以将所有工作部件放在一个文件中，而不是在angular v1中放置几个。

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

从我从开发团队那里听到的，如果你想更新你的v1项目到v2，你只需要通过并删除已弃用的斑点并用selector s替换你的$scope 。我发现这个视频很有帮助。它与一些与角度团队并肩工作的Ionic团队一起工作，因为V2更加注重移动设备https://youtu.be/OZg4M_nWuIk希望这会有所帮助。

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

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

有用的资源：

有关ES6的更多信息，我建议查看New Boston的ECMAScript 6 / ES6新功能教程 - YouTube播放列表

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

要通过功能细分看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有更好的表现。

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

Angular 2具有更简单的API，延迟加载和更容易的调试。

Angular 2比Angular 1更容易测试。

Angular 2提供了嵌套组件。

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

等等..

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

angular 2更适合web标准的当前状态和web的未来状态（ES6 7，immutiablity，组件，影子DOM，服务工作者，移动兼容性，模块，打字稿等等）

角2在角1中杀死了许多主要特性，如控制器，$ scope，指令（用@component注释代替），模块定义等等，甚至像ng-repeat这样的简单事情也没有像以前那样保持原样。

任何方式，改变都是好的，角度1.x有缺陷，角度2更适合未来的网络需求。

总结一下 - 我不建议你现在开始一个角度1.x项目 - 这可能是最糟糕的时候这样做，因为你将不得不稍后迁移到角度2，我设置你的角度比选择角度2，谷歌已经推出了角度为2的项目，到项目结束时，角度2应该已成为焦点。如果你想要更稳定的东西，你可以考虑将反应榆树和流量作为JS框架。

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

链接地址: http://www.djcxy.com/p/23123.html

上一篇: Angular vs Angular 2

下一篇: How to Loop through items returned by a function with ng