我是Angular～
Angular是目前前端最爲流行的框架之一，由Google大法在背後爲其撐腰，憑藉着Angualr在開發上提供的種種優勢，Angular成爲越來越多開發者所選用的框架。Google採用了Microsoft開發的TypeScript，重新編寫了AngularJS，經歷了從1.x到2.x的大變革，現在Angular的版本更新到了4.x，並將處於持續穩定的更新階段。
爲何入坑～
博主進入IT碼農這個行業時，便在iOS開發這一行摸爬滾打。由於公司需求，轉行幹起了前端開發。從一開始接觸JavaScript時，便被JavaScript隨意的語法，各種各樣的JS框架搞得甚是頭疼。Angular框架是構建SPA的Web客戶端應用，採用的是MVC的開發模式，基於Angular的Ionic框架又能在後續開發跨平臺的移動應用，這對於在一家IoT企業，可以快速的開發各種跨平臺的物聯網應用，便毫不猶豫入了坑。
什麼是TypeScript～
TypeScript並不是一門新的語言。TypeScript是JavaScript的超集。TypeScript引入了所有的ES5，ES6的語法，並在這基礎上進行了擴展。TypeScript可以編譯成純的JavaScript代碼，可以在任何瀏覽器上運行。TypeScript是Angular官方推薦的用來進行基於Angular框架開發的語言。
如何搭建Angular開發環境～
搭建Angular的開發環境，首先需要安裝Node.js。(MAC電腦上自帶了Node) 可以通過$ node -v 來查看版本，如果沒有安裝，請自行安裝。通過下載Node安裝包來安裝或者用homebrew來安裝等。
Node中集成了我們要使用的包管理工具npm 。我們需要使用它來下載TypeScript。
使用命令
$ npm install -g typescript
Angular提供了一個命令行工具angular-cli，它能讓用戶通過命令行創建和管理項目。我們可以通過angular-cli快速創建項目。
若要安裝angular-cli，運行一下命令
$ sudo npm -g @angular/cli安裝完成後，執行命令
$ ng -v就可以看到以下內容
緊接着，我們可以通過終端命令ng new命令來創建一個新的項目HelloWorld。
$ng new HelloWorld這個命令會運行比較長的時間，因爲需要下載一些npm的依賴。
創建成功後，我們可以進入HelloWorld，來查看工具都爲我們生成了哪些文件
angular-cli.json 是angular-cli的配置文件
karma.conf.js是測試配置文件
typescript的lint配置文件
protractor.conf.js是端到端的測試配置文件
再進入src文件夾，看看src裏的文件都有什麼
app目錄是我們要編寫的應用的目錄
assets目錄主要是用來放置一些類似圖片的資源
index.html是應用啓動時的根頁面
polyfills.ts是導入es6模塊的配置文件
main.ts是angular工程的引導啓動文件
styles.css用來放置全局樣式
ts.config.json是typescript配置文件
typings.d.ts是typescript的聲明文件
然後進入app目錄下，查看目錄下有哪些文件
OK，組件，模塊，模版html，以及css樣式文件都有了，只可惜，如果要是再多分幾個目錄分別管理 會更清晰點，不過這個我們可以自己來做，這裏就不提了。
打開我們的index.html 可以看到以下代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
打開app.module.ts
可以看到以下代碼
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
打開app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
打開app.component.html
<h1>
{{title}}
</h1>
OK,主體上生成的示例代碼就是這樣。
接着回到HelloWorld目錄下運行命令
$ng serve結果發現
是啊 剛纔生成的文件中 並沒有node_modules，這就比較尷尬了。
我們可以使用命令$ npm install來下載Angular需要的一些依賴。時間有點長～或者安裝淘寶的鏡像，使用cnpm install來下載
完成後，重新執行$ ng serve 看到以下內容
在瀏覽器上訪問http://localhost:4200
可以看到以下內容
OK。這樣Angular的簡單環境搭建就完成了。