二 Angular 2 0開發指南以及搭建開發環境

自第一章講angular2.0的簡單開發入門，我們了解到ng2的開發實踐是圍繞著web-component來展開的，ng2中更加強化了component的概念，弱化了指令的概念（實際上component是複雜指令）。同時我們學習到web-component中資料和檢視是如何互相影響的，即input和output的概念，資料通過input往view以及view裡的子元件傳遞，view及其子元件通過ouput來改變資料（vm通過資料繫結機制實現互通，view model)。

前端一直以來都是發展迅速，前端構建，前端開發ide，前端應用型框架也更加完善和規範等。但是線上相關產品也是層出無窮，我們如何選擇前端的開發工具呢。這裡我們推薦的webpack + angular2 + vscode/webstrom整合開發，其中好處不在此敷述，所以這章會教大家搭建好這套整合開發環境。

搭建環境簡單總結為3個步驟

安裝開發工具

[sublime text]( [vscode]( 和[webstorm]( 3選一

[brew]( -> [nvm]( -> [[email protected]]( -> [tnpm](

ng2官網文件的開發者指南有做詳細介紹，但對於新手來說，可能對於ng2中的一些概念和特性還比較陌生，所有這裡會從我個人學習ng2的經驗來理解ng2的一些簡單概念和開發思路。

ng2開發應用的步驟歸納

services服務，實際上是封裝好的**邏輯，可以是資料，函式，類等，元件中注入service可以使用到提供的封裝邏輯。

utils工具類，是services封裝邏輯是需要用到的工具類，比如ajax請求需要用到http類等。

ng2開發過程的**實現

我們更關心在ng2開發過程中，components如何嵌入多個子元件和服務，其中decorator和metadata概念如何理解。看官網提供的的關係圖：

元件和指令的同異點

decorators和metadata的關係

directives和services的關係

指令中使用服務時，需要在指令類的constructor的引數中宣告使用的服務，指令在工作時，ng2內部會自動注入服務的例項到constructor中。

父指令宣告了服務，在子指令可以不用宣告也可以使用。

這裡說的指令涵蓋元件和指令

在了解ng2編碼的同時，我們會發現ng2把框架提供的功能全分散到各個模組中，比如@component需要通過import from '@angular/core'來獲取到，而ngfor指令需要import from '@angular/common'。具體那些功能在於哪些模組，貌似只能通過官方提供的api（猛擊此處)來查詢了，但是我們通過給模組做個分類，更加方便我們查詢相關的api

先上圖

最重要的4個模組基本能解決新手開發的需要，4個模組分別為：

@angular/core，所有元件、指令、服務等定義類時需要的裝飾器，都可以通過@angular/core找到

@angular/common, 所有ng2提供的指令、服務和過濾管道pipes（主要做轉換，比如貨幣轉換，json轉字串等），通過@angular/common可以找到。

@angular/http，所有ajax請求相關的api在此

@angular/platform-browser-dynamic, 實際上我們只用到bootstrap，但也是基本應用初始化必須使用的。

本次章節ppt

Magento前端開發指南 二

對傳統符號的模組和主題路徑 magento的應用元件，包括模組 主題和語言包技術可以位於任何地方的magento的根目錄下。這是指，magento預設和自定義元件。下面的相對路徑是用於模組和主題 theme dir 主題目錄。通常用在自定義主題，或任何主題一般。magento的盒子前端的主題，絕對路...

Fiddler外掛程式開發指南（二 全域性樣式）

二 關聯wpf 三 打包除錯結果 四 系列文章彙總 五 資源推薦 一般專案肯定存在需要復用的樣式和模板，在wpf中可以使用資源字典來實現公共樣式的編寫，然後在頁面中引入資源字典即可實現樣式繼承 首先新增system.xaml引用，接著新建乙個wpf，命名為globalstyle.xaml，然後手動刪...

7 T5L DGUS ll 應用開發指南摘錄 二

toc t5l dgus ll 應用開發指南摘錄 二 dgus 屏採用非同步 全雙工串列埠 uart 串列埠模式為 8n1，即每個資料傳送採用十個位，包括 1 個起始位，8 個資料位，1 個停止位。232 ttl 通訊和主機板 tx rx 輸入輸出訊號交叉接線，地線必須接上 485 通訊 485 接...