參考地址：http://www.mamicode.com/info-detail-892383.html
大家好，本文用一個簡單的demo演示AngularJS在MVC中的使用，在學習這個demo之前，需要你對angularJS有基本的了解，並且對asp.net webAPI也了解一些，我最近也是因為公司項目需要，才開始學習這兩種新的知識（對我而言）。
網上對於angularJS和MVC結合的資料很少，所以在學習過程中走了很多彎路，在剛剛搞明白的時候，趕緊寫下一篇筆記，方便以后查閱，也可以發出來請熟練大牛指正，互相學習。
首先按照我個人的理解，解釋一個使用過程中遇到的問題。那就是在angularJS模板的使用上，應該選擇MVC的視圖頁還是靜態的HTML頁面。 在經過練習和思考后，個人的理解是，使用HTML更加好一些，在一篇網上的英文文檔中，作者對angularJS的模板頁指定對應的是相應控制器下的MVC布局頁，個人覺得不妥。
對angularJS來說，最終展現的是一個HTML頁面，操作的也是一個HTML頁面，而MVC的視圖頁最終也是轉換成HTML頁面交給瀏覽器處理，何不直接使用angularJS處理HTML頁面，使用MVC視圖頁豈不多了亢余的步驟。
這個問題只是個人感覺，歡迎熟悉的朋友和我討論。
好了，開始我們的小Demo。
首先打開VS2013創建web程序(我用的2013版本，里面對路由的控制有很多新特性，2012好像不支持。)。
有很多朋友可能會在VS2013里面選擇visusl studio2012然后創建詳細的web程序，我這里直接使用VS2013的web程序。
確定之后會彈出詳細頁面，我們選擇一個空的頁面，並且勾選下面的MVC和WebAPI選項，VS會自動幫我們新建一些文件夾，這里微軟做的還是挺nx的，選擇其他的類型，直接就是一個網站Demo，新手可以創建一個進行學習 。
接下來我們在Controllers文件夾里面直接新建一個MVC5的空的控制器，起名HomeController。
然后在Index方法上右擊新建一個默認名稱的使用布局的視圖頁。
這時，VS會自動幫我們建好母版頁和關聯的布局頁。
我們打開母版頁_Layout.cshtml，可以看見它使用了@RenderBody()作為占位符，填充占位符的就是其他我們創建的視圖頁面了，比如Index.cshtml。而且我們需要使用的引用，也可以放在這里，比如我們將要用到的angularJS文件。既然是最最最母版頁，那么我們代表angularJS入口的ng-app也需要寫在這里了，我們在<body>標簽里面設置ng-app。
打開index.cshtml文件，此時里面應該是空的，那么好，我們把這個當做我們angularJS的母版頁，只需要加入一段代碼<div ng-view></div> 。如果你了解angularJS的話，相信能看懂這是什么意思，ng-view的作用就是代表這是一個angularJS的模板頁，其他的部分頁都在這個div下面顯示。
好了，准備工作已經完成了，接下來，我們開始寫其他代碼。
我們為了簡單，直接寫一個Person類當做我們的數據源。
在Models文件夾新建一個Person類，寫上屬性當做我們的數據源。
嗯，設置好了用來模擬的數據源，我們創建調用數據源的控制器，這里我們使用web API來控制數據，我們還是在controllers文件夾下創建(嚴格的來說，在項目中webAPI應該放在Apis文件夾下面，這里我們簡單起見)。創建一個空的web API2控制器，取名ShowController。
好了，創建完控制，該制造我們的偽數據源了。在這里，我暫時不使用RESTful模式的路由方式了，直接使用屬性路由，關於屬性路由，我會在之后寫一篇簡單的介紹，感興趣的朋友可以看看，希望能和大家討論。
好了，數據和MVC模板都已經准備好了，我們接下來開始angularJS的部分。首先創建一個名叫App的文件夾，這是在標准的angularJS里面常用的文件夾分類方式，一般關於angularJS的文件都放在這里，我就不做過多的介紹了。
在App文件夾中，我們創建兩個文件，一個是app.js和Show.html。
打開Show.html文件，把里面的內容全部刪除，因為我們需要它來充當整個頁面的部分頁。然后添加下面內容，這里使用一個li列表展示數據。
接下來就是開始我們的JS代碼的編寫了，這里我就不對angular做過多的解釋了，如果有時間，我會把這段時間學習的筆記分享出來，想要學習angularJS的朋友可以看看，也方便和大家討論。
大功告成了，哦對了，千萬別忘了在MVC母版頁對一些重要的JS文件的引用，這個為什么放在最后說呢？希望大家以后別犯錯，說多了都是淚啊……
我們這個Demo中用到了angularJS的兩個JS文件，因為angularJS將很多功能分開打包了，所以需要注意這一點，我剛開始就是因為把route文件沒引用，折騰了半天才發現原因。還有一個就是我們寫的app.js文件了，這是一個隊angularJS全局控制的文件，必須引進來。
PS關於angularJS的引用文件，大家可以去GitHub下載，或者在VS里面的NuGit里面搜索angular也可以直接安裝，推薦NuGit安裝，很方便。
好了，看看我們的運行效果吧。
數據已經展示出來了。
最后我在小小的改動一下，使用我們的asp.net web API特有的方式，就是RESTful模式，我個人暫時將RESTful看做是一種模式，我們使用這種方式看看。
第一：我們去掉屬性路由的設置方式，讓API控制器使用自身的請求方法。
第二，我們把angularJS的入口文件app.js里面的服務請求URI也小小的改動一下。
我們運行一下，看看效果。
一模一樣，這是為什么呢？因為屬性路由規定了URI的路由前綴，按照這個前綴訪問過來的RUI會自動的匹配路由屬性控制的方法或者類。而我們在angularJS里面設置的服務請求地址正好是這個屬性路由所指定的路由前綴， 嗯，恍然大悟了吧，就是這么簡單。
而使用RESTful的方式呢？我們去掉屬性路由，讓一切回歸自然。這時路由的請求是按照API的控制器的名字請求的，發現沒，我在app.js文件里面對http服務的改動正好是web API控制器的前綴，嗯，有沒有又恍然大悟的感覺。對，這就是web API的處理請求的方式，通過控制器名字，至於進入這個控制器，直行哪一個具體的方法，那就是RESTful模式啦。
PS：歡迎朋友們和我討論，並且指正文章中的錯誤，我也在學習中，希望得到大家的幫助。
嗯，這個例子很小，但是對於剛接觸angularJS的同學（比如我）來說，怎么在項目中和其他的技術結合使用，確實是一個很頭疼的事情。如果做完了這個小案例，相信你對angularJS怎么在MVC里面應用，有了一個大致的映像，好了，這就是我們需要的，編程之路還很長，我們一起學習進步。