简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

Angular CLI を使用してルートを生成する手順の詳細な説明

php中世界最好的语言
リリース： 2018-05-03 14:31:18
オリジナル
1663 人が閲覧しました

今回は、Angular CLI の生成ルーティングの手順と、Angular CLI 生成パスの注意点について詳しく説明します。実際のケースを見てみましょう。

ng g module admin を使用すると admin モジュールが生成されることがわかっています。

そして ng g m sales --routing を使用すると、sales と sales-routing という 2 つのモジュールが生成されます

sales-routing にはルーティング情報が含まれます。これは Sales モジュールにインポートされます。

アプリケーションのルーティングを生成します。

まずプロジェクトを作成します:

ng new my-routing --routing
ログイン後にコピー

2 つのモジュールが生成されていることがわかります。

ルーティング モジュールを見てください:

アプリモジュールをもう一度見てください:

AppRoutingModuleがインポートされました。

app.component.htmlをもう一度見てください:

router-outletが書かれています。さらに2つのコンポーネントを生成します。htrouting.moduleでルーティングを設定し、次にhtmlを変更します。

うーん、問題ありません。

アプリケーションに複数のモジュールがある場合の場合です。

別のモジュールを生成し、ルーティング モジュールを使用します (最初に -d パラメーターを使用して、作成するファイルを表示できます) :

ng g c dashboard
ng g c order
ログイン後にコピー

admin モジュールで、別の admin コンポーネントを作成します:

ng g m admin --routing
ログイン後にコピー
実際、パス admin/ が指定されているため、最後の 2 つのコマンドの -m パラメータは削除できます。デフォルトでは admin モジュール内にあります app module の代わりに宣言を行います。

次に、app.module を変更する必要があります:

admin モジュールを追加します。

次に、admin.component.html を変更し、router-outlet を追加します:

次に、admin -routing.module.ts:

を変更します。実行: ngserve -o

アドレスを直接入力します: http://localhost:4200/admin

次のように表示されます:

URL を入力します: http://localhost:4200/admin/email

次が表示されます:

だから問題ありません。

Gurad を生成します。

ng g c admin
ng g c admin/email -m admin
ng g c admin/user -m admin
ログイン後にコピー

このコマンドは xxx を生成します.guard.ts

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Angularコンポーネントの対話手順の詳細な説明

jQueryにトリガーボタンイベントを入力させる方法

以上がAngular CLI を使用してルートを生成する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
angular ステップ 詳しい説明
ソース：php.cn
前の記事：Angular CLIの構築とServeの使い方を詳しく解説 次の記事：Angular CLI ブループリント生成コード
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
注釈のないAngularアプリケーション これらの空のコメントやスペースを削除するための設定はありますか?私のビルドコマンドは ngbuild --environmentprod --progressfalse --tar...
から 2023-11-10 10:51:51
0
2
172
Vue.js 3 と Pinia Getters に関する問題 私は Angular から Vue.js に切り替えて、そのアーキテクチャを理解しようとしています。現在、基本的な問題に直面しており、多くの回避策を使用していますが、実際には一時的...
から 2023-11-03 18:52:56
0
1
244
JSX で '​​React' を使用する場合、それをスコープ act/react-in-jsx-scope に含める必要があります。 私は Angular 開発者で、React は初めてです。ここに単純な React コンポーネントがありますが、機能しません。 importreact,{Component}fro...
から 2023-09-18 19:58:41
0
2
303
Angular 11 と Google Maps API を使用したクラスターのクリック イベント処理 私はangular16プロジェクトに取り組んでいます。 this.markerCluster=newMarkerClusterer({map:this.map,markers:th...
から 2023-09-16 22:57:11
0
1
239
CSS border-radius により、この最小限の Angular マテリアル Sidenav コンポーネントで要素が消えるのはなぜですか? (デモが利用可能) AngularMaterialSidenav コンポーネントについてです。以下のコードでは、境界線の半径を大きくして、囲んでいる要素と重なるようにすると、要素が消えます。 <...
から 2023-09-15 20:15:02
0
1
730
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！