AngularJS環境構築チュートリアル

この記事では初心者向けに Angular-cli の機能を中心に紹介しますので、参考にしてみてください。

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 はフレームワークを迅速に構築し、モジュール、サービス、クラス、ディレクティブなどを作成できます。コードの分離やオンデマンドのロードなどを実現します。

コードのパッケージ化、圧縮、ホットデプロイメントを実現できる開発環境、テスト環境、本番環境を自動的に構成し、モジュールのテストやエンドツーエンドも実現します。

Angular-cli はサフィックスを通じて sass と less のプリセットを自動的に識別できます。

Angular を使用して作成されたプロジェクト構造を作成することもできます。 cli はベストプラクティスであり、本番環境で使用できます。

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

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

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

次のステップは、npm をインストールすることです

NPM は、NodeJS の多くの問題を解決できます。一般的な使用シナリオは次のとおりです:

サードパーティのパッケージがローカルで使用される場合、他のユーザーが作成したファイルをユーザーがダウンロードできるようにします。

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

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

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

cnpmをインストールし、コマンド

npm i -g cnpm

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

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

コマンドを実行します

cnpm i -g angular-cli

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

インストールが完了したら、 ng コマンドを実行してプロジェクトの作成を開始します。

4. プロジェクトの作成

angular-cli をインストールした後、コマンド

ng new JustForTest

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

このコマンドを実行すると、大量のファイルが作成されます。このステップには長い時間がかかります。nod_.modules のインストールが完了するまで待つ必要があります

ngserve を使用して直接開始してください。

このようにして、ブラウザに http://localhost:4200 と入力すると、直接アクセスできます。

5. プロジェクトを探している場合。インターネット、ローカルで起動するにはどうすればよいですか?詳細にやってみましょう:

Da Mo 先生によるこのチュートリアルをご覧になることをお勧めします: Angular 2.0 のビデオ チュートリアルはこちらです

ここでデモンストレーションするために、Da Mo 先生のプロジェクト: NiceFish First も使用します。クローン作成後、プロジェクトを git 経由で転送する必要があります。ここではこれを説明しません。これは NiceFish のプロジェクト アドレスです: http://git.oschina.net/mumu-osc/NiceFish

クローンを作成すると、コマンド ラインでプロジェクトが配置されているディレクトリに移動します。

コマンドを実行します

cnpm i -g @angular/cli

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

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

cnpm install

を実行してから、コマンド

ngserve -prod -aot

を実行して、コンパイルが完了するまで待ちます。

完了後、ブラウザに

http://localhost:4200 と入力してプロジェクトにアクセスできます。

関連する推奨事項:

詳細な例とグラフィック例を含む Vue、ノード、Webpack 環境構築チュートリアル

詳細な例を含む Vue 環境を構築するための簡単なチュートリアル

PHPサーバー環境

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