新しいプロジェクトの生成
ng newでアプリを作成し、オプションを確認します。
「新しいプロジェクトの生成」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
Angular CLI
Angular CLIは、Angularアプリの作成、ビルド、配信、テストを行う公式のコマンドラインツールです。コマンドは ng で始まります。
CLIのインストール
npmでグローバルにインストールすると、どこからでもngコマンドを使用できるようになります。
npm install -g @angular/cling newによるプロジェクトの作成
ng new コマンドを使うと、新しいAngularワークスペースとアプリケーションのひな形が作成されます。
ng new my-appng newの動作
フォルダーを作成し、依存関係をインストールして、TypeScript、ビルド設定、テストランナー、Standaloneアプリのひな形を準備し、gitリポジトリを初期化します。
対話形式のプロンプト
デフォルトでは、ng newはいくつか質問します。たとえば、Angularのルーティングを追加するか、どのスタイルシート形式(CSS、SCSS、Sass、Less)を使用するかなどです。
ルーティングの追加
ルーティングの質問に回答することも、フラグを渡してあらかじめ決めておくこともできます。
ng new my-app --routingスタイル形式の選択
styleフラグでスタイルシートの言語を選択します。
ng new my-app --style=scssインストールまたはGitのスキップ
依存関係のインストールやgitの初期化をスキップするフラグが便利です。CIやスクリプト化した環境で役立ちます。
ng new my-app --skip-install --skip-gitデフォルトではスタンドアロン
最近の CLI バージョンでは、デフォルトでスタンドアロンアプリケーションがスキャフォールディングされます。main.ts では bootstrapApplication を使用し、プロバイダーは app.config.ts に定義されます。
プロジェクトに移動する
作成後、新しいディレクトリに移動して、続けてコマンドを実行します。
cd my-appヘルプを表示する
すべてのコマンドで、利用可能なオプションを一覧表示する help フラグを使用できます。
ng new --helpクイックチェック: ng new
プロジェクトを作成します。
振り返り: 新しいプロジェクト
Angular CLI(ng)では、ng new my-app を実行してアプリを作成できます。必要に応じて、ルーティングやスタイルシートの形式も設定できます。依存関係をインストールし、スタンドアロンのスターターアプリをスキャフォールディングします。次は、生成された構造について学びます。
よくある質問
「新しいプロジェクトの生成」レッスンは無料ですか?
はい。「新しいプロジェクトの生成」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「新しいプロジェクトの生成」で何を学びますか?
ng newでアプリを作成し、オプションを確認します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「新しいプロジェクトの生成」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか?
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 新しいプロジェクトの生成
- プロジェクト構造の解説
- ng generateによるコード生成
- ビルドとサーブ