ホームページ >ウェブフロントエンド >jsチュートリアル >AngularJS、Angular 2、Angular4 の違いの詳細な説明

AngularJS、Angular 2、Angular4 の違いの詳細な説明

小云云
小云云オリジナル
2018-02-24 15:05:174423ブラウズ


文字通りの違い

(1) よく言われる Angular 1 は AngularJS を指しますが、Angular 2 からは名前が変更されています。もはや JS ではなく、純粋な Angular です
(2) 驚くべきバージョン変更もあります: Angular 2 から Angular 4 に直接ジャンプするのに、なぜ Angular 3 がないのですか?

アーキテクチャの違い

Angular 1 は典型的な MVC アーキテクチャ (モデル - ビュー - コントローラー) であり、そのアーキテクチャは次の図に示すとおりです:

MVC 架构示意图

Angular 1 の MVC アーキテクチャと比較すると、Angular 2 は典型的なコンポーネントです。ベースのアーキテクチャ。このように、構造的には React.js に似ています。以下の図に示すように:
Angular 2  架构

なぜ Angular 2 を急いで起動する必要があるのでしょうか?

論理的に言えば、Angular 1.x バージョンはすでに十分強力であるのに、なぜ急いで Angular 2 をリリースするのでしょうか?これはモバイル アプリのニーズによって推進されています。従来の考え方によれば、Angular 2 は Angular 1.x のアップグレード版であるはずですが、実際にはそうではなく、最も基本的な構文が異なります。 Angular 1.x は JavaScript ベースのフレームワークであり、Angular 2 は TypeScript ベースのフレームワークです。

したがって、Angular を学習することに決めたときは、Angular 1 と Angular 2 のどちらを学習するかを決定する必要があります。 それでは、どのバージョンを学習するのが良いのでしょうか? プロジェクトのニーズによって異なりますので、何とも言えません。 単純に学習している場合は、もちろんバージョンが高いほど良いので、時代に遅れないようにしましょう。

Angular 3 が見つからないのはなぜですか?

Angular チームが Angular 3 を開発していたとき、ルーター モジュールに問題がありました。多くの苦労の末、彼らは Angular 3 を諦めて Angular 4 に直接移行することにしました

Angular 2 の利点は何ですか?

Angular 1.x と比較して、Angular 2 はサイズが小さいのはなぜですか? 率直に言うと、PC 側の WEB 開発にのみ使用する場合は、速い です。 Angular 1.x で十分です。モバイル アプリに使用すると、ユーザー エクスペリエンスの点で少し限界があります。 ;  如果仅仅用于PC 端的WEB开发,  Angular 1.x足以应对; 如果是用于 mobile app ,在用户体验方面,略显捉襟见肘!

Angular 4 有什么好?

Angular 4 是  Angular 2 的升级版本, 也就是说,从 Angular 2之后,它们的版本一脉相承,是升级版本,而不是推到重来的版本。 Angular 4 比 Angular 2 更快。
所以说,  从 Angular 1.x 到 Angular 2 ,再发展到 Angular 4, 其路线就是为了更快一些。

Angular 1写的代码无法用在Angular 2上,这是为什么?

Angular 1 代码是基于 JavaScript 写的, 代码示例:

var angular1 = angular
       .module('uiroute', ['ui.router']);
angular1.controller('CarController', function ($scope) {
    $scope.CarList = ['Audi', 'BMW', 'Bugatti', 'Jaguar'];
});

Angular 2 代码 是基于 TypeScript 写的。 TypeScript与JavaScript 的区别大了去了。 TypeScript 是 JavaScript的超集 (superset)。 看一段 Angular 2 代码:

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app.module";
platformBrowserDynamic().bootstrapModule(AppModule);  
import { NgModule } from "@angular/core";  
import { BrowserModule } from "@angular/platform-browser";  
import { AppComponent } from "../app/app.component";  
@NgModule({  
    imports: [BrowserModule],  
    declarations: [AppComponent],  
    bootstrap: [AppComponent]  
})  
export class AppModule { }  
import { Component } from '@angular/core'  @Component({  
    selector: 'app-loader',  
    template: `  
<p>   
<p>  
 <h4>Welcome to Angular with ASP.NET Core and Visual Studio 2017</h4></p></p>`  
})  
export class AppComponent{}

如果不熟悉 TypeScript 语法,上面这段代码不知所云! 既然差异这么大,把 Angular 1 升级到 Angular 2 难度之大,可以预见!

这么看来, Angular  1 与 2 的差别,并不是什么框架上的差别,而是它们的语法完全不一样, 一个用JavaScript,一个用 TypeScript。 那为什么Angular 4 是 Angular 2 的升级版呢?  答案很简单, 因为 4和2 用的都是 TypeScript 用法!

代码重用方法

在 Angular 1 中,最为常用的是 $scope 在 Angular 2和4中被去掉了。在新版本中,更多推崇的是 directive  和 controller,  通过对 component

Angular 4 の良い点は何ですか?
Angular 4 は Angular 2 のアップグレードされたバージョンです。つまり、Angular 2 以降、それらのバージョンは同じ流れをたどっており、新しいバージョンにプッシュされるものではありません。 Angular 4 は Angular 2 よりも高速です。

したがって、Angular 1.x から Angular 2、そして Angular 4 へのルートはより高速になります。

Angular 1 で書かれたコードは Angular 2 では使用できません。これはなぜですか?

Angular 1 コードは JavaScript に基づいて記述されています。コード例:
rrreee

Angular 2 コードは TypeScript に基づいて記述されています。 TypeScript と JavaScript の違いは非常に大きいです。 TypeScript は JavaScript のスーパーセットです。 Angular 2 コードの一部を見てみましょう:

rrreee

TypeScript 構文に慣れていない場合、上記のコードは理解できないでしょう。 違いが非常に大きいため、Angular 1 を Angular 2 にアップグレードするのは予想通り困難です。 Angular 2 的APP 效果

こうしてみると、Angular 1と​​Angular 2の違いはフレームワークの違いではなく、JavaScriptを使用するものとTypeScriptを使用するもので構文が全く異なります。 では、なぜ Angular 4 は Angular 2 のアップグレード版なのでしょうか? 答えは簡単です。4 と 2 は両方とも TypeScript を使用しているからです。
コードの再利用方法

Angular 1 で最もよく使用されるのは $scope ですが、Angular 2 と 4 では削除されました。新しいバージョンでは、component コンポーネントを分割することで、directivecontroller の使用がより推奨されます。

モバイル アプリのサポート

Angular 1 の元の設計は、応答性の高い Web ページと双方向のデータ バインディング Web アプリケーションを実装することです。Html5 の概念の観点から見ると、Angular 1 は H5 をサポートする優れたフロントエンド フレームワークです。 Angular に対する期待が高まるのであれば、Angular がモバイル アプリを適切にサポートし、APP のネイティブ ユーザー エクスペリエンスを実現できることを期待します。 これが Angular 1 の欠点です。この言葉を考慮して、Angular 2 がリリースされ、その後 Angular 4 がリリースされました。


次に、Angular 2 のアーキテクチャに焦点を当てましょう

🎜Angular 2 アーキテクチャ🎜🎜 Angular 2 は、APP のネイティブ効果を実現するために、NativeScript テクノロジーを独自に導入したモバイル アプリ用のアーキテクチャであると言えます。 🎜🎜🎜🎜🎜APPのクロスプラットフォーム問題を解決する方法🎜🎜Angular 2はモバイルアプリのクロスプラットフォーム問題を解決します。いわゆるクロスプラットフォームとは、Angular 2で書かれたWebが同じネイティブユーザーを実現できることを意味します。 iOS と Android では 1 セットのコードのみを記述する必要があります。 🎜🎜概要🎜🎜 Angular 開発が初めての場合は、比較的単純な Angular 2 から始めることをお勧めします。もちろん、Angular 4 は継続的に更新されていますが、バージョンが安定したら、Angular に移行してください。 4! 🎜🎜関連するおすすめ: 🎜🎜

Angular4の一般的なパイプライン例の詳細な説明

完全なAngular4 FormTextコンポーネントメソッドの作成

angular4の実際のプロジェクト構築の詳細な説明


以上がAngularJS、Angular 2、Angular4 の違いの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。