角度2ブートストラップ

index.htmlを

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
    <app-root></app-root> 
</body> 
</html>

main.ts

import { enableProdMode } from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app/app.module'; 
platformBrowserDynamic().bootstrapModule(AppModule)

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

クラシック最初の簡単な例を考えてみます

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html' 
}) 

export class AppComponent { }

私の質問は、セレクタアプリルートを見つけるために、検索する場所、ルートモジュールが知っているどのようにのですか？それはデフォルトでindex.htmlに行きますか、どこに行くか定義されていますか？ index.htmlの代わりにindex1.htmlがあれば、アプリはうまくいかないでしょう。なぜですか？

出典

2017-10-17 Unknown developer

index.htmlでセレクタを検索すると、Angularのデフォルトの動作は約hereとなります。

プロジェクトがAngular CLIで実行されている場合は、.angular-cli.jsonのindexエントリでファイルを変更できます。

出典

2017-10-17 21:19:04 jowey

簡単な答えはそれが

"apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
     "styles.css" 
     ]

angular-cli.jsonファイルは角へのアプリの設定を提供キックオフ方法。

それは一緒に

セレクタをつなぎどのくらい答えは、その全体の構成要素を表します。この場合、app-rootは、使用するブラウザDOMに./app.component.html,./app.componentおよび./app.component.css（もしあれば）をロードします。あなたは、次のコンポーネント

HomeComponent

UserComponent

を持っていたのであれば彼らはそれぞれ、それぞれの名前の上記のファイルを持っています。 HomeComponentHTMLファイルに<app-user></app-user>を追加した場合（上記のindex.htmlなど）その場所にUserComponentが読み込まれます。

ルートモジュールがセレクタapp-rootを検索する場所をどのように知っていますか？

答えはapp.module.tsです。あなたのアプリでcomponents、modulesとservicesを見つけることAppModule場所を指示する必要があります。たとえば、declarations: []配列からAppComponentを削除すると、そのコンポーネントがどこにあるかを知ることができなくなり、エラーが表示されます。

宣言：[]あなたのアプリでComponents

このリスト。 AppModuleには、アプリを起動するために最低限必要なものを含めてください（components）。そこからlevelフォルダー構造を構築する必要があります。各レベルは独自のModuleを持つことができます。

輸入：[]

このリストにアプリで使用されているすべてのモジュール。これには、サブlevelsがアプリに含まれています。

プロバイダ：[]

このリストにアプリ内のすべてのサービス。ここではアプリはこの場合

src 
|app.component.css 
|app.component.html 
|app.component.ts 
|app.module.ts 
    home 
     |home.component.css 
     |home.component.html 
     |home.component.ts 
     |home.module.ts 
    user 
     |user.component.css 
     |user.component.html 
     |user.component.ts 
     |user.module.ts 
    services 
     |user.service.ts

ようなことができ、サンプルの多層で

あなたapp.module.tsこの
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { HomeModule } from './home/home.module'; 
import { UserModule } from './user/user.module'; 
import { UserService } from './services/user.service'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    HomeModule, 
    UserModule 
    ], 
    providers: [, 
    UserService 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 
のようになりますので、同様の構造がオンになりますHomeModuleおよびUserModuleこれはそれぞれのファイルとサービスをファイルします。

すべてのモジュールをAppModuleにインポートする限り、既にModuleに宣言されているComponentを宣言する必要はありません。

出典

2017-10-17 21:27:32

答えて

関連する問題