[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(7) - 取得WebAPI資料(Angular.js)

* 本篇目標

利用Angular.js像WebAPI取得資料

* 前言

以往開發前端多半倚賴jQuery，今年接觸到了Google所推出的JavaScript libery , 他是一個前端MVC的Freamwork，Study過後，認為將前端改寫成NG，程式會比較有彈性，故開始投入學習。個人認為學習曲線NG比學習jQuery還要高，本系列文章並不是針對NG做一個詳細介紹，故會採用＂做中學＂的方式，來實作ASP.NET MVC如何搭配Angular.js做開發。

* Visual Studio 安裝

我們一樣在Web專案使用Nuget安裝

會看到Scripts資料夾裡有非常的多的Angular套件，這是因為Angular.js模組化做得非常好，故如果沒有要用到的功能，就不用載入進來，而相關的模組有什麼功能可以用，其實可以google ng加檔名，就可以查到官方文件或文章，如 “ng-resource”。

接著我們打開MVC的 View，Shared資料夾_Layout.cshtml檔案，載入angular.min.js。

_Layout有點像是ASP.NET WebForm的Master Page，可以把一些共用的html，js，css放在這，頁面各自的View就不用存在於重複的程式碼 e.g 選單列。

* 修改CustomerController

上一篇我們取得WebAPI資料的方式，是採取C# WebClinet的方式，在Contoller轉成ViewModel在給View，採用Angular.js將會做一些小修改。首先我們將程式碼註解起來。

接著我們改寫View使用Angular.js的語法，會發現Visual Studio 2013 已經很貼心的將NG的語法變為紫色了，這讓開發更加的清楚，以下依步驟做介紹

ng-app : 可以說是Angular.js的起始點，子元素才會看得懂Angular.js的語法

ng-controller : 因為是MVC架構，故我們會在Scripts新增一個Controller的function，並指定這個Div使用CustCtrl

$scope : 可以想成是"前端"的ViewModel，又有點像是C#的Class，可以將變數定義在此，以此例，我們將後端取回的Customer JSON資料，丟給$scope裡的Customer。

$http : 在與後端資料溝通，我們可以使用$http來對Server API進行，POST . GET . PUT .DELETE，以此例我們向我們WebAPI取得資料，丟給$scope裡的Customer；失敗的話則給$scope一個變數error，並秀在Div裡。

$ng-repeat : 此語法可以讓我們很輕鬆的寫出迴圈功能，如Customer裡面的資料，我們將資料一筆一筆讀出來，並變成html table裡的tr列。

結果畫面

* 雙向繫結

在Angular.js的MVC架構，都有Data Binding的特性，也就是今天在Model改變了一些值，或在View改變了一些值，是兩方都會產生變化的。

用講的不太清楚，故我們來玩個小範例：

http://jsfiddle.net/kyleshen/5un6argf/

TestCtrl裡面Model有 Day . Name兩個變數，及一個事件 Add，將Day加1

ng-model : 可以指定這個input標籤 對應到Model的名稱

ng-click : 點選Click的時候去執行哪個事件

* 後記

此篇介紹了一些Angular.js的一些基本用法，下一篇預計來換個輕鬆主題，來介紹如何利用一些工具來快速美化我們的網站。

Angular.js逐步學習文章推薦：

男丁格爾Angular.js教學 http://abgne.tw/category/angularjs

黑暗執行緒Angular.js系列 http://blog.darkthread.net/blogs/darkthreadtw/archive/tags/AngularJS/default.aspx

 

 

本系列程式原始碼請至我的Github下載  https://github.com/kyleap

** 如內容有誤請告知，將進行修改，謝謝 **

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(6) - 取得WebAPI資料

* 本篇目標

建置一個RESTful風格的Web服務

* Web API 2.2

現在開發通常會考慮到多平台，如手機平板等等，但關於資料來源不可能針對每個平台都去寫一樣的Code，早期.NET解決方案有Web Service、WCF Service的應用，.NET Freamwork 4.5後推出了更輕量化的Web API服務，搭配MVC架構開發上變得非常的輕鬆，本系列文章使用Web API 2.2。

延伸閱讀

  [Web API] 初探 Web API 筆記

* 建置Web API

我們再UI層新增Web專案時，其實就已經勾選安裝Web API了，如果忘記選擇了，可以透過Nuget安裝。

WebAPI開發習慣，我通常會再專案底下建一個API資料夾，接著點選右鍵，加入Web API控制器

建立以後，她預設會幫我們建立CRUD function，我們就針對每個function去改寫，注意Web API也是MVC架構，命名也是為Controller結尾，但不同的是Web API是繼承ApiController。

接下來我們將Get稍作修改，向BLL層要客戶資料，HttpReponseMessage可以很方便的讓前端知道是否有發生錯誤，並回傳自己定義的Object。

接著在瀏覽器執行，輸入 host/api/Customer即可取得我們的資料

* 於MVC的Controller及View列出資料

接著我們再專案裡Contoller，新增一個CustomerController

在Controller使用WebClinet像Web API要資料

在新增一個View，套入原本樣板的主體Layout

使用ViewModel，並用好用的Razor語法印出資料

結果畫面

* 後記

我認為Web API是個趨勢，未來我也一定會採用這種架構，一方面MVC的Contoller不會有太多跟BLL Service溝通的code，且對於多專案平台，都可向WebAPI取得資料。但實務上我並不會將跟Web API的Code寫在Controller裡，而會是在前端的View，也就是Angular.js登場的時候了!

延伸閱讀

ASP.NET MVC - 第一個Web API,Hello Web API

ASP.NET WEB API 心得筆記 (4) WEB API ROUTING

MSDN – MVC Razor語法

 

本系列程式原始碼請至我的Github下載  https://github.com/kyleap

** 如內容有誤請告知，將進行修改，謝謝 **

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(5) - 打造 BLL層

* 本篇目標

建立BLL(Business Logic Layout) ，建立ViewModel，將Entity物件轉為ViewModel給前端使用。

* 關於ViewModel

將DAL層及Domain層加入參考

上一篇加入實體模組，Entity Freamwork已經會自動幫我們產生Model的Class，我們在Domain方案再新增一個資料夾叫ViewModels，並新增一個CustomerViewModel

 

通常我會將Customer.cs 欄位內容先全部複製到CustomerViewModel.cs

為何要這樣 ? 好像只是多複製了一遍…。其實ViewModel初步設計可以從妳的View出發，表單有什麼欄位就該有什麼 property，譬如一個登入頁面，可能有帳號(Account)、密碼(Password)欄位，但實際上使用者資料表，可能有存在其他欄位入IP位置，建立日期，建立人員…等等欄位，這些欄位再View那邊是用不到的，所以我們不用把那麼大包的資訊再前後端穿梭，這就是ViewModel的用意。

* BLL建立Service

接著我們會到BLL層，建立一個Services資料夾，並加入一個CustomerService.cs，我們再建構的時候使用DAL層的Repository，因為泛型的關係，我們可以直接指定這個Repositoy使用Customers資料表

接下來我們建立一個方法，取得所有客戶資料，將DAL取出的客戶資料跑迴圈丟進我們的ViewModel並回傳

但如果欄位有20.30個，要一個一個塞也太累了....這時候就是AutoMapper出場的時候

* 使用NuGet安裝AutoMapper

使用Visual Studio開發.NET，最大的重點就是生產力極高，有很多的Freamwork及Plugin，我們可以透過Nuget來下載，使用方式是在專案上點右鍵，點選管理Nuget套件。

再搜尋欄位輸入AutoMapper，點選安裝

接著我們再改寫一下Get function

程式碼是不是簡潔很多，AutoMapper會自動幫我們做完轉換的動作，不用再自己刻了，這套件還有很多強大的功能，這邊就不一一做介紹了!

* 後記

我們已經完成Domain、DAL的建置，並完成呼叫DAL取得DB資料，並轉換成我們需要的ViewModel，接下來下一篇就來講解，前端UI層，怎麼跟BLL溝通取得ViewModel。

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(4) - 打造 DAL層

* 本篇目標

建立 DAL (Data Access Layout)，透過EntityFreamwork + 泛型建立與DataBase溝通的橋樑

請先於DataBase建立北風資料庫，可使用SQL ，Localdb相關文章可參考此篇

* 在Domain Project 建立實體模組

Domain這個專案定義為整個系統的核心，故關於Database及用來貫穿三層的ViewModel都會定義在這裡

首先，我們在專案點右鍵，加入ASP.NET 實體模組，並命名為CMSModel

選擇從資料庫產生

建立連線字串

加入所需使用的資料表

打開.edmx，剛剛所選的資料表都已轉成C#的Entity物件

* 於DAL專案參考Demain專案

接著我們移到DAL層將這座橋梁建立起來，再參考點選右鍵，加入參考，選擇方案

* Repository

Repository Pattern（倉儲模式），將新增、修改、查詢、刪除等動作封裝到一個Class，有關這個Entity的這些動作，都封裝在此，不會在其他專案裡存在著相同的程式碼

延伸閱讀

mrkt 的程式學習筆記 - ASP.NET MVC 專案分層架構 Part.1 初學者的起手式

我們先新增一個Interfaces資料夾，並加入一個 IRepository的介面。介面可以把他想成是一份合約，這個合約會規定，如果你要遵循的話一定要照我定義的條文去做，在程式裡面我們稱為實作。IRepository是一種泛型的使用技巧，在宣告時，就可傳入Entity的名稱，如此，我們就不用產生一堆CustomerRepository、OrderRepositoy…的class，因為我們合約(介面)要做的事是要專注在新增，修改，刪除，查詢，如果要做其他事，可以再定義另一份介面。

接著我們新增Repository資料夾，新增GenericRepository.cs，並去實作他

各個function基本上就是Entity Freamwork的新增修改刪除功能，這邊就不再細說，底下會附上程式參考

說明一下實作Get，通常我們查詢都會帶有一些條件，故可以用以下方式動態的的帶入filter、orderby參數，而不用先取得所有資料回傳後再去做篩選與排序。

* 後記

今日完成了Domain及DAL的建置，程式可維護性是很重要的，透過分層，我們的程式不至於太分散，能更專注於一個區塊、一個function去Debug，下一篇我們將進入BLL層，來看看DAL及BLL如何來溝通。

本篇程式原始碼請至我的Github下載  https://github.com/kyleap

 

** 如內容有誤請告知，將進行修改，謝謝 **

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(3) - 系統架構設計

* 本篇目標

系統架構規劃，並新增相關專案、技術規格

* 為何要分層架構規劃

分層的重要性，也是寫程式幾年後才真的領悟，ASP時代那種義大利麵式的寫法(html、Script、後端程式、SQL程式全混再一起)，接著WebForm CodeBind將前後端拆後，再到現在慣用的MVC，深深覺得"關注點分離"這的確是一件很重要的事，目前開發習慣，即使專案在小，也會整理出自己的三層架構起手式，如果是更大型專案，就會再更細分。本次範例專案會已以下架構圖來建立(使用ptt繪製，圖醜勿怪…..)：

各分層介紹：

DAL(Data Access Layer) : 有關SQL語法、EntityFream資料庫溝通，都會在此層。

BLL(Business Login Layer):資料流從DB或從User輸入後，一定會有一些邏輯判斷，該商業邏輯流程都會寫在此層

UI(User Interface):有關Web專案、Web API(Web Service)、Apps 都會在此層

Domain Entity : 裡面會有定義ViewModel Class，用來貫穿三個分層

Resources:用來放一些資源檔 … e.g 多國語系檔

Utility : 用來放置一些共用函示庫 … 如加解密

整個專案建立完如下圖：

* 開發技術

回顧上一篇的需求後，通常我會產生實際要做的Backlog，這邊就不一一列出來，將放置每篇的文章。

以前大老闆有說，她面試人最喜歡看出應試者能拉出多少技能，多深多廣，我們就來拉一下吧：

1. Visual Studio 2013 with Update 3
2. ASP.NET MVC 5
3. Web API 2.2
4. SQL Server 2012 ，安裝 Northwind (微軟提供的範例資料庫)
5. Entity Freamwork 6.1.1
6. SignalR
7. Angulary.js
8. Bootstrap
9. Report
10. IIS
11. Azure

接下來文章會一一提到以上技術並逐步來打造網站 !

 

** 如內容有誤請告知，將進行修改，謝謝 **

* 延伸閱讀

http://www.dotblogs.com.tw/asdtey/archive/2012/05/12/web-development-1.aspx

http://kevintsengtw.blogspot.tw/search/label/%E5%88%86%E5%B1%A4%E6%9E%B6%E6%A7%8B#.VCB28PmSxQc

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 開發管理系統 (2) - 系統需求分析

* 本篇目標

將天馬行空的使用者需求，引導並整理出方向

* 使用故事模式User Story分析

我待過資訊專案公司，也待過內部維運的IT，這兩者都免不了遇見天馬行空的使用者，但有時也不能怪使用者沒有流程的概念，或說出沒有邏輯的設計，與其等他端出幾盤菜給妳，不如準備幾份套餐，讓他去做選擇他最適合的，故事模式就是一個很好的引導方式，藉由這種溝通技巧，使用者就會有操作的畫面，也會有合乎邏輯的流程出來，譬如：對於使用者A，可以點擊選單進入後台，能透過XXX、OOO條件篩選，進而取得我要的資料。

* 開發管理系統的需求列表

這30天的文章，預計會實作以下功能

1. 使用者進入首頁後，可瀏覽目前各業務的訂單數
2. 訂單狀況應即時顯示，以便讓主管掌握當日業績
3. 管理者可維護客戶資訊
4. 訂單資訊可匯出各種格式的報表
5. 因應行動化，未來希望能透過手機、平板瀏覽
6. 希望系統有多國語系版本

* 後記

需求釐清後，通常就是帶回資訊內部，進行架構設計，列出工作項目，下篇預計來談談所用技術及開發架構…

(開始進入開發技術組主題…)

 

 

** 如內容有誤請告知，將進行修改，謝謝 **

延伸閱讀

User Stories (1) 什麼是 User Story?

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 開發管理系統 (1) - 簡介

* 當後端MVC 遇見 前端 MVC

又到了每年熱血的鐵人賽了，一直想著能分享些什麼，回顧過去工作經驗，做系統開發不外乎就那四件事CRUD (新增、查詢、修改、刪除)，早期ASP.NET WebForm可以讓我們很方便地達到這功能，藉由封裝好的控制項，使用拖拉、指定屬性、事件的方式可以很快速的開發成一個網站。

但自從ASP.NET MVC架構出來後，在開發上對我而言就不會想回去使用WebForm了，雖然少了方便地控制項，但隨著前端Freamwork越來越火紅如JS的jQuery，CSS的Bootstrap，相對來講ASP.NET MVC少了控制項的束縛，整合性算是比較好的。這次前端要搭配的是Google推出的Angular.js，是一個前端MVC的library，這也是今年鐵人賽蠻熱門的主題，本系列將搭配ASP.NET MVC來實作一個網站。

* 鐵人賽 30天希望能分享到什麼

從以前進入這行，除了看書自學外，看前人所寫的source code是最好的學習方式了，我試著回想這幾年工作上經常遇到的需求，將他寫成Sample code，整理成文章的目錄，希望能幫助到一些人，也因為主題還是有點廣，不是專注在某個主題上，故文章預定不會講得太細，但會提供延伸閱讀連結，提供個方向。

* 後記

嗯....希望能如期完成30天的任務 XDD ，今年可以說是發文前幾天才開始規劃寫Code，如果無法達成，那只能PO在自己的Blog上了。另外就是這次用的技術，可能會比較新，故如果系列文章內有任何建議，都歡迎留言，畢竟有交流是最好的進步方式了，謝謝!!

歡迎關注我的Blog 程式宅急便  http://kyleap.blogspot.tw/