AngularJS与Angular


AngularJS vs Angular

几个月前，我决定学习角。当我做了一些改进并使用它创建了一些应用程序时，我意识到Angular2正在开发人员预览中，所以在发布它之前是时间问题。因为角2和角1不相容，而且有很多变化，问题是，继续角1.x的发展还是开始角2的发展更好？

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

相关讨论

让我先说一句，我假设你和所有读到这篇文章的人都已经习惯于使用角度1(现在称为角度1，而不是简单的角度1)。也就是说，让我们来研究一下角2+中的一些补充和关键区别。好的。

  • 他们加了一个角形的cli。

    • 您可以通过运行ng new [app name]来启动一个新项目。你可以通过运行ng serve来服务你的项目。更多信息请访问：https://github.com/angular/angular-cli好的。

  • 您的角代码是用ES6类型脚本编写的，它在运行时在浏览器中编译为JavaScript。

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

  • 项目结构

    • 在基本结构中，您将拥有一个app/ts文件夹，您将在其中完成大部分工作，并且在app/js文件夹文件中找到一个扩展名为.js.map的app/js文件夹文件。它们"将"您的.ts"文件映射到浏览器进行调试，因为您的浏览器无法读取本机类型脚本。< /打击>好的。

    最新消息：这是测试版。项目结构发生了一些变化，在大多数情况下，如果使用angular cli，您将在src/app/文件夹。在一个初学者项目中，您将拥有以下内容。好的。

    1
    2
    3
    4
    5
    6
    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：这是启动应用程序的原因，也是定义所有插件、组件、服务等的地方。这相当于角度1中的app.js好的。

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

    其他信息：pro提示：您可以运行ng generate [option] [name]来生成新的服务、组件、管道等。好的。

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

    如果你认为我必须学习一门全新的语言？…休斯敦大学。。。有点，typescript是javascript的超集。不要害怕，这是为了让你的发展更容易。在玩了几个小时后，我感觉自己很好地抓住了它，3天后，我就把它全部放下了。好的。

  • 您绑定到HTML的方式与使用角度1指令时的方式类似。所以像$scope和$rootScope这样的变量已经被否决了。

    • 这可能是暗示你的。Angular2仍然是一个mv*，但您将使用"组件"作为将代码绑定到模板的方法，例如，采用以下方法好的。

    1
    2
    3
    4
    5
    6
    7
    8
        import { Component } from '@angular/core';

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

        export class AppComponent {}

    这里把import语句看作是v1控制器中的依赖注入。你用import进口你的包裹，import {Component}说你要做一个component，你想绑定HTML。好的。

    注意@Component装饰器，你有一个selector和template。这里把selector想象成您使用的$scope，就像使用v1 directives，其中selector的名称是您用来绑定HTML的，就像这样。好的。

    1
    <my-app> </my-app>

    其中，是您将使用的自定义标记的名称，它将作为模板中声明内容的占位符。即 Hello World! 。而在v1中，这看起来像是：好的。

    HTML好的。

    1
    {{hello}}

    JS好的。

    1
    $scope.hello ="Hello World!"

    还可以在这些标记之间添加一些内容以生成加载消息，如：好的。

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

    然后它将显示"正在加载…"作为加载消息。好的。

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

    角度1的更完整的实现看起来更像这样：好的。

    HTML好的。

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

    在v1中，这个看起来像好的。

    JS好的。

    1
    2
    3
    4
    5
    6
    7
    angular.module('controller', [])



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

    这就是我真正喜欢的V2。我发现在v1中指令对我来说是一条陡峭的学习曲线，即使我让他们知道我经常让CSS呈现出我的意图。我觉得这很简单。好的。

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

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

    我从开发团队那里听说，如果你想把你的v1项目升级到v2，你只需要通过删除不推荐使用的blob，用selector替换你的$scope。我发现这个视频很有用。有些爱奥尼亚团队与Angular团队并肩工作，因为V2更加关注手机https://youtu.be/ozg4m，希望这能有所帮助。好的。

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

    更新2：这似乎仍然是一个流行的问题，所以我只是认为我找到了一些资源，当我开始使用Angular2时，我发现非常有用。好的。有用的资源：

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

    要编写typescript函数并查看它们如何编译为javascript，请查看typescript语言操场好的。

    要查看角度1等价于角度2的函数分解，请参见Angular.io-Cookbook-A1 A2快速参考。好的。好啊。

    相关讨论

    它可能会帮助你了解角1和角2。

    事实证明，角2比角1有很多好处：

    • 它完全基于组件。
    • 更好的变化检测
    • 提前编译(AOT)提高了渲染速度。

    • TypeScript can be used for developing Angular 2 applications

    • 角2比角1有更好的性能。

    • 角度2具有比角度1更强大的模板系统。

    • Angular2具有更简单的API、延迟加载、更容易调试。

    • 角度2比角度1更容易测试。

    • 角度2提供嵌套组件。

    • 角度2提供了一种同时执行两个以上系统的方法。

    • 等等…

    相关讨论

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

    Angular2更适合当前的Web标准状态和未来的Web状态(ES67、不兼容、组件、影子DOM、服务工作者、移动兼容性、模块、字体脚本等…)

    Angular2删除了Angular1中的许多主要功能，比如控制器、$scope、指令(替换为@component annotations)、模块定义等等，甚至是像ng repeat这样的简单的东西也没有保留原来的功能。

    无论如何，变化是好的，角度1.x有它的缺点，角度2更为适合未来的Web需求。

    综上所述，我不建议你现在就开始一个角度1.x项目，这可能是最糟糕的时候了，因为你以后必须迁移到角度2，我你已经决定了角度2而不是选择角度2，谷歌已经启动了一个角度2的项目，当你完成这个项目的时候，角度2应该已经是我了。在聚光灯下。如果您想要更稳定的东西，可以考虑将reactelm和flux作为JS框架。

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

    没有完美的框架。你可以在这里和这里读到角1的缺陷。但这并不意味着它是坏的。问题是你要解决什么问题。如果你想快速推出一个简单的应用程序，它是轻量级的，并且数据绑定使用有限，那么继续使用Angular 1。Angular1是6年前为解决快速原型设计而建立的，它做得很好。即使您的用例很复杂，您仍然可以使用Angular 1，但是您应该了解构建复杂Web应用程序的细微差别和最佳实践。如果你是为了学习而开发一个应用程序，我建议转到角度2，因为角度的未来就在这里。

    AngularV2和ReactJS的一个突出特点是，它们都采用了新的Web组件开发体系结构。这意味着我们现在可以创建独立的Web组件，并将它们插入并播放到世界上任何拥有相同技术堆栈的Web组件的网站上。酷！是的，很酷。：)

    在AngularV2中，另一个最显著的变化是它的主要开发语言是typescript。虽然typescript属于微软，它是2015年的javascript的超集(或ecmascript6/es6)，但它有一些非常有前途的功能。我建议读者在阅读完本教程后，稍微详细地检查一下typescript(这当然很有趣)。

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

    相关讨论

    需要注意的一点是，Angular2使用的是typescript。

    我在实习时和科多瓦一起做过安古拉1，现在我做的是角度2。我认为安古拉2将是一种趋势，因为它在我看来更具结构性，但缺点是当你有问题或困难时，很少有资源可供参考。Angular1.x有大量的个性化指令，非常容易使用。

    希望它有帮助。

    相关讨论

    Angular2比1好得多，Atlist在它提供的内容、对Web组件的支持、使用类型脚本、执行和界面的整体简单性方面都是我决定使用Angular2启动项目的原因。从一开始，我就意识到Angular2(从Apache的简单路由中)中存在一个几乎没有或根本没有文档可供使用的问题，因此Angular2的文档和社区是Angular2最大的陷阱，因为它开发得还不够。

    我会说，如果你需要在短时间内快速提升一个站点，那么使用众所周知的角度1，如果你在一个较长的项目中，并且有足够的时间来研究新问题(你可能是第一个遇到的问题，如果你考虑到你可能为角度2社区做出的贡献，这可能是一个额外的收获)，而不是使用角度2。