forDOnationsプログラムの一環として寄付を受け取りました。インタラクティブなWeb、モバイル、およびデスクトップアプリケーションを作成する人気のあるJavaScriptフレームワークです。関心の分離、ファーストクラスのTypeScriptサポート、および堅牢なコマンドラインインターフェイス(CLI)により、Angularは最新のエンタープライズアプリケーションの最上位の選択肢になっています。CLIは、Angularの使用を開始するプロセスを簡素化します。CLIは、コード生成、本番ビルド、および依存関係の管理も行います。このチュートリアルを終了すると、AngularCLIを使用してAngularアプリケーションが作成されます。CLIを使用して新しいアプリを作成し、ブラウザーで実行して、本番用にビルドします。Angularがプレゼンテーション、スタイリング、ビジネス上の懸念を個別のユニットに分割する方法についても説明します。これには、HTML、CSS、およびTypeScriptレイヤーが相互に作用する方法を練習することが含まれます。記事をフォローするには、次のものが必要です。ターミナルまたはコマンドラインインターフェイスの基本的な知識。詳細については、Linuxターミナルの概要ガイドをお読みください。TypeScriptの知識は役に立ちますが、必須ではありません。TypeScriptを確認するには、TypeScriptでコーディングする方法シリーズを確認してください。CSSおよびHTMLに精通していること、およびJavaScriptでコーディングする方法シリーズをフォローすることで習得できるJavaScriptの基本的な知識。Node.jsバージョン8.9以降。VersionManagerを使用してNodeのインストールを管理することでインストールできます。CLIをインストールし、Angularアプリケーションを構築します。CLIをダウンロードして、次の3つの目標を達成します。新しいAngularプロジェクトを作成するローカル開発サーバーを実行しますこのアプリケーションを本番用にビルドするターミナルで次のコマンドを実行して、AngularCLIをダウンロードします。@angular/cliインストールが成功したことを確認するには、ターミナルで次のコマンドを実行します。CLIは、現在のバージョンと周囲の環境をターミナルに出力します。x64Angularでの作業を開始するには、CLIを使用して最初のワークスペースを作成します。Angularのプロジェクトはworkspacesとして知られています。ターミナルで次を実行します。my-first-angular-appこのコマンドは、ワークスペースの構成に使用されるいくつかの初期化の質問をします。このプロジェクトではAngularルーティングを使用しないためです。スタイルシート形式として。プロジェクトを初期化するためのキー。CLIは、プロジェクトの作成に必要な依存関係をインストールします。CLIとワークスペースの作成の詳細については、Angularドキュメントを確認してください。CLIをダウンロードし、新しいAngularワークスペースを作成したので、ブラウザーでアプリケーションを実行する方法を見てみましょう。ステップ2—ブラウザでAngularアプリケーションを実行するこのステップでは、CLIを使用してブラウザーでアプリケーションを実行します。Angularのローカル開発サーバーは、ファイルシステムが変更されるたびにブラウザーを更新します。フィードバックサイクルが速いため、変更の結果をできるだけ早く確認できます。Angularのローカル開発サーバーには、次の利点があります。選択したポートでローカルWebサーバーを起動します。ファイルの変更を監視し、変更時にブラウザをリロードします。TypeScriptのコンパイルとバンドルを管理します。端末で次のコマンドを実行してディレクトリを作成します。my-first-angular-app次に、ターミナルで次のコマンドを実行してWebサーバーを起動します。-oAngularは開発アプリケーションを構築し、ローカルWebサーバーに公開します。serve.端末の出力を調べることにより、これが成功したことを確認できます。環境をカスタマイズします。構成オプションの完全なリストはここで確認できます。これで、Angularアプリケーションが画面に表示されます。実行されている場合、ファイルシステムに変更を加えると、ブラウザが新しいコンテンツで更新されます。アプリケーションの開発プロセス全体で実行されます。serve-o’などの構成オプションをCLIコマンドに渡しました。次に、Angularコンポーネントに変更を加え、その変更が画面に反映されることを確認します。ステップ3—ホームページテンプレートを更新するこのステップでは、HTMLを編集して画面にコンテンツを表示します。HTMLテンプレートは、Angularコンポーネントのviewとも呼ばれます。このステップを終了するまでに、スターターテンプレートをコンテンツで更新する方法を学習しました。選択したテキストエディタでこれを開き、内容を削除します。マークアップを書き込む準備ができている空白のHTMLドキュメントが必要です。ヘッダーと、順序付けされていないリストを含むセクションが含まれています。順序付けされていないリストは箇条書きで表示され、タイトルは大きなフォントで表示されます。ドキュメントを保存するとすぐにアプリコンポーネントが更新されることに注意してください。自由に自分の追加を試して、リアルタイムでそれらを目撃してください。これで、ベースアプリコンポーネントのHTMLテンプレートが更新されました。これは、Angularアプリケーションのエントリコンポーネントです。次のステップでは、CSSを使用してコンテンツのスタイルを設定します。ステップ4—ホームページのスタイリングを更新するこのステップでは、CSSを使用してアプリケーションのスタイルを設定します。Angularを使用すると、スコープスタイルとグローバルスタイルの両方で作業できます。CSSをコンポーネントにスコープする機能により、設計を妨げることなく柔軟性が得られます。編集してアプリケーションのデフォルトのグローバルスタイルを設定します。2rem;}これらのスタイルは、すべてのコンテンツを画面の中央に配置し、暖かい背景色を設定します。今後、すべてのコンポーネントに表示されます。成功すると、ブラウザに次の情報が表示されます。注:次の手順に進む前に、変更するたびにファイルを保存することを忘れないでください。}}ステップ6でAngularビルドプロセスの詳細を確認します。次に、アプリコンポーネントのスタイルを設定しましょう。コンポーネントに追加されたスタイルは、アプリケーションの他の部分には表示されません。スタイルスコーピングの詳細については、Angularドキュメントをお読みください。グローバルスタイルの下に次のCSSを追加します。ブラウザのタグ:スタイリングが整ったら、ユーザーインターフェイスを動的に変更する方法を見ていきましょう。ステップ5—ホームページTypeScriptを更新するこのステップでは、AngularアプリケーションでTypeScriptを使用します。