ホームページ > 記事 > ウェブフロントエンド > 初心者のためのAngularJS環境セットアップチュートリアル

初心者のためのAngularJS環境セットアップチュートリアル

小云云オリジナル: 2018-01-20 13:27:031202ブラウズ

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

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

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

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 先生によるこのチュートリアルを見ることをお勧めします: Angular2.0 ビデオチュートリアルはここにあります

、ここでは Da Mo 先生のプロジェクトも使用します: NiceFish、最初に 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環境セットアップチュートリアル

関連記事