AngularJS 与 Angular
AngularJS vs Angular
几个月前，我决定学习Angular。当我进行一些改进并使用它创建一些应用程序时，我意识到 Angular 2 处于开发人员预览版中，因此发布它只是时间问题。因为Angular 2 不会兼容Angular 1，而且有很多变化，问题是，用Angular 1.x 继续开发更好吗？或开始开发 Angular 2?
事实上，我们不必总是使用市场上的最新版本或最新语言，但在这种情况下，应用程序仍然很小，所以我可以毫无问题地进行更改。
让我先说一下，我假设您和所有将要阅读本文的人都已经习惯了 Angular 1（now referred to as AngularJS，而不是简单地 Angular 对于较新的版本）。话虽如此，让我们来看看 Angular 2+.
中的一些新增功能和主要区别
- 他们添加了一个angular
cli。
您可以通过 运行ning ng new [app name] 开始一个新项目。
您可以通过 运行ning ng serve 服务您的项目
在这里了解更多：https://github.com/angular/angular-cli
- 您的 angular 代码是用 ES6 Typescript 编写的，它在 运行 时在浏览器中编译为 Javascript。
为了全面了解这一点，我建议您查看答案底部的一些资源列表。
- 项目结构
在基本结构中，您将有一个 app/ts 文件夹，您将在其中完成大部分工作，还有一个 app/js 您会在 app/js 扩展名为 .js.map 的文件夹文件。他们 "map" 您的“.ts”文件到您的浏览器进行调试，因为您的浏览器无法读取本机打字稿。
更新：测试版结束。项目结构发生了一些变化，在大多数情况下，如果您使用 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: 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 的超集。不要被吓倒；它的存在是为了让你的开发更容易。玩了几个小时就感觉上手了，玩了3天就全搞定了。
- 你绑定到你的 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 的名称是您用来绑定到 [=214= 的名称] 像这样
<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 中声明的是您将在 selector 标签中的 HTML 中使用的路径或原始 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 中更容易地分解您的应用程序。我喜欢这种方法，因为您可以将所有工作部分放在一个文件中，而不是将多个部分放在 angular v1.
中
如何将您的项目从 v1 转换为 v2？
根据我从开发团队那里听到的消息，如果您想将 v1 项目更新为 v2，您只需删除已弃用的 blob 并将 $scope 替换为 selector秒。我发现这个视频很有帮助。 Ionic 团队的一些成员与 angular 团队并肩工作，因为 v2 更加关注移动 https://youtu.be/OZg4M_nWuIk 希望这会有所帮助。
更新： 我通过添加示例进行了更新，因为 Angular 2 的官方实现已经浮出水面。
更新 2： 这似乎仍然是一个热门问题，所以我只是想我有一些资源，我在开始使用 angular 2 时发现它非常有用.
有用的资源：
有关 ES6 的更多信息，我建议查看新波士顿的 ECMAScript 6 / ES6 New Features Tutorials - YouTube Playlist
要编写 Typescript 函数并查看它们如何编译为 Javascript，请查看 Typescript language Playground
要按功能细分查看 Angular 1 等效项在 Angular 2 中的功能，请参阅 Angular.io - Cookbook -A1 A2 Quick Reference
没有完美的框架。您可以阅读 Angular 1 here and here. But that doesn't mean it is bad. The question is what problem are you solving. If you want to roll out a simple app quickly, which is lightweight, with limited data binding usage 中的缺陷，然后继续阅读 Angular 1。Angular 1 是 6 年前为解决快速原型设计而构建的，它做得很好。即使您的用例很复杂，您仍然可以使用 Angular1，但是您应该了解构建复杂 Web 应用程序的细微差别和最佳实践。如果您正在开发用于学习目的的应用程序，我建议您转到 Angular 2，因为那是 Angular 的未来所在。
需要注意的一件事是 angular2 使用的是打字稿。
我在实习期间用 cordova 做了 angular1，现在我正在做 angular2。我认为 angular2 将成为趋势，因为我认为它更有条理但缺点是当您遇到问题或困难时，可以参考的资源很少。 angular 1.x 有大量非常易于使用的个性化指令。
希望对您有所帮助。
这可能有助于您理解 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 提供嵌套组件。
- Angular2提供了一种同时执行两个以上系统的方法。
- 等等...
Angular v2 和 ReactJs 中的一个突出特点是它们都采用了新的 Web 组件开发架构。这意味着我们现在可以创建独立的 Web 组件，并将它们即插即用到世界上具有与该 Web 组件相同技术堆栈的任何网站。凉爽的！是的，非常酷。 :)
Angular v2 中另一个最显着的变化是它的主要开发语言是 none 而不是 TypeScript。虽然 TypeScript 属于微软，是 2015 年 JavaScript（或 ECMAScript6/ES6）的超集，但它有一些非常有前途的功能。我建议读者在阅读本教程后详细了解一下 TypeScript（这当然很有趣）。
在这里我要说的是，那些试图将 Angular v1 和 Angular v2 相互关联的人进一步混淆了读者，在我看来，Angular v1 和 Angular v2应该被视为两个不同的框架。在 Angular v2 中，我们有 Web-Components 开发 Web 应用程序的概念，而在 Angular v1 中我们必须使用控制器，并且（不幸或幸运的是）[=17= 中没有控制器] v2.
Angular 2 比 1 好得多，至少在它提供的方面：支持 Web 组件、使用打字稿、界面的性能和整体简单性，是我决定开始一个项目使用的原因angular 2. 但是，从一开始，我就意识到 angular 2 中存在一些问题（例如使用 apache 进行路由），很少或没有可用的文档，因此 [= 的文档和社区15=] 2 是 angular 2 最大的陷阱，因为它还不够发达。
我想说，如果您需要在较短的截止日期前快速提升站点，请使用众所周知的 angular 1，如果您的项目较长，并且有足够的时间调查新问题（你可能是第一个遇到的，如果你想到贡献，这可能是一个奖励，你可能会给 angular 2 社区）而不是 angular 2.
Angular2和Angular1基本上是同名的不同框架
angular 2 更适合 Web 标准的当前状态和 Web 的未来状态（ES6、不变性、组件、影子 DOM、服务工作者、移动兼容性、模块、打字稿等等……)
angular 2 扼杀了 angular 1 中的许多主要功能，例如 - 控制器、$scope、指令（替换为 @component 注释）、模块定义等等，甚至是一些简单的东西，例如ng-repeat 没有像以前那样保留。
无论如何，改变是好的，angular 1.x 有缺陷，angular 2 更适合未来的网络需求。
总结一下 - 我不建议您现在开始 angular 1.x 项目 - 这可能是最糟糕的时间，因为您稍后将不得不迁移到 angular 2，如果你决定 angular 而不是选择 angular 2，google 已经启动了一个项目 angular 2，当你完成项目 angular 2 应该已经在聚光灯下了。
如果你想要更稳定的东西，你可以考虑 react\elm 和 flux 和 redux 作为 JS 框架。
angular 2 会很棒，这是毫无疑问的。
几个月前，我决定学习Angular。当我进行一些改进并使用它创建一些应用程序时，我意识到 Angular 2 处于开发人员预览版中，因此发布它只是时间问题。因为Angular 2 不会兼容Angular 1，而且有很多变化，问题是，用Angular 1.x 继续开发更好吗？或开始开发 Angular 2?
事实上，我们不必总是使用市场上的最新版本或最新语言，但在这种情况下，应用程序仍然很小，所以我可以毫无问题地进行更改。
让我先说一下，我假设您和所有将要阅读本文的人都已经习惯了 Angular 1（now referred to as AngularJS，而不是简单地 Angular 对于较新的版本）。话虽如此，让我们来看看 Angular 2+.
中的一些新增功能和主要区别- 他们添加了一个angular
cli。
您可以通过 运行ning ng new [app name] 开始一个新项目。
您可以通过 运行ning ng serve 服务您的项目
在这里了解更多：https://github.com/angular/angular-cli
- 您的 angular 代码是用 ES6 Typescript 编写的，它在 运行 时在浏览器中编译为 Javascript。
为了全面了解这一点，我建议您查看答案底部的一些资源列表。
- 项目结构
在基本结构中，您将有一个 app/ts 文件夹，您将在其中完成大部分工作，还有一个 app/js 您会在 app/js 扩展名为 .js.map 的文件夹文件。他们 "map" 您的“.ts”文件到您的浏览器进行调试，因为您的浏览器无法读取本机打字稿。
更新：测试版结束。项目结构发生了一些变化，在大多数情况下，如果您使用 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: 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 的超集。不要被吓倒；它的存在是为了让你的开发更容易。玩了几个小时就感觉上手了，玩了3天就全搞定了。
- 你绑定到你的 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 的名称是您用来绑定到 [=214= 的名称] 像这样
<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 中声明的是您将在 selector 标签中的 HTML 中使用的路径或原始 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 中更容易地分解您的应用程序。我喜欢这种方法，因为您可以将所有工作部分放在一个文件中，而不是将多个部分放在 angular v1.
中如何将您的项目从 v1 转换为 v2？
根据我从开发团队那里听到的消息，如果您想将 v1 项目更新为 v2，您只需删除已弃用的 blob 并将 $scope 替换为 selector秒。我发现这个视频很有帮助。 Ionic 团队的一些成员与 angular 团队并肩工作，因为 v2 更加关注移动 https://youtu.be/OZg4M_nWuIk 希望这会有所帮助。
更新： 我通过添加示例进行了更新，因为 Angular 2 的官方实现已经浮出水面。
更新 2： 这似乎仍然是一个热门问题，所以我只是想我有一些资源，我在开始使用 angular 2 时发现它非常有用.
有用的资源：
有关 ES6 的更多信息，我建议查看新波士顿的 ECMAScript 6 / ES6 New Features Tutorials - YouTube Playlist
要编写 Typescript 函数并查看它们如何编译为 Javascript，请查看 Typescript language Playground
要按功能细分查看 Angular 1 等效项在 Angular 2 中的功能，请参阅 Angular.io - Cookbook -A1 A2 Quick Reference
没有完美的框架。您可以阅读 Angular 1 here and here. But that doesn't mean it is bad. The question is what problem are you solving. If you want to roll out a simple app quickly, which is lightweight, with limited data binding usage 中的缺陷，然后继续阅读 Angular 1。Angular 1 是 6 年前为解决快速原型设计而构建的，它做得很好。即使您的用例很复杂，您仍然可以使用 Angular1，但是您应该了解构建复杂 Web 应用程序的细微差别和最佳实践。如果您正在开发用于学习目的的应用程序，我建议您转到 Angular 2，因为那是 Angular 的未来所在。
需要注意的一件事是 angular2 使用的是打字稿。
我在实习期间用 cordova 做了 angular1，现在我正在做 angular2。我认为 angular2 将成为趋势，因为我认为它更有条理但缺点是当您遇到问题或困难时，可以参考的资源很少。 angular 1.x 有大量非常易于使用的个性化指令。
希望对您有所帮助。
这可能有助于您理解 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 提供嵌套组件。
- Angular2提供了一种同时执行两个以上系统的方法。
- 等等...
Angular v2 和 ReactJs 中的一个突出特点是它们都采用了新的 Web 组件开发架构。这意味着我们现在可以创建独立的 Web 组件，并将它们即插即用到世界上具有与该 Web 组件相同技术堆栈的任何网站。凉爽的！是的，非常酷。 :)
Angular v2 中另一个最显着的变化是它的主要开发语言是 none 而不是 TypeScript。虽然 TypeScript 属于微软，是 2015 年 JavaScript（或 ECMAScript6/ES6）的超集，但它有一些非常有前途的功能。我建议读者在阅读本教程后详细了解一下 TypeScript（这当然很有趣）。
在这里我要说的是，那些试图将 Angular v1 和 Angular v2 相互关联的人进一步混淆了读者，在我看来，Angular v1 和 Angular v2应该被视为两个不同的框架。在 Angular v2 中，我们有 Web-Components 开发 Web 应用程序的概念，而在 Angular v1 中我们必须使用控制器，并且（不幸或幸运的是）[=17= 中没有控制器] v2.
Angular 2 比 1 好得多，至少在它提供的方面：支持 Web 组件、使用打字稿、界面的性能和整体简单性，是我决定开始一个项目使用的原因angular 2. 但是，从一开始，我就意识到 angular 2 中存在一些问题（例如使用 apache 进行路由），很少或没有可用的文档，因此 [= 的文档和社区15=] 2 是 angular 2 最大的陷阱，因为它还不够发达。
我想说，如果您需要在较短的截止日期前快速提升站点，请使用众所周知的 angular 1，如果您的项目较长，并且有足够的时间调查新问题（你可能是第一个遇到的，如果你想到贡献，这可能是一个奖励，你可能会给 angular 2 社区）而不是 angular 2.
Angular2和Angular1基本上是同名的不同框架
angular 2 更适合 Web 标准的当前状态和 Web 的未来状态（ES6、不变性、组件、影子 DOM、服务工作者、移动兼容性、模块、打字稿等等……)
angular 2 扼杀了 angular 1 中的许多主要功能，例如 - 控制器、$scope、指令（替换为 @component 注释）、模块定义等等，甚至是一些简单的东西，例如ng-repeat 没有像以前那样保留。
无论如何，改变是好的，angular 1.x 有缺陷，angular 2 更适合未来的网络需求。
总结一下 - 我不建议您现在开始 angular 1.x 项目 - 这可能是最糟糕的时间，因为您稍后将不得不迁移到 angular 2，如果你决定 angular 而不是选择 angular 2，google 已经启动了一个项目 angular 2，当你完成项目 angular 2 应该已经在聚光灯下了。 如果你想要更稳定的东西，你可以考虑 react\elm 和 flux 和 redux 作为 JS 框架。
angular 2 会很棒，这是毫无疑问的。