Angular - 檔案結構簡介

  • 915
  • 0
  • 2018-05-08

介紹透過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;