AngularJS AppModule (the Root module)

Setup 完之後, app 最少要有一個Appmodule, 也稱 the root module.

可以直接copy 這段程式碼 (pic1)



  • @NgModule

    takes a metadata object that tells Angular how to compile and launch the application. //告知Abgular 如何編,如何啟動

@NgModule 下有3個陣列

    • imports — the BrowserModule that this and every application needs to run in a browser.
    • declarations — the application’s lone component, which is also …
    • bootstrap — the root component that Angular creates and inserts into the index.html host web page.
  • The imports array

Angular modules 能把不同的功能集合起來,

Add a module to the imports array when the application requires its features. // 需要什麼功能就加到 the imports array.

Browser module  放進  rootAppModule‘s imports array  如此 app 各功能才能瀏覽.

  • Only NgModule classes go in the imports array. Do not put any other kind of class in imports.

The import statements at the top of the file and the Angular module’s imports array are unrelated and have completely different jobs. // import 是在最上面,  imports array 是在NG module 下 , 別搞錯了

  • The declarations array

components, directives and pipes,   一定要宣告 (declarations),

  • The bootstrap array

啟動 app :  bootstrapping the root AppModule

  • Bootstrap in main.ts // 啟動

There are many ways to bootstrap an application. The variations depend upon how you want to compile the application and where you want to run it.

In the beginning, you will compile the application dynamically with the Just-in-Time (JIT) compiler and you’ll run it in a browser.

The recommended place to bootstrap a JIT-compiled browser application is in a separate file in the src folder namedsrc/main.ts

Copy 這段 (pic2)



The AppComponent selector =my-app

so  在首頁(index.html)裡就是這個標籤 :<my-app>





1 則迴響

  1. AngularJS AppModule (the Root module) - Angular News


在下方填入你的資料或按右方圖示以社群網站登入: Logo

您的留言將使用 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )


您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

%d 位部落客按了讚: