Angular 新專案建立

在等待我們的Surefacebook來之前，花了點時間先研究AngularJS及最新的Angular，AngularJS使用方式就像是jQuery一樣載入js檔就可以直接使用，練習了網路上一些教學，並利用.Net MVC + AngularJS + Taiwan Open Data做些練習，難度不是太高，接著再練習最新版的Angular，更深刻體會不同點。

Wiki : 
AngularJS是一款開源JavaScript函式庫，由Google維護，用來協助單一頁面應用程式運行的。它的目標是透過MVC模式（MVC）功能增強基於瀏覽器的應用，使開發和測試變得更加容易。在版本2大改（最突出的改變的全面使用TypeScript）之後改名Angular，第N版以Angular N的形式命名。

開始開發前須先設置環境和開新專案

IDE : Visual Studio Code Download

Step 1 :  透過Node.js cammand prompt下載套件，可至Node.js官網下載

Step 2 :  安裝Angular
指令 : npm install -g @angular/cli

Step 3 : 建立新專案
指令 : ng new my-app
my-app 可以自己定義名稱

Step 4 : 進入專案資料夾
指令 : cd my-app

在專案的資料夾底下，有幾個指令常用到

1. ng serve
啟動本機端伺服器，可直接透過瀏覽器觀看

2. ng build
建置專案，完成後會產生一個dist資料夾，可用來上傳至Web Server

3. ng generate component
在Angular新版中，要開新的一頁不是透過傳統＂開新檔案＂方式，而是透過這指令，而他被稱為一個Component，因為當你輸入指令後會產生一個資料夾，裡面檔案包含了以下幾個檔案格式

• .css <-這個元件的樣式表
• .html <-這個partial view的內容
• .spec.ts <-這個元件的測試檔
• .ts <-Angular的type script，也可以寫javascript在其中

來自官網介紹

File	Purpose
app/app.component.{ts,html,css,spec.ts}	透過Html, template, CSS, Stylesheet 及單元測試定義了AppComponent, AppComponent類似一個master page, 所有個component都可以顯示於這頁面的某個部分.
app/app.module.ts	Defines AppModule, the root module that tells Angular how to assemble the application. Right now it declares only the AppComponent. Soon there will be more components to declare.
assets/*	A folder where you can put images and anything else to be copied wholesale when you build your application.
environments/*	This folder contains one file for each of your destination environments, each exporting simple configuration variables to use in your application. The files are replaced on-the-fly when you build your app. You might use a different API endpoint for development than you do for production or maybe different analytics tokens. You might even use some mock services. Either way, the CLI has you covered.
favicon.ico	網站顯示於瀏覽器上的小圖示
index.html	The main HTML page that is served when someone visits your site. Most of the time you'll never need to edit it. The CLI automatically adds all js and css files when building your app so you never need to add any <script> or <link> tags here manually.
main.ts	The main entry point for your app. Compiles the application with the JIT compiler and bootstraps the application's root module (AppModule) to run in the browser. You can also use the AOT compiler without changing any code by appending the--aot flag to the ng build and ng serve commands.
polyfills.ts	所有網站開發者都會遇到的跨瀏覽器顯示問題，透過這個檔案將不同瀏覽器的顯示問題一致化，裡面包含了core-js及zone.js兩個模組
styles.css	Your global styles go here. Most of the time you'll want to have local styles in your components for easier maintenance, but styles that affect all of your app need to be in a central place.
test.ts	This is the main entry point for your unit tests. It has some custom configuration that might be unfamiliar, but it's not something you'll need to edit.
tsconfig.{app|spec}.json	TypeScript compiler configuration for the Angular app (tsconfig.app.json) and for the unit tests (tsconfig.spec.json).

完成專案的set up後，接下來就是要把AngularJS做的用新版再做一次，不過時間所剩不多也不知道會不會做完，下週設備來，另一個開發團隊進駐，就要開始正事了

不過昨天先加入了那個開發團隊的meeting，發現他們團隊並不是德國人，而是操著俄國口音講英文的捷克人，我想溝通交流也許會是個很大的挑戰，Let us see.


Reference :
Angular Homepage Quick Start