[Angular] Angular Modules

前言

javascrip一直存在著Namespaces的問題，意思是指很容易將variables或者functions定義在global namespace。 另一方面javascript並沒有提供管理javascript code的方式。

Modules 幫我們解決了這個問題

說明

• TypeScript有提供Modules幫助我處理global namespace的問題
• ES 2015 有定義標準來處理Module，ES 2015一個Module就是一個檔案，一個檔案就是一個Module。 所以只要建立一個js檔，使用export或者import的方式，js檔就是一個Module了。
• Angular2有自己的Angular2 Modules，Angular2 Modules跟ES 2015 Modules是不太一樣的東西。

ES 2015 Modules

ES 2015 Modules的運作方式。
1.首先我們要有一個export的class

product.ts

• ts

export class Product{

}

上面的ts code會Transpile成這樣的js code

product.js

• js

function Product(){}

2.我們就可以Import該class

useProduct.ts

• ts

import { Product } from './product'

import { Product } <= 定義我們要import哪一個class

from ‘./product’ <= 定義我們要讀取哪一個js檔案

Angular Modules

• Angular Modules 幫助我們組織Applicaiton與functionality的區塊結合在一起，每一個Angular application至少有一個Angular Module，預設為app.module。
• 當我們的application有越來越多功能的時候，則可以增加Feature Angular module。
• 我們甚至可以定義Shared Module。讓各個Angular Modules使用。

ES 2015 Modules vs Angular Modules

ES Modules	Angular Modules
Code files用來import 或 export	Code files幫我們組織application的functionality區塊
組織code files	組織application