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>




AngularJS setup for local development

1 要 install : Angular QuickStart seed , 這樣開發比較快

2 Setup a local development environment

2.1 要先install : node and npm (note1)
2.2 然後,

-Create a project folder (you can call it quickstart and rename it later).

-Clone or download the QuickStart seed (note4) into your project folder.

-Install npm packages. (note3)

-Run npm start to launch the sample application.


Focus on the following three TypeScript (.ts) files in the /src folder.

  • Files outside src/ concern building, deploying, and testing your app. They include configuration files and external dependencies. // src/外的 是作app 部署測試用
  • Files inside src/ “belong" to your app. Add new Typescript, HTML and CSS files inside the src/ directory, most of them inside src/app, unless told to do otherwise. //所以 src/ 內的都是自己的app

src/ 裡有 3 files: : 定義AppComponent, 這是root component. : 定義 AppModule, the root module that tells Angular how to assemble the application.
3.main.ts : Compiles the application with the JIT compiler and bootstraps the application’s main module (AppModule) to run in the browser

  • 檔案結構看起來會像是這樣: (pic1)



然後, 讀 :


(note1:Installing Node.js and updating npm //

Node.js Download at )


(note3:  Node.js and npm are essential to modern web development with Angular and other platforms. Node powers client development and build tools. The npm package manager, itself a node application, installs JavaScript libraries.)

(note4:"the QuickStart seed" : 目的是作為本地開發的基礎, project folder 內有很多files.)

AngularJS Modules

之前有寫 AngularJS(NGJS) 有8個block

讀, 查 : AngularJS Modules  //


@NgModule // It identifies the module’s own components, directives and pipes, making some of them public so external components can use them

1) The Root Module: guide introduced Angular Modules and the essentials of creating and maintaining a single root AppModule for the entire application.

Modules: 一個一個查,看,

Angular modularity (NGmodules)
The application root module
Bootstrap the root module
Resolve conflicts
Feature modules
Lazy loaded modules with the Router
Shared modules
The Core module
Configure core services with forRoot
Prevent reimport of the CoreModule
NgModule metadata properties

Angular Modularity

  • Angular modules library:

用: Material Design //
Ionic //
AngularFire2 //

Angular modules consolidate components, directives and pipes into cohesive blocks of functionality, each focused on a feature area, application business domain, workflow, or common collection of utilities.

至少要有一個 root module. AppModule in a file named app.module.ts.


It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

The framework adapts and extends traditional HTML to present dynamic content through two-way data-binding that allows for the automatic synchronization of models and views. As a result, AngularJS de-emphasizes explicit DOM manipulation with the goal of improving testability and performance.


  • to decouple DOM (note1)manipulation from application logic. The difficulty of this is dramatically affected by the way the code is structured.
  • to decouple the client side of an application from the server side. This allows development work to progress in parallel, and allows for reuse of both sides.
  • to provide structure for the journey of building an application: from designing the UI, through writing the business logic, to testing


用 the MVC pattern,  presentation, data, and logic components 分離

dependency injection, 減少 server side 負荷,  像用 view-dependent controllers, to client-side web applications.

  • Scope = binding 這算是最重要的特色吧

(Scope in computer science describes when in the program a particular binding is valid)

“MVC" architecture, the scope forms the “Model", and all variables defined in the scope can be accessed by the “View" as well as the “Controller". The scope behaves as a glue and binds the “View" and the “Controller".

  • Two-way data binding
  • largely relieving the server backend of templating responsibilities.

Instead, templates are rendered in plain HTML according to data contained in a scope defined in the model.

  • The $scope service in Angular detects changes to the model section and modifies HTML expressions in the view via a controller.

Likewise, any alterations to the view are reflected in the model.

This circumvents the need to actively manipulate the DOM and encourages bootstrapping and rapid prototyping of web applications.

AngularJS detects changes in models by comparing the current values with values stored earlier in a process of dirty-checking, unlike Ember.js and Backbone.js that trigger listeners when the model values are changed.

  • 架構:






(note1: The DOM is accessed with JavaScript to dynamically display – and allow the user to interact with – the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.)


%d 位部落客按了讚: