【轉】asp.net mvc webapi+angular.js案例

時間 2019-11-22

標籤 asp.net asp mvc webapi+angular.js webapi angular 案例欄目 ASP 简体版

原文原文鏈接

參考地址：http://www.mamicode.com/info-detail-892383.htmlhtml

你們好，本文用一個簡單的demo演示AngularJS在MVC中的使用，在學習這個demo以前，須要你對angularJS有基本的瞭解，而且對asp.net webAPI也瞭解一些，我最近也是由於公司項目須要，纔開始學習這兩種新的知識（對我而言）。web

網上對於angularJS和MVC結合的資料不多，因此在學習過程當中走了不少彎路，在剛剛搞明白的時候，趕忙寫下一篇筆記，方便之後查閱，也能夠發出來請熟練大牛指正，互相學習。編程

首先按照我我的的理解，解釋一個使用過程當中遇到的問題。那就是在angularJS模板的使用上，應該選擇MVC的視圖頁仍是靜態的HTML頁面。在通過練習和思考後，我的的理解是，使用HTML更加好一些，在一篇網上的英文文檔中，做者對angularJS的模板頁指定對應的是相應控制器下的MVC佈局頁，我的以爲不妥。瀏覽器

對angularJS來講，最終展示的是一個HTML頁面，操做的也是一個HTML頁面，而MVC的視圖頁最終也是轉換成HTML頁面交給瀏覽器處理，何不直接使用angularJS處理HTML頁面，使用MVC視圖頁豈很少了亢餘的步驟。app

這個問題只是我的感受，歡迎熟悉的朋友和我討論。asp.net

好了，開始咱們的小Demo。佈局

首先打開VS2013建立web程序(我用的2013版本，裏面對路由的控制有不少新特性，2012好像不支持。)。學習

有不少朋友可能會在VS2013裏面選擇visusl studio2012而後建立詳細的web程序，我這裏直接使用VS2013的web程序。網站

肯定以後會彈出詳細頁面，咱們選擇一個空的頁面，而且勾選下面的MVC和WebAPI選項，VS會自動幫咱們新建一些文件夾，這裏微軟作的仍是挺nx的，選擇其餘的類型，直接就是一個網站Demo，新手能夠建立一個進行學習。spa

接下來咱們在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裏面應用，有了一個大體的映像，好了，這就是咱們須要的，編程之路還很長，咱們一塊兒學習進步。