AngularJS 与 Angular [英] AngularJS vs Angular

问题描述

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

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

解决方案

让我先说一下，我假设您和所有阅读本文的人已经对 Angular 1 感到满意(现在称为 AngularJS，而不是简单地Angular 用于较新版本).话虽如此，让我们来看看 Angular 2+ 中的一些新增功能和主要差异.

1. 他们添加了一个有角度的 cli.

您可以通过运行 ng new [app name] 来开始一个新项目.您可以通过运行 ng serve 来为您的项目提供服务在此处了解更多信息:https://github.com/angular/angular-cli

2. 您的 Angular 代码是用 ES6 Typescript 编写的，它会在运行时在浏览器中编译为 Javascript.

要全面了解这一点，我建议您查看答案底部的一些资源列表.

3. 项目结构

在基本结构中，您将有一个 app/ts 文件夹，您将在其中完成大部分工作和一个 app/js 您将在 app/js 文件夹中找到带有 .js.map 扩展名的文件.他们将您的.ts"文件映射"到您的浏览器以进行调试，因为您的浏览器无法读取本机打字稿.

更新:测试版结束.项目结构发生了一些变化，在大多数情况下，如果您使用的是 angular cli，您将在src/app/ 文件夹.在入门项目中，您将拥有以下内容.

app.component.css应用程序组件.htmlapp.component.spec.tsapp.component.tsapp.module.ts索引.ts

app.component.css:您应该使用特定于 component.html

的 CSS 文件

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 的超集.不要被吓倒；它可以让您的开发更轻松.玩了几个小时后，我觉得我已经很好地掌握了它，三天后就完全掌握了.

4. 您绑定到 HTML 的方式与在 Angular 1 指令中的绑定方式类似.所以像 $scope 和 $rootScope 这样的变量已经被弃用了.

您可能已经暗示了这一点.Angular 2 仍然是 MV*，但您将使用组件"作为将代码绑定到模板的一种方式，例如，采用以下方法

 import { Component } from '@angular/core';@成分({选择器:'我的应用'，模板:'<h1>你好，世界！'})导出类 AppComponent {}

此处将 import 语句视为 v1 控制器中的依赖项注入.你使用 import 来import你的包，其中 import {Component} 表示你将制作一个 component您想绑定到您的 HTML.

注意 @Component 装饰器，你有一个 selector 和 template.这里将 selector 视为您使用的 $scope，就像您使用 v1 directives 一样，其中 selector 的名称> 是你用来绑定到你的 HTML 的东西

</我的应用程序>

其中 <my-app> 是您将使用的自定义标记的名称，它将充当模板中声明内容的占位符.即)

你好，世界！

.而这在 v1 中将如下所示:

HTML

{{hello}}

JS

$scope.hello = "Hello World!"

你也可以在这些标签之间添加一些东西来生成加载消息，像这样:

正在加载... </my-app>

然后它会显示Loading..."作为加载消息.

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

<小时>

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

HTML

{{hello}}

在 v1 中，这看起来像

JS

angular.module('controller', []).controller('myCtrl', function( $scope) {$scope.hello = "你好世界！"})

这是我真正喜欢 v2 的地方.我发现指令在 v1 中对我来说是一个陡峭的学习曲线，即使我让他们弄清楚我经常让 CSS 渲染不是我想要的.我觉得这更简单.

V2 允许更轻松地扩展您的应用程序，因为您可以比在 v1 中更轻松地拆分应用程序.我喜欢这种方法，因为您可以将所有工作部件放在一个文件中，而不是在 angular v1 中包含多个.

如何将您的项目从 v1 转换为 v2?

<小时>

根据我从开发团队听到的消息，如果您想将 v1 项目更新到 v2，您只需完成并删除已弃用的 blob 并将 $scope 替换为选择器s.我发现这个视频很有帮助.它与一些与 angular 团队并肩工作的 Ionic 团队一起工作，因为 v2 更加关注移动设备 https://youtu.be/OZg4M_nWuIk希望这会有所帮助.

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

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

有用的资源:

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

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

要查看 Angular 1 等效项在 Angular 2 中的功能细分，请参阅 Angular.io - Cookbook -A1 A2 快速参考

Months ago, I decided to study Angular. When I was doing some advance and create some app using it, I realize that Angular 2 is in Developer preview, so it's a matter of time before it's going to be released. Because Angular 2 is not going to be compatible with Angular 1, and there are a lot of changes, the question is, is it better to continue developing with Angular 1.x or start developing Angular 2?

It's a fact that we don't always have to be using the latest version nor the newest language on the market, but in this case, the app is still small so I could change without problems.

解决方案

Let me preface by saying, I'm assuming you and everyone who will be reading this is already comfortably with Angular 1 (now referred to as AngularJS, as opposed to simply Angular for the newer versions). That being said, let's get into some of the additions and key differences in Angular 2+.

1. They added an angular cli.

You can start a new project by running ng new [app name]. You can serve your project by running ng serve learn more here: https://github.com/angular/angular-cli

2. Your angular code is written in ES6 Typescript and it compiles at runtime to Javascript in the browser.

To get a full grasp on this I recommend checking out some the resource list I have at the bottom of my answer.

3. Project Structure

In a basic structure, you will have a app/ts folder where you'll be doing most your work and a app/js You'll find in the app/js folder files with a .js.map extension. They "map" your ".ts" files to your browser for debugging as your browser cannot read native typescript.

Update: It's out of beta. The project structure changed a bit, in most cases and if you're using the angular cli, you'll be working in the src/app/ folder. In a starter project, you'll have the following.

app.component.css 
app.component.html
app.component.spec.ts
app.component.ts 
app.module.ts
index.ts

app.component.css: CSS file you should use specific to the component.html

app.component.html: A view (variable declared in the app.component.js)

app.component.spec.ts: used for testing app.component.ts

app.component.ts: Your code that binds to app.component.html

app.module.ts: This it what kicks off your app and where you define all plugins, components, services, etc. This is the equivalent of the app.js in Angular 1

index.ts used to define or export project files

Additional information:
Pro tip: you can run ng generate [option] [name] to generate new services, components, pipes, etc.

Also the tsconfig.json file is important as it defines TS compile rules for your project.

If you're thinking I have to learn a whole new language?... Uh... kinda, TypeScript is a superset of JavaScript. Don't be intimidated; it's there to make your development easier. I felt like I had a good grasp on it after just a few hours playing with it, and had it all down after 3 days.

4. You bind to your HTML similarly like how you would if in an Angular 1 directive. So variable like $scope and $rootScope have been deprecated.

This one you may have been implied. Angular 2 is still a MV* but you'll be using 'components' as a way to bind code to your templates, for instance, take the following

    import { Component } from '@angular/core';

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

    export class AppComponent {}

Here think of the import statement as your dependency injection in a v1 controller. You use import to import your packages, where the import {Component} says you'll be making a component you'd like to bind to your HTML.

Notice the @Component decorator you have a selector and template. Here think of the selector as your $scope that you use like you use v1 directives where the name of the selector is what you use to bind to your HTML like so

<my-app> </my-app>

Where <my-app> is the name of your custom tag you'll use that will act as a placeholder for what's declared in your template. i.e.) <h1> Hello World! </h1>. Whereas this would look like the following in v1:

HTML

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

JS

$scope.hello = "Hello World!"

Also can you add something between these tags to generate a loading message, like this:

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

Then it will display "Loading..." as the loading message.

Note that what's declared in template is the path or the raw HTML you'll be using in your HTML in your selector tag.

---

A fuller implementation of Angular 1 would look more like this:

HTML

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

In v1 this would look something like

JS

angular.module('controller', [])



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

This is what I really like about v2. I found directive was a steep learning curve for me in v1 and even when I had them figured out I often had the CSS render not how I intended. I find this is way simpler.

V2 allows for easier scalability of your app since you can break up your app up easier than you could in v1. I like this approach as you can have all your working parts in one file as opposed to having several in angular v1.

What about converting your project from v1 to v2?

---

From what I've heard from the development team if you'd like to update your v1 project to v2 you'll just be going through and deleting deprecated blobs and replace your $scopes with selectors. I found this video helpful. It's with some of the Ionic team that are working side by side with the angular team as v2 has a stronger focus on mobile https://youtu.be/OZg4M_nWuIk Hope this helps.

UPDATE: I updated by adding examples as official implementations of Angular 2 have surfaced.

UPDATE 2: This still seems to be a popular question so I just thought I'd some resource I found very helpful when I started working with angular 2.

Helpful Resources:

For more on ES6, I recommend checking out The New Boston's ECMAScript 6 / ES6 New Features Tutorials - YouTube Playlist

To write Typescript functions and see how they compile to Javascript check out the Typescript language Playground

To see a function by function breakdown of what the Angular 1 equivalence is in Angular 2 see the Angular.io - Cookbook -A1 A2 Quick Reference

这篇关于AngularJS 与 Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！