Angular は、JavaScript を使用するオープンソースの Web アプリケーション フレームワークです。 他のフレームワークやプログラミング言語とは異なり、このフレームワークが機能するには Windows で環境変数を設定する必要があります。 したがって、私たちは次の方法を学ばなければなりません VS Code で Angular をセットアップする そしてデモコードを書きます。それが私たちのやることです。
VS Code で Angular をセットアップする方法
Windows コンピューター上で VS Code で Angular をセットアップするには、以下の手順に従う必要があります。
- Visual Studio コードをインストールする
- NodeJS のセットアップ
- 環境変数を設定する
- Angular をインストールする
それらについて詳しく話しましょう。
1) Visual Studio コードをインストールする
Angular レルムでコーディングを始めるには、Visual Studio Code をインストールする必要があります。 同じことを行うには、code.visualstudio.com にアクセスし、ご使用の環境に適したアプリをダウンロードする必要があります。 ダウンロードしたら、に移動します ダウンロード フォルダーに移動し、インストール メディアを実行して、アプリケーションをインストールします。
2) NodeJSのセットアップ
VSCode を使用して Angular を編集することはできますが、エディター内で直接実行することはできないことに注意することが重要です。 Angular は実際には、ローカル Web 開発セットアップの一部である JavaScript 環境である NodeJS 内で実行されます。 NodeJS を使用すると、Web ブラウザーのローカル ホスト上で Angular を実行できます。 VSCode で Angular コードを変更するたびに、ブラウザに自動的にリロードされます。これは「ホット リロード」として知られています。 ただし、Angular は NodeJS で実行されるため、最初に NodeJS をインストールする必要があります。 これを行うには、nodejs.org にアクセスします。
Angular を実行するために Node JS をインストールする場合は、シンプルで短いパスなど、覚えやすい場所を選択してください。 これは、後で NodeJS を使用する必要がある場合に役立ちます。 したがって、アプリを Program ファイルにインストールする代わりに、重要ではありませんが、D:\NodeJS にインストールします。
3) 環境変数を設定する
次に、Angular のインストールに進む前に、NodeJ の環境変数を設定する必要があります。 同じことを行うには、次の手順に従います。
- Win + Sを押して入力します 「環境変数」 そしてそれを開きます。
- 完了したら、NodeJS の場所をコピーする必要があります。 参考までに、私たちのものは D:\NodeJS です。
- 「環境変数」をクリックします。
- ここで、「システム環境変数」セクションで「パス」を選択し、「編集」をクリックします。
- 「新規」をクリックし、場所を貼り付けて、「OK」をクリックします。
このようにして、NodeJS 環境変数を入力しました。 動作しているかどうかを確認するには、開きます コマンド・プロンプト そして走ります ノード – バージョン。 バージョンが表示されたら、Angular をインストールしても問題ありません。
4) Angular をインストールする
NodeJSをインストールして適切な環境を構築したら、Angularをインストールしていきます。 同じことを行うには、以下の手順に従ってください。
- 開ける ビジュアルスタジオコード。
- CD または[ディレクトリの変更]コマンドを使用して、Angular ファイルを作成する場所に移動します。 プロジェクトを作成するために D ドライブに新しいディレクトリを作成しました。添付のスクリーンショットを確認してください。
これで問題なく Angular を実行できるようになりました。
読む： VSCode に JavaScript をインストールするにはどうすればよいですか?
このコマンドは、ワークスペースの外で Angular CLI を実行している場合は使用できません。
「ngserve」コマンドを実行すると、コマンドが使用できないというエラーが表示されました。 多くの人は、Angular がシステムにインストールされていないのではないかと疑っていますが、実際には、唯一の問題は、正しいディレクトリにいないことです。 これを解決するには、プロジェクトが存在するディレクトリ (ルートの場所ではなく、実際のプロジェクトの場所) に「cd」を実行するだけです。 そのため、最初にコマンドを実行したとき、ルート フォルダーである AngularProject にいたため、機能しませんでした。 ただし、ディレクトリをsampleFolderに変更して同じコマンドを実行すると、シームレスに機能しました。
回避策として、ファイル エクスプローラーを開き、プロジェクトが保存されている場所に移動し、空の画面を右クリックして、 ターミナル > コマンドプロンプト。 そして走ります サーブはng。
読む： Windows に Java JDK をダウンロードしてインストールするにはどうすればよいですか?
Visual Studio Code で Angular プロジェクトをセットアップするにはどうすればよいですか?
Angular プロジェクトをセットアップするには、まずコンピューターに NodeJS をインストールする必要があります。 完了したら、環境変数を設定し、次のコマンドを使用して Angular をインストールする必要があります。 npm install -g @angular/cli 指示。 次に、次のコマンドを使用して新しいディレクトリを作成します。 新しいフォルダ名がありません コマンドの詳細については、前述の手順を確認してください。
読む： Microsoft C++ 用に VS Code を構成する方法
Angular VSCode を生成するにはどうすればよいですか?
Angular File Generator は、数回クリックするだけで Angular ファイルを作成できる Visual Studio Code の便利な拡張機能です。 これは Angular CLI 上に構築されており、CLI と同じ回路図を使用します。 さらに、ターミナルから直接ファイルを生成するオプションも提供します。
こちらもお読みください: VS Code に Python をインストールする方法。
