AngularJS環境構築手順を詳しく解説

今回は、AngularJS 環境を構築する手順について詳しく説明します。AngularJS 環境を構築する際の 注意事項 について、実際の事例を見てみましょう。

AngularJSとは何ですか?

AngularJS は、オープンソースの Web アプリケーション フレームワークです。元々は 2009 年に MISKO Hevery と Adam Abrons によって開発されました。現在は Google によって管理されています

AngularJS機能

AngularJS は、リッチ インターネット アプリケーション (RIA) を作成するための強力な

JavaScript ベースの開発フレームワークです。

AngulajJS は、開発者に、クリーンな MVC (Model-View-Controller) 方法でクライアント アプリケーションを作成するためのオプション (

JavaScript を使用) を提供します。

AngularJS で書かれたアプリケーションはブラウザ間互換性があります。 AngularJS は JavaScript コードを使用して、各ブラウザーへの適応を自動的に処理します。

AngularJS はオープンソースで完全に無料で、世界中の何千人もの開発者によって開発および保守されています。 Apache License バージョン 2.0 に基づいてリリースされています。

全体として、AngularJS は、大規模で高性能な Web アプリケーションを構築しながら、メンテナンスを容易にするためのフレームワークです。

1. Angular-cli の機能を簡単に紹介します:

Angular-cli はフレームワークを素早く構築し、モジュール、サービス、クラス、ディレクティブなどを作成できます

コード分​​離やオンデマンド読み込みなどを実現できるwebpackの機能があります

; 開発環境

、テスト環境、本番環境を自動的に構成し、コードのパッケージ化、圧縮、ホットデプロイメント、モジュールテストやエンドツーエンドテスト

を実現します。 Angular-cli は、サフィックスを通じて sass とless のプリコンパイルを自動的に識別できます。 Angular-cli は作成時に TypeScript を構成でき、いくつかのパーソナライズされた構成も行うことができます

Angular-cli を通じて作成されたプロジェクト構造はベスト プラクティスであり、運用環境でも使用できます。

2.nodejsをインストールします

AngularJS には Nodejs が必要なので、最初に nodejs をインストールして、nodejs を使用する必要があります。nodejs のダウンロード アドレスは、https://nodejs.org/en/download/、 です。

3. npm と cnpm をインストールします

次のステップは、npm をインストールすることです NPM は、NodeJS とともにインストールされるパッケージ管理ツールで、NodeJS コードのデプロイメントにおける多くの問題を解決できます。 ユーザーがローカルで使用するために、他のユーザーが作成したサードパーティ パッケージを NPM サーバーからダウンロードできるようにします。

ユーザーがローカルで使用するために、他のユーザーが作成したコマンド ライン プログラムを NPM サーバーからダウンロードしてインストールできるようにします。

ユーザーが作成したパッケージまたはコマンド ライン プログラムを、他のユーザーが使用できるように NPM サーバーにアップロードできるようにします。

ここでnodejsとnpmのインストールは完了しましたが、Datianchaoにnpmでインストールするといくつか問題があるため、npmのパッケージでもあるcnpmを使ってインストールします。

cnpmをインストールしてコマンドを実行します

このコマンドを実行した後、完了を待ってから、cnpm version を入力して、インストールが完了したかどうかを確認します。ここではすでにインストールされているので、進むことができます。

cnpm をインストールした後、Angular-cli のインストールを開始します。

コマンドを実行npm i -g cnpm

次に、ng version コマンドを実行して、インストールが完了したかどうかと angular-cli のバージョンを確認できます

インストールが完了したら、ng コマンドを使用して、

プロジェクトの作成

を開始できます。 cnpm i -g angular-cli

4. プロジェクトの作成

angular-cli をインストールした後、プロジェクトを直接作成し、コマンド

を実行できます。 JustForTest はプロジェクト名です

このコマンドを実行すると大量のファイルが作成されるため、しばらく待つ必要があります。この手順には時間がかかり、nod_.modules のインストールが完了するまで待つ必要があります

。 ngserve を使用して直接開始します。

このようにして、直接 プロジェクトを開始することができます。ブラウザに http://localhost:4200 と入力して、

に直接アクセスします。 5. プロジェクトのインポート

オンラインでプロジェクトを探している場合、ローカルでプロジェクトを開始するにはどうすればよいでしょうか?以下で詳しく見てみましょう:

Da Mo 先生によるこのチュートリアルをぜひご覧になることをお勧めします: Angular2.0 ビデオ チュートリアルはここにあります

ここでは、Da Mo 先生のプロジェクトも使用します: NiceFish まず、git を介してプロジェクトをクローンする必要があります。これは、NiceFish のプロジェクト アドレスです: http://git.oschina.net/mumu。 -osc/NiceFish

プロジェクトのクローンが作成された後、コマンド ラインはプロジェクトが存在するディレクトリに移動します。

コマンドを実行

cnpm i -g @angular/cli

ここで説明させてください。前にグローバル angular-cli をインストールしました。

コマンドの実行が完了するのを待ってからコマンドを実行します

cnpm install

次に、コマンド

を実行します。 ng serve -prod -aot

その後、コンパイルが完了するまで待ちます。

完了したら、ブラウザに次のように入力します:

http://localhost:4200 プロジェクトにアクセスします。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がAngularJS環境構築手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。