介紹透過npm產生Angular2 專案 的檔案結構
assets(Folder) :資產的意思,所有的靜態檔案,EX:額外的CSS、圖片、JS、Jquery 可以統一放在這裡Folder底下
專案剛開起的時候底下已經有一個.gitkeep 檔,這個檔案給Git 看的
因為Folder底下如果沒有檔案的話就沒辦法進入Git版控的,為了要進git版控,才會有這個檔案
index.html : 預設開啟的首頁
<head></head> 裡面有一個很重要的tag :
<base href="/">
base 這個tag 可以決定整份網頁所有的超連結,預設是以什麼為基礎,
通常我們<head>裡面會載入一些css版型或是額外的Javascript code ,這些載入的code都要寫在base 這個tag底下,
如果把這些檔案內容放在base 之前的話,有可能會碰到找不到的情況。
此外,在<head></head> 裡面的內容,是不能夠搬到component裡面的
component 裡面只會寫放在<body></body> 的內容
angular-cli.json : Angular的設定檔
裡面有許多預設值,如果要加入靜態檔案,可以參考 Angular - 加入靜態檔案(設定angular-cli.json) 這篇文章
environments(Folder):底下有兩個檔案
environment.prod.ts 、 environment.ts 主要是定義Angular2 所會用到的環境變數,裡面就是物件
environment.prod.ts 是未來Build出Production的版本的時候才會用的到,開發的時候主要是用 environment.ts
polyfills.ts :
如果使用者會使用舊版本的IE,專案內使用的JS語法是舊的瀏覽器不支援的,可參考polyfills 內的建議
依照瀏覽器的版本將以下註解的內容取消註解(Ctrl+/)
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';
要注意的是,取消註解之後還是有些註解取消後還是需要使用npm去安裝套件,
例如:
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
取消之後還要去安裝後面的.js
typings.d.ts
typescript 會用到的定義檔,可以在這邊宣告一些Angular 會用到的全域變數,
EX : jquery 的全域變數就是$
declare var $: any;