[Angularjs] MVC + Web API + AngularJs build a simple CURD framework and angularjscurd

[Angularjs] MVC + Web API + AngularJs build a simple CURD framework and angularjscurd
MVC + Web API + AngularJs build a simple CURD framework

GitHub address: https://github.com/liqingwen2015/Wen.MvcSinglePage

<Script src = "~ /Scripts/jquery-1.10.2.min.js "> </script> <script src = "~ /Scripts/bootstrap. min. js "> </script> @ * angularJs * @ <script src = "~ /Scripts/angular-js/angular. js "> </script> <script src = "~ /Scripts/angular-js/angular-route.js "> </script> @ * angularJs custom configuration * @ <script src = "~ /Scripts/core/app. js "> </script> <script src = "~ /Scripts/core/app-route.js "> </script> <script src = "~ /Scripts/core/app-service.js "> </script> @ * angularJs custom controller * @ <script src = "~ /Scripts/core/controllers/demoController. js "> </script>

 

App. js

var app = angular.module('myApp', ['ngRoute', 'demoService', ]);

　　

App-route.js

// Route configuration app. config (['$ routeProvider', function ($ routeProvider) {$ routeProvider. when ('/', {templateUrl :'.. /Scripts/core/views/demo/index.html ', controller: 'democontroller '}). when ('/home', {templateUrl :'.. /Scripts/core/views/demo/index.html ', controller: 'democontroller '}). when ('/add', {templateUrl :'.. /Scripts/core/views/demo/edit.html ', controller: 'demoeditcontroller '}). when ('/edit/: id', {templateUrl :'.. /Scripts/core/views/demo/edit.html ', controller: 'demoeditcontroller '}). when ('/error', {templateUrl :'.. /Scripts/Views/Error.html ', controller: 'errorcontroller '}). otherwise ({redirectTo: '/error'});}]);

 

App-service.js

// Service var demoService = angular. module ('demoservice', []); // request service demoService. factory ('requestservice', function ($ http, $ q) {var params = {method: '', url:'', headers: {'content-type ': 'application/json'}, data :{}} var request ={// add: function (data) {params. method = "post"; params. url = ".. /api/demo/add "; params. data = data; return requestService ($ http, $ q, params) ;}, // Delete del: function (Id) {params. method = "delete"; params. url = ".../api/demo/del? Id = "+ id; return requestService ($ http, $ q, params) ;}, // modify update: function (data) {params. method = "put"; params. url = ".. /api/demo/update "; params. data = data; return requestService ($ http, $ q, params) ;}, // query get: function (id) {params. method = "get"; params. url = ".. /api/demo/get? Id = "+ id; return requestService ($ http, $ q, params) ;}, // page details: function (key, pageIndex) {params. method = "get"; params. url = ".. /api/demo/details? Key = "+ key +" & pageIndex = "+ pageIndex; return requestService ($ http, $ q, params) ;}; return request ;}); // request service function requestService ($ http, $ q, request) {return $ http (request );};

 

DemoController. js

App. controller ('democontroller', function ($ scope, $ http, $ location, $ routeParams, requestService) {console. log ('democontroller'); var currentPageIndex = 1; $ scope. list = []; // Delete $ scope. del = function (id) {requestService. del (id ). then (function (result) {var data = result. data; console. log (data) ;};}; $ scope. demoKey = $ scope. demoKey? $ Scope. demoKey: ""; $ scope. details = function (key, pageIndex) {requestService. details (key, pageIndex ). then (function (result) {var data = result. data; $ scope. list = data;}); console. log ($ scope. list) ;}; $ scope. details ("", currentPageIndex); // query $ scope. search = function () {$ scope. list = []; $ scope. details ($ scope. demoKey, currentPageIndex) ;}; // added $ scope. add = function () {$ location. url ('/ Add') ;}; // edit $ scope. edit = function (id) {$ location. url ('/edit/' + id) ;}; // next page $ scope. nextPage = function () {currentPageIndex ++; $ scope. details ($ scope. demoKey, currentPageIndex) ;}; // Previous Page $ scope. prePage = function () {if (currentPageIndex> 1) {currentPageIndex --;} $ scope. details ($ scope. demoKey, currentPageIndex) ;};}); // demoEditControllerapp. controller ('demoeditcontroller', function ($ s Callback, $ http, $ location, $ routeParams, requestService) {console. log ('demoeditcontroller'); $ scope. demo = {Id: '', Name:'', Price: 0}; var id = $ routeParams. id; $ scope. get = function () {requestService. get (id ). then (function (result) {console. log (result); $ scope. demo = result. data ;}) ;}if (id! = Null) {$ scope. get () ;}$ scope. save = function () {if (id) {$ scope. demo. id = id; requestService. update ($ scope. demo ). then (function (result) {console. log (result); var data = result. data; console. log ("updated successfully"); console. log (data) ;}) ;}else {requestService. add ($ scope. demo ). then (function (result) {console. log (result); var data = result. data; console. log ("successfully added"); console. log (data );});};};});

 

Index.html

<Div class = "address_serace"> <input class = "form-control" ng-change = "search () "ng-model =" demoKey "placeholder =" Search "> </div> <div class =" address_div "> <dl class =" address_dl "ng-repeat =" item in list "> <dd class =" address_font "> <p class =" address_font_t "> {item. name }}</p> <p> unit price: ￥ {item. price }}</p> <a ng-click = "del (item. id) "> Delete </a> <a ng-click =" edit (item. id) "> edit </a> </dd> </dl> </div> <button class =" btn-primary btn-block "ng-click =" prePage () "> Previous Page... </button> <button class = "btn-primary btn-block" ng-click = "nextPage ()"> next page... </button> <button class = "btn-primary btn-block" ng-click = "add ()"> add </button>

 

Edit.html

<Input type = "text" name = "name" class = "form-control" placeholder = "commodity" ng-model = "demo. name "required/> <input type =" text "name =" name "class =" form-control "placeholder =" price "ng-model =" demo. price "required/> <button class =" btn-primary btn-block "ng-click =" save () "> save </button>

 

API: Demo Controller

# Regionusing System; using System. collections. generic; using System. linq; using System. web. http; using Wen. mvcSinglePage. models. api; # endregionnamespace Wen. mvcSinglePage. controllers. api {public class DemoController: ApiController {private IList <DemoViewModel> _ demos = new List <DemoViewModel> (); public DemoController () {InitDemo ();} /// <summary> /// add /// </summary> /// <param name = "demo"> </param> /// <Returns> </returns> [HttpPost] public DemoViewModel Add ([FromBody] DemoViewModel demo) {_ demos. add (demo); return demo ;} /// <summary> /// Get /// </summary> /// <returns> </returns> [HttpGet] public DemoViewModel Get (int id) {return _ demos. firstOrDefault (x => x. id = id );} /// <summary> /// Delete /// </summary> /// <param name = "id"> </param> /// <returns> </ returns> [HttpDelete] public int Del (I Nt id = 0) {var demo = _ demos. FirstOrDefault (x => x. Id = id); if (demo! = Null) _ demos. remove (demo); return id ;} /// <summary> /// update /// </summary> /// <param name = "demo"> </param> /// <returns> </ returns> [HttpPut] public DemoViewModel Update ([FromBody] DemoViewModel demo) {var entity = _ demos. firstOrDefault (x => x. id = demo. id); if (entity = null) return demo; entity. name = demo. name; entity. price = demo. price; return demo;} // <summary> // details (pagination) /// </summary> /// <Param name = "key"> </param> /// <param name = "pageIndex"> </param> /// <returns> </returns> [HttpGet] public IEnumerable <DemoViewModel> Details (string key, int pageIndex) {const int pageSize = 5; if (! String. isNullOrEmpty (key) {_ demos = _ demos. where (x => x. name. contains (key )). toList ();} return _ demos. skip (pageSize * (pageIndex-1 )). take (pageSize);} // <summary> // initialize Demo /// </summary> private void InitDemo () {var random = new Random (); for (var I = 0; I <100; I ++) {_ demos. add (new DemoViewModel {Id = I, Name = $ "item: {I}", Price = random. next ()});}}}}DemoController. cs

 

 

 

[Blogger] Anti-Bot

[Source] http://www.cnblogs.com/liqingwen/p/6713612.html