[Angularjs]asp.net mvc+angularjs+web api單頁應用

時間 2019-12-02

標籤 angularjs asp.net asp mvc+angularjs+web mvc web api 單頁應用欄目 AngularJS 简体版

原文原文鏈接

寫在前面

最近的工做一直在弄一些h5的單頁應用，而後嵌入到app的webview中。以前一直在用angularjs+html+ashx的一套東西。實在是玩膩了。而後就嘗試經過asp.net mvc的方式構建單頁應用。用到的技術angularjs+webapi+mvc。在網上找到了一些相關的文章，關於anguar的位置也沒有一個比較好的一個標準。這裏也是拋磚引玉，但願經過討論，獲得一個更好的結構。css

項目結構

結構說明：html

_Layout.cshtml:該文件做爲模板文件，這裏將應用的js，及css文件，都凡在該頁。如圖所示：前端

Controllers/api文件夾：存放webapi接口。git

Controllers/*.cs：存放控制器。angularjs

將angularjs的mvc結構，都存放在了Scripts文件夾，這樣作，也是爲了操做方便（文件多的話，來回的切換窗口，確實很麻煩）。web

Scripts/App：存放angularjs的文件，以及app.jsjson

app.js的定義以下，包括module的註冊，以及服務信息：api

var app = angular.module('app_store', ['ngRoute', 'StoreService', ]);

//服務
var StoreService = angular.module('StoreService', []);
//請求服務
StoreService.factory('requestService', function ($http, $q) {
    var request = {
        method: 'POST',
        url: '',
        headers: { 'Content-Type': 'application/json' },
        data: {}
    };
    var postData = {
        lists: function (type) {
            request.method = "get";
            request.url = "../api/order/lists/" + type + "";
            return requestService($http, $q, request);
        },
        submit_product: function (data) {
            request.method = "post";
            request.url = "../api/order";
            request.data = data;
            return requestService($http, $q, request);
        }
    };
    return postData;
});
function requestService($http, $q, request) {
    var deferred = $q.defer(); // 聲明延後執行，表示要去監控後面的執行  
    $http(request).
    success(function (data, status, headers, config) {
        deferred.resolve(data);  // 聲明執行成功，即http請求數據成功，能夠返回數據了  
    }).
    error(function (data, status, headers, config) {

        deferred.reject(data);   // 聲明執行失敗，即服務器返回錯誤  
    });
    return deferred.promise;   // 返回承諾，這裏並非最終數據，而是訪問最終數據的API  
};

將modlue的定義放在了該js文件中，其中也包括請求的服務，考慮到減小一次靜態文件的請求，因此將服務也放在了該文件中。promise

Scripts/Controllers：這是angularjs的控制器。用來定義前端的controller。關於這個你能夠根據用途，分紅不一樣的控制器。也能夠對應於web api的方式定義。我建議若是功能不是太多，仍是放在一個裏面，若是定義太多的js文件，一是靜態文件的請求次數會不少，二是開發起來確實很頭大，每次開發在vs打開n個tab頁面，你會發現會讓你很是的頭大。服務器

Scripts/Filter：存放angularjs自定義的過濾器，（若是過濾器很少，建議仍是合併到app.js文件中。）

Scripts/Route：angularjs路由，若是路由很少，仍建議放在app.js中。

Scripts/Views：angularjs視圖，存放視圖模板。這個分法，很差說，能夠參考asp.net mvc的分發，按控制器名稱建文件夾。若是視圖很少，我是一股腦的都塞到views文件夾了。

一個例子

列舉一個根據關鍵字搜索商品的列表的例子。

Scripts/Controllers/StoreController.js

app.controller('StoreController', function ($scope, $http, $location, $routeParams, requestService) {
    console.log('StoreController');
    if (!$scope.productKey) {
        $scope.productKey = "飛機";
    };
    requestService.lists($scope.productKey).then(function (data) {
        console.log(data);
        if (data._code === 200) {
            $scope.orders = data._data;
        };
    });
});

Scripts/Route/app-route.js

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/', { templateUrl: '../Scripts/Views/OrderList.html', controller: 'StoreController' })
    .when('/error', { templateUrl: '../Scripts/Views/Error.html', controller: 'ErrorController' })
    .otherwise({ redirectTo: '/error' });
}]);

Scripts/Views/OrderList.html

<div class="address_serace">
    <input class="form-control" ng-change="" ng-model="productKey" placeholder="搜索商品">
</div>
<div class="address_div">
    <dl class="address_dl" ng-repeat="item in orders">
        <dt class="address_checkbox">
            <img class="address_check" src="../Images/icon-xx01@2x.png" />
        </dt>
        <dt class="address_user"><img class="address_user" src="../Images/dingy.png" /></dt>
        <dd class="address_font">
            <p class="address_font_t">{{item.Name}}</p>
            <p>單價：{{item.Price}}</p>
        </dd>
    </dl>

</div>

asp.net mvc 控制器StoreController.cs 中Index的action添加視圖，做爲呈現的頁面。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Wolfy.MvsSinglePage.Controllers
{
    public class StoreController : Controller
    {
        // GET: Store
        public ActionResult Index()
        {
            return View();
        }
    }
}

Index.cshtml,很簡單，一個添加指定ng-view的div，用來呈現Views中的html模板的。

@{
    ViewBag.Title = "Index";
}

<div ng-view></div>

web api:OrderController

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web.Http;
using Wolfy.MvsSinglePage.Models;

namespace Wolfy.MvsSinglePage.Controllers.api
{
    public class OrderController : ApiController
    {
        // GET: api/Order
        [HttpGet]
        [Route("api/order/lists/{key?}")]
        public async Task<HttpResponseMessage> Get(string key)
        {
            return await Task.Run(() =>
            {
                HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.Accepted);
                List<Order> lst = new List<Order>() { 
                   new Order(){ Id=Guid.NewGuid(), Dt=DateTime.Now, Name="飛機", Price=2222222},
                   new Order(){ Id=Guid.NewGuid(), Dt=DateTime.Now, Name="飛機2", Price=2222222},
                   new Order(){ Id=Guid.NewGuid(), Dt=DateTime.Now, Name="飛機3", Price=2222222},
                   new Order(){ Id=Guid.NewGuid(), Dt=DateTime.Now, Name="飛機4", Price=2222222},
                   new Order(){ Id=Guid.NewGuid(), Dt=DateTime.Now, Name="飛機5", Price=2222222},
                   new Order(){ Id=Guid.NewGuid(), Dt=DateTime.Now, Name="飛機6", Price=2222222},
                };
                var results = string.IsNullOrEmpty(key) ? lst : lst.Where(x => x.Name.Contains(key));
                response = new HttpResponseMessage(HttpStatusCode.OK)
                {
                    Content = new StringContent(JsonConvert.SerializeObject(new { _code = 200, _data = results }))
                };
                return response;
            });
        }
    }
}