ホームページ >ウェブフロントエンド >jsチュートリアル >angularjs の開発環境をセットアップするにはどうすればよいですか? angularjsによる開発環境構築プロセスの分析

angularjs の開発環境をセットアップするにはどうすればよいですか? angularjsによる開発環境構築プロセスの分析

寻∝梦
寻∝梦オリジナル
2018-09-06 15:28:181444ブラウズ

この記事では主にangularjsの開発環境の構築について紹介します。 angularjsの開発環境を構築する手順を紹介します。見たいものを見たくない場合は、この記事を一緒に読み始めましょう

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

Angular-cli は、フレームワークをすばやく構築し、モジュール、サービス、クラス、ディレクティブなど。

はコード分離、オンデマンドロードなどを実現できるwebpackの機能を備えています。コードのパッケージ化、圧縮、ホット デプロイメントを実現でき、モジュールの実装も可能です。 テスト、エンドツーエンドのテスト

Angular-cli はサフィックスを通じて sass などのプリコンパイルを自動的に識別できます

Angular-cli は TypeScript を設定できます。

Angular を使用して作成したプロジェクト構造はベスト プラクティスであり、運用環境で使用できます。 2. 次に、nodejs のインストールを開始します。 Nodejs を使用するには、最初に nodejs をインストールする必要があります。nodejs、nodejs を使用する必要があります。 ダウンロード アドレスは次のとおりです: https://nodejs.org/en/download/ (さらに詳しく知りたい場合は、PHP 中国語 Web サイトにアクセスしてください

) AngularJS リファレンス マニュアル

コラム)

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 と入力してプロジェクトにアクセスできます。

それでは、angularjs の構築と開発プロセスに関するこの記事はここで終わります (angularjs 関連の知識をさらに知りたい場合は、PHP 中国語 Web サイトの AngularJS Learning Manual コラムを参照してください)。ご質問がございましたら、以下よりお問い合わせください。

【編集者のおすすめ】

angularjsでWebアプリケーションを開発するには? Angularjs開発Webアプリケーション例

angularjsのルーティング原理をご存知ですか? angularjs ルーティングの詳細な原​​則は次のとおりです

以上がangularjs の開発環境をセットアップするにはどうすればよいですか? angularjsによる開発環境構築プロセスの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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