[鐵人30天]當ASP.NET MVC 遇見Angular.js MVC ... | angularjs mvc
*本篇目標利用Angular.js向WebAPI取得資料*前言以往開發前端多半倚賴jQuery,今年接觸到了Google所推出的JavaScriptlibery,他是一個前端MVC的Freamwork,Study過後,認為將前端改寫成NG,程式會比較有彈性,故開始投入學習。個人認為學習曲線NG比學習jQuery還要高,本系列文章並不是針對NG做一個詳細介紹,故會採用"做中學"的方式,來實作ASP.NETMVC如何搭配Angular.js做開發。*VisualStudio安裝我們一樣在Web專案使用Nuget安裝會看到Scripts資料夾裡有非常的多的Angular套件,這是因為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 : 因為是MV...