検索

ホームページ >ウェブフロントエンド >jsチュートリアル >アプリをAngular 1.5コンポーネント以降にアップグレードしてください！

アプリをAngular 1.5コンポーネント以降にアップグレードしてください！

Christopher Nolan
Christopher Nolanオリジナル
2025-02-18 11:37:10270ブラウズ

アプリをAngular 1.5コンポーネント以降にアップグレードしてください！

この記事は、ダン・プリンスとミカエラ・レーアによってピアレビューされました。 SetePointコンテンツを最高にするためにSitePointのピアレビュアーのすべてに感謝します！ AngularJSの新しいリリースごとに、開発チームはAngularJS 1.xと2の間のギャップを埋めようとしています。AngularJS1.5のリリースにより、開発者はAngularjs 2.0に構造的に類似したアプリケーションを作成できます。 このチュートリアルでは、AngularJS 1.4でグリッドディレクティブを作成します。次に、手順を1.5にアップグレードし、その後、バージョン2.0で動作する方法を確認します。

キーテイクアウト

AngularJS 1.4から始めてください：AngularJS 1.4にシンプルなグリッドディレクティブを作成してJSONアレイを表示し、レイアウトデザインにブートストラップを使用しています。

AngularJS 1.5へのアップグレード：AngularJS 1.4ディレクティブをスクリプトリファレンスを置き換え、構成を簡素化し、将来のアップグレードに備える新しいコンポーネントディレクティブヘルパーメソッドを使用して、1.5に1.5に遷移します。 AngularJS 1.5のコンポーネントの利点：AngularJS 1.5のコンポーネントは、ディレクティブよりも構文糖を提供し、デフォルトの構成と合理化されたアプローチを提供します。 Angularjs 2.0への移行：1.xバージョンとのアーキテクチャの違いがあり、追加のライブラリと新しいセットアップが必要であるため、Angularjs 2.0に移動するときにゼロから開始する必要性を理解します。

AngularJS 2.0コンポーネントの利用：Angularjs 2.0を使用してAngularjs 2.0にコンポーネントを実装し、コードの保守性とテスト可能性を高め、Angularjs 2.0がコンポーネントベースであり、階層依存噴射や動的荷重などの高度な機能をサポートしていることを認識しています。

    始めましょう
    • AngularMigrateappというプロジェクトディレクトリを作成することから始めましょう。このフォルダー内で、index.htmlというHTMLページを作成します。 ページがどのように見えるかは次のとおりです
    • Angular Frameworkと同様に、Bootstrapを使用してディレクティブレイアウトを設計します。これらの両方のファイルをCDNSから直接含めています。
  • グリッドディレクティブの作成
    • JSONアレイを表示するシンプルなグリッド指令を作成しましょう。 AngularJSモジュールを作成することから始めます
    • 一連の例データを保持する従業員と呼ばれる定数を定義しました。次に、この配列をHomeCtRLに注入し、コントローラーのスコープで使用できるようにします。
MyGridというディレクティブを作成しましょう。これを使用して、上記のJSONアレイを表示します。

このようなタグ名でディレクティブを使用したい：

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
したがって、制限オプションを追加して、次のように指定します

次に、従業員のデータを視野から指示に渡します。したがって、拘束力として追加します：

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

ここで、従業員のデータを属性として指令に渡すことができます：

angular<span>.module('myApp', [])
</span>    <span>.constant('employees', [{
</span>        <span>firstName: 'Rima',
</span>        <span>lastName: 'George',
</span>        <span>location: 'San Francisco'
</span>    <span>}, {
</span>        <span>firstName: 'Shaun',
</span>        <span>lastName: 'John',
</span>        <span>location: 'Germany'
</span>    <span>}, {
</span>        <span>firstName: 'Rahul',
</span>        <span>lastName: 'Kurup',
</span>        <span>location: 'Bangalore'
</span>    <span>}, {
</span>        <span>firstName: 'Samson',
</span>        <span>lastName: 'Davis',
</span>        <span>location: 'Canada'
</span>    <span>}, {
</span>        <span>firstName: 'Shilpa',
</span>        <span>lastName: 'Agarwal',
</span>        <span>location: 'Noida'
</span>    <span>}])
</span>
    <span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span>        $scope<span>.employees = employees;
</span>    <span>}])
</span>

最後になりましたが、データを表示するにはHTMLテンプレートが必要です。 

<span>.directive('myGrid', function() {
</span>    <span>return {
</span>    <span>}
</span><span>})
</span>
index.htmlの本文で次のHTMLテンプレートスクリプトを追加します。

上記のコードでわかるように、情報プロパティを繰り返して、従業員リストに各アイテムを表示しています。 
<span><span><span><my-grid</span>></span><span><span></my-grid</span>></span>
</span>
index.html内のmygridディレクティブを使用しましょう。次のコードを追加します：

HomeCtRLコントローラーを指定し、その内部では指令を使用しました。変更を保存し、index.htmlページを参照します。これがアクション中のデータグリッドのデモです：

.directive('myGrid', function() { return { restrict: 'E' } }) にアップグレードします

これまでのところ、バージョン1.4を使用してAngularJSディレクティブを作成しましたが、非常にうまく機能しています。それでは、AngularJS 1.5で同じコードを使用して、何かが壊れるかどうかを確認しましょう。

既存のスクリプトリファレンスをバージョン1.5へのCDNリンクに置き換えましょう。ページを更新しようとすると、すべてが正常に動作し続ける必要があります。 1.xラインのこの新しいリリースにより、フレームワークはコンポーネントを使用してAngularJS 2.0の動作方法に近づいています。コードでこれを利用して、最終的にバージョン2.0への移行を簡単にします。 AngularJS 1.5では、コンポーネントは、デフォルトの世話をし、構成がより簡単な指令の構文糖です。特に将来アップグレードしたい人のために、彼らは代替品として好まれるべきです。

AngularJSを使用する場合、開発者は一般にコントローラーベースのアプローチを使用する傾向がありますが、アプリケーションが成長し始めるにつれて多くの問題を引き起こす可能性があります。コントローラーとビューベースのアプローチは、NGコントローラー/ビューを繰り返しにつながりますが、コンポーネントベースのアプローチは、コードを繰り返すことなく、より大きなコンポーネントに構成できるコンポーネントを作成することで問題を解決します。

新しいコンポーネントディレクティブヘルパーメソッドを使用して、既存のコードを変更してみましょう。まず、コンポーネントを作成することから始めます：

関数を取るディレクティブメソッドとは異なり、コンポーネントメソッドはオブジェクトを取ります。ディレクティブにあるのと同じオブジェクトを、異なるテンプレートで渡します。 HTMLテンプレートは次のとおりです

ここに変更されたコンポーネントコードがあります：

上記のコードに見られるように、

古い指令にあるすべてのオプションを渡しました。

index.htmlページでmycompというコンポーネントを作成します 

<span>.directive('myGrid', function() {
</span>    <span>return {
</span>        <span>restrict: 'E',
</span>        <span>scope: {
</span>            <span>info: '=info'
</span>        <span>}
</span>    <span>}
</span><span>})
</span>
変更を保存してページを更新すると、データが表示されていないが、ブラウザコンソールにもエラーがないことがわかります。

公式サイトからのコンポーネントと指令の比較チャートを見ると、範囲が常にコンポーネントに分離されていることがわかります。

アプリをAngular 1.5コンポーネント以降にアップグレードしてください！

したがって、データをコントローラーにバインドするために、Bindingsオプションを使用する必要があります。コンポーネントは要素のみに制限されているため、制限オプションは不要になります。

ここに修正コードがあります：

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
バインディング情報はコントローラーにバインドされます。コントローラーのデフォルトエイリアスは$ ctrlであり、テンプレート内では、それを使用して情報プロパティにアクセスします。

ページを更新すると、mycompコンポーネントを使用して表示されたデータを表示できるはずです。 
angular<span>.module('myApp', [])
</span>    <span>.constant('employees', [{
</span>        <span>firstName: 'Rima',
</span>        <span>lastName: 'George',
</span>        <span>location: 'San Francisco'
</span>    <span>}, {
</span>        <span>firstName: 'Shaun',
</span>        <span>lastName: 'John',
</span>        <span>location: 'Germany'
</span>    <span>}, {
</span>        <span>firstName: 'Rahul',
</span>        <span>lastName: 'Kurup',
</span>        <span>location: 'Bangalore'
</span>    <span>}, {
</span>        <span>firstName: 'Samson',
</span>        <span>lastName: 'Davis',
</span>        <span>location: 'Canada'
</span>    <span>}, {
</span>        <span>firstName: 'Shilpa',
</span>        <span>lastName: 'Agarwal',
</span>        <span>location: 'Noida'
</span>    <span>}])
</span>
    <span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span>        $scope<span>.employees = employees;
</span>    <span>}])
</span>
にアップグレードします 注：Angularjs 2.0はまだベータ版です。使用しているバージョンは、Angular2.0.0-Beta.8。

です

アプリの既存のバージョンのAngularjsをCDNのバージョン2.0へのリンクに置き換えて、何かが壊れるかどうかを確認しましょう。

ページを更新した後、ページには何も表示されません。ブラウザコンソールをチェックすると、いくつかのエラーも表示できます。

ご覧のとおり、コンポーネントコードはAngular 2.0でうまく機能しませんでした！
<span>.directive('myGrid', function() {
</span>    <span>return {
</span>    <span>}
</span><span>})
</span>

まさにゼロから始めて、新しいバージョンがどのように機能するかを見てみましょう。その後、コンポーネントを移植しようとします。

単一のスクリプトタグにフレームワークを含めることでAngular 1.xを開始することができますが、Angular 2.0の状況は変更されました。機能するためには、他のライブラリがいくつか必要です。スクリプトタグを介してこれらを個別にロードすることは開発の場合は問題ありませんが、生産のビルドプロセスの一部としてバンドルされることを目的としています。

公式のクイックスタートガイドをご覧ください。2.0を開始するには、他のライブラリと開発依存関係が必要になることがわかります。 アプリをAngular 1.5コンポーネント以降にアップグレードしてください！

上記のファイルは、AngularJS 2.0アプリケーションで必要なすべての依存関係を示しています。変更を保存し、NPMを使用して必要な依存関係をインストールしてください：

APPと呼ばれるサブフォルダーを作成し、内部は次のコードを使用してapp.component.jsというファイルを作成します。

上記のコードでは、Angular Core Namespace Ng.coreを使用してコンポーネントを作成しています。コンポーネントのセレクターを私のコンプとして定義しました。アプリのテンプレートと同じHTML、grid.htmlを使用しています。コンポーネントのコンストラクターで従業員オブジェクトを定義しました。

次のコードでmain.jsと貼り付けたファイルを作成します。
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

これは、Angularに、作成したばかりのコンポーネントをロードするように指示します。

次に、アプリフォルダーの外側のindex.htmlというファイルを作成し、次のコードに貼り付けます。

上記のindex.htmlページは、Angularjs 2.0アプリケーションのスターターテンプレートです。必要なすべての依存関係を含め、ボディタグ内にコンポーネントを使用しました。 
angular<span>.module('myApp', [])
</span>    <span>.constant('employees', [{
</span>        <span>firstName: 'Rima',
</span>        <span>lastName: 'George',
</span>        <span>location: 'San Francisco'
</span>    <span>}, {
</span>        <span>firstName: 'Shaun',
</span>        <span>lastName: 'John',
</span>        <span>location: 'Germany'
</span>    <span>}, {
</span>        <span>firstName: 'Rahul',
</span>        <span>lastName: 'Kurup',
</span>        <span>location: 'Bangalore'
</span>    <span>}, {
</span>        <span>firstName: 'Samson',
</span>        <span>lastName: 'Davis',
</span>        <span>location: 'Canada'
</span>    <span>}, {
</span>        <span>firstName: 'Shilpa',
</span>        <span>lastName: 'Agarwal',
</span>        <span>location: 'Noida'
</span>    <span>}])
</span>
    <span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span>        $scope<span>.employees = employees;
</span>    <span>}])
</span>
変更を保存し、NPMスタートを使用してサーバーを起動します。このコマンドは、ブラウザにindex.htmlをロードするLite-Serverというローカル開発サーバーを実行します。

しかし、それでもデータは表示されません！

AngularJS 2.0では、ループの構文は少し異なります。 grid.htmlのループ部分を以下に示すように変更します：

変更を保存してサーバーを再起動すると、アプリに表示されている従業員のデータを確認できるはずです。 

<span>.directive('myGrid', function() {
</span>    <span>return {
</span>    <span>}
</span><span>})
</span>

それを包みます

このチュートリアルでは、フレームワークのVerison 1.4を使用してAngularJSディレクティブを作成しました。私たちは、バージョン1.5のコンポーネント構文を活用するための指令をリファクタリングしました。最後に、Angularバージョン2.0で動作するようにアップグレードしました。

AngularJSアプリの移行をより詳細に見るには、公式移行ガイドを読むことを検討してください。 Angular 2コードはTypeScriptとDartで記述することもできます。興味がある場合は、それぞれTypeScriptまたはDARTのAngularJS 2を開始するための公式ガイドを読むことをお勧めします。

以下のコメントであなたの考えや提案を共有してください！

角度成分へのアップグレードに関するよくある質問（FAQ）

​​ AngularjsからAngularにアップグレードするには、いくつかの利点があります。 Angularは、階層的依存関係の注入とコンポーネントベースのアーキテクチャにより、パフォーマンスが向上しています。また、Angularjsとは異なり、モバイルデバイスもサポートしています。 Angularは、静的タイピング、インターフェイス、クラスを提供するTypeScriptを使用して、コードをより保守可能でテスト可能にします。 Angularはまた、依存関係の注入、モジュール性、およびテスト能力を改善しました。

AngularjsアプリケーションをAngularに移動するには、AngularjsからAngularに移動するにはいくつかのステップが含まれます。まず、AngularJSスタイルガイドに従って、コードをコンポーネント構造に整理し、モジュールローダーを使用して、AngularJSアプリケーションを移行用に準備する必要があります。次に、Angularをアプリケーションにブートストラップし、AngularJSコンポーネントのAngularコンポーネントを作成し、サービスを移行することにより、移行プロセスを開始できます。最後に、アプリケーションからAngularjsを削除できます。Angularのコンポーネントベースのアーキテクチャは、パフォーマンスをどのように改善しますか？ Angularのアーキテクチャは、単方向のデータフローと変更の検出を可能にすることにより、パフォーマンスを向上させます。 Angularの各コンポーネントには明確に定義されたインターフェイスがあり、独自の動作とレンダリングをカプセル化します。これにより、アプリケーションが理解し、テストし、保守しやすくなります。一方向のデータフローにより、ビューが常にモデルの投影であることが保証され、プログラミングモデルが簡素化され、パフォーマンスが向上します。

Angularは、モバイルデバイスをどのようにサポートしますか？

Angularは、レスポンシブレイアウトとタッチサポートを提供することにより、モバイルデバイスをサポートします。また、怠zyなロードや非同期テンプレートコンパイルなど、モバイルデバイスのパフォーマンス最適化も提供します。 Angularはまた、モバイルデバイスにインストールしてオフラインで動作できるプログレッシブWebアプリ（PWAS）もサポートしています。コンポーネントの動的テスト環境を作成できます。また、JavaScriptコードをテストするための行動主導の開発フレームワークであるJasmineと、テストランナーのKarmaを使用することもできます。 Angularはまた、分度器とのエンドツーエンドテストをサポートします。

角度を学習するために利用可能なリソースはありますか？

公式のAngularドキュメント、オンラインチュートリアルなど、Angularの学習に利用できるリソースはたくさんあります。本、コース。 Angular Communityも非常に活発で協力的であり、多くのフォーラム、ブログ、Stackoverflowの質問が参照されています。

以上がアプリをAngular 1.5コンポーネント以降にアップグレードしてください！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript typescript json bootstrap html npm angular Static Array Object if for while include try Directory Error continue restrict using Interface Namespace finally Attribute Property map JS console function default constructor this display transition issue everything Access Other
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：FireBaseを使用したデータをグラフ化します次の記事：FireBaseを使用したデータをグラフ化します

関連記事

続きを見る