chsakell分享了一个前端使用AngularJS,后端使用ASP.NET Web API的项目。

源码: https://github.com/chsakell/spa-webapi-angularjs
文章:http://chsakell.com/2015/08/23/building-single-page-applications-using-web-api-and-angularjs-free-e-book/

这里记录下对此项目的理解。分为如下几篇:

● 对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(1)--领域、Repository、Service

● 对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(2)--依赖倒置、Bundling、视图模型验证、视图模型和领域模型映射、自定义handler

● 对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(3)--主页面布局

● 对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(4)--Movie增改查以及上传图片

Home/Index.cshtml视图

创建一个有关ui的module:spa/modules/common.ui.js

(function () {
'use strict'; angular.module('common.ui', ['ui.bootstrap', 'chieffancypants.loadingBar']); })();

创建一个有关功能的module:spa/modules/common.ui.js

(function () {
'use strict'; angular.module('common.core', ['ngRoute', 'ngCookies', 'base64', 'angularFileUpload', 'angularValidator', 'angucomplete-alt']); })();

Home/Index.cshtml视图摘要:

<html ng-app="homeCinema">
<body ng-controller="rootCtrl">
<top-bar></top-bar>
<side-bar></side-bar>
<div class="page {{ pageClass }}" ng-view></div>
</body>
</html>

homeCinema是一个主module,依赖common.ui和common.core这2个module,定义在了spa/app.js中,具体如下:

//config传入名称为config的函数
//run传入名称为run的函数
//执行顺序:app.config()→app.run()→directive compile functions if found→app.controller→directive's link funciton if found
angular.module('homeCinema', ['common.core', 'common.ui'])
.config(config)
.run(run); //为config函数注入参数
config.$inject = ['$routeProvider']; //路由设置,让controller和页面匹配
function config($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "scripts/spa/home/index.html",
controller: "indexCtrl"
})
.when("/login", {
templateUrl: "scripts/spa/account/login.html",
controller: "loginCtrl"
})
.when("/register", {
templateUrl: "scripts/spa/account/register.html",
controller: "registerCtrl"
})
.when("/customers", {
templateUrl: "scripts/spa/customers/customers.html",
controller: "customersCtrl"
})
.when("/customers/register", {
templateUrl: "scripts/spa/customers/register.html",
controller: "customersRegCtrl",
//注入到cotroller中的依赖,controller会等到resolve的动作结束后再初始化
resolve: { isAuthenticated: isAuthenticated }
})
.when("/movies", {
templateUrl: "scripts/spa/movies/movies.html",
controller: "moviesCtrl"
})
.when("/movies/add", {
templateUrl: "scripts/spa/movies/add.html",
controller: "movieAddCtrl",
resolve: { isAuthenticated: isAuthenticated }
})
.when("/movies/:id", {
templateUrl: "scripts/spa/movies/details.html",
controller: "movieDetailsCtrl",
resolve: { isAuthenticated: isAuthenticated }
})
.when("/movies/edit/:id", {
templateUrl: "scripts/spa/movies/edit.html",
controller: "movieEditCtrl"
})
.when("/rental", {
templateUrl: "scripts/spa/rental/rental.html",
controller: "rentStatsCtrl"
}).otherwise({ redirectTo: "/" });
} //为resolve的函数注入参数
isAuthenticated.$inject = ['membershipService', '$rootScope', '$location']; //resolve执行的函数
function isAuthenticated(membershipService, $rootScope, $location) {
if (!membershipService.isUserLoggedIn()) {
$rootScope.previousState = $location.path();
$location.path('/login');
}
} //为run函数注入参数
run.$inject = ['$rootScope', '$location', '$cookieStore', '$http']; //一些初始化工作
function run($rootScope, $location, $cookieStore, $http) {
// handle page refreshes
//rootScope.repository
//rootScope.repository.loggedUser
$rootScope.repository = $cookieStore.get('repository') || {};
if ($rootScope.repository.loggedUser) {
$http.defaults.headers.common['Authorization'] = $rootScope.repository.loggedUser.authdata;
} $(document).ready(function () {
$(".fancybox").fancybox({
openEffect: 'none',
closeEffect: 'none'
}); $('.fancybox-media').fancybox({
openEffect: 'none',
closeEffect: 'none',
helpers: {
media: {}
}
}); $('[data-toggle=offcanvas]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
});
}

side-bar

在界面中的适用方法:<side-bar></side-bar>

在common.ui这个module中自定义了一个directive。在spa/layout/sideBar.directive.js

(function(app) {
'use strict'; app.directive('sideBar', sideBar); function sideBar() {
return {
restrict: 'E',
replace: true,
templateUrl: '/scripts/spa/layout/sideBar.html'
}
} })(angular.module('common.ui'));

spa/layout/sidebar.html摘要:

<a ng-href="#/">Home</i>
<a ng-href="#/customers/">Customers</a>
<a ng-href="#/customers/register">Register customer</a>
<a ng-href="#/movies/">Movies</a>
<a ng-href="#/movies/add">Add movie<i class="fa fa-plus-circle fa-fw pull-right"></i></a>
<a ng-href="#/rental/">Rental history<i class="fa fa-leanpub fa-fw pull-right"></i></a>
<a ng-href="#/login" ng-if="!userData.isUserLoggedIn">Login</a>
<a ng-click="logout();" ng-if="userData.isUserLoggedIn">Logout</a>

其中,userData.isUserLoggedIn肯定是homeCinema这个module的controller,定义在了spa/home/rootCtrl.js中。

(function (app) {
'use strict'; app.controller('rootCtrl', rootCtrl); rootCtrl.$inject = ['$scope','$location', 'membershipService','$rootScope']; function rootCtrl($scope, $location, membershipService, $rootScope) { //userData对象
$scope.userData = {}; //$scope.userData.displayUserInfo方法显示用户
$scope.userData.displayUserInfo = displayUserInfo; //方法登出
$scope.logout = logout; //$scope.userData.isUserLoggedIn,布尔类型
//$scope.username
function displayUserInfo() {
$scope.userData.isUserLoggedIn = membershipService.isUserLoggedIn(); if($scope.userData.isUserLoggedIn)
{
//主页面初始化的时候就定义在$rootScope.repository.loggedUser.username了
$scope.username = $rootScope.repository.loggedUser.username;
}
} function logout() {
membershipService.removeCredentials();
$location.path('#/');
$scope.userData.displayUserInfo();
} $scope.userData.displayUserInfo();
} })(angular.module('homeCinema'));

以上,注入了membershipService这个服务,另外还有一个apiService,notificationService等服务被放在了common.core模块中,都是以factory的方式创建的服务。

spa/services/notificationService.js这个服务基于toastr.js管理所有的通知。

(function (app) {
'use strict'; //以工厂的方式创建服务
app.factory('notificationService', notificationService); function notificationService() { toastr.options = {
"debug": false,
"positionClass": "toast-top-right",
"onclick": null,
"fadeIn": 300,
"fadeOut": 1000,
"timeOut": 3000,
"extendedTimeOut": 1000
}; var service = {
displaySuccess: displaySuccess,
displayError: displayError,
displayWarning: displayWarning,
displayInfo: displayInfo
}; return service; function displaySuccess(message) {
toastr.success(message);
} function displayError(error) {
if (Array.isArray(error)) {
error.forEach(function (err) {
toastr.error(err);
});
} else {
toastr.error(error);
}
} function displayWarning(message) {
toastr.warning(message);
} function displayInfo(message) {
toastr.info(message);
} } })(angular.module('common.core'));

spa/services/apiService.js服务用来管理GET和POST请求。

(function (app) {
'use strict'; app.factory('apiService', apiService); apiService.$inject = ['$http', '$location', 'notificationService','$rootScope']; function apiService($http, $location, notificationService, $rootScope) {
var service = {
get: get,
post: post
}; function get(url, config, success, failure) {
return $http.get(url, config)
.then(function (result) {
success(result);
}, function (error) {
if (error.status == '401') {
notificationService.displayError('Authentication required.');
$rootScope.previousState = $location.path();
$location.path('/login');
}
else if (failure != null) {
failure(error);
}
});
} function post(url, data, success, failure) {
return $http.post(url, data)
.then(function (result) {
success(result);
}, function (error) {
if (error.status == '401') {
notificationService.displayError('Authentication required.');
$rootScope.previousState = $location.path();
$location.path('/login');
}
else if (failure != null) {
failure(error);
}
});
} return service;
} })(angular.module('common.core'));

top bar

自定义的top bar放在了common.ui模块中,spa/layout/topBar.directive.js

(function(app) {
'use strict'; app.directive('topBar', topBar); function topBar() {
return {
restrict: 'E',
replace: true,
templateUrl: '/scripts/spa/layout/topBar.html'
}
} })(angular.module('common.ui'));

spa/layout/topBar.html摘要:

<a class="navbar-brand active" href="#/">Home Cinema</a>
<a href="#about">About</a>
<ulng-if="userData.isUserLoggedIn">
<a href="#/">{{username}}</a>
</ul>

以上,username, userData.isUserLoggedIn都是homeCinema这个模块中rootCtrl控制器的变量。

Latest Movies 

首先要写一个继承ApiController的类,用来处理登录异常。

namespace HomeCinema.Web.Infrastructure.Core
{
public class ApiControllerBase : ApiController
{
protected readonly IEntityBaseRepository<Error> _errorsRepository;
protected readonly IUnitOfWork _unitOfWork; public ApiControllerBase(IEntityBaseRepository<Error> errorsRepository, IUnitOfWork unitOfWork)
{
_errorsRepository = errorsRepository;
_unitOfWork = unitOfWork;
} public ApiControllerBase(IDataRepositoryFactory dataRepositoryFactory, IEntityBaseRepository<Error> errorsRepository, IUnitOfWork unitOfWork)
{
_errorsRepository = errorsRepository;
_unitOfWork = unitOfWork;
} protected HttpResponseMessage CreateHttpResponse(HttpRequestMessage request, Func<HttpResponseMessage> function)
{
HttpResponseMessage response = null; try
{
response = function.Invoke();
}
catch (DbUpdateException ex)
{
LogError(ex);
response = request.CreateResponse(HttpStatusCode.BadRequest, ex.InnerException.Message);
}
catch (Exception ex)
{
LogError(ex);
response = request.CreateResponse(HttpStatusCode.InternalServerError, ex.Message);
} return response;
} //把错误报错到数据库中去
private void LogError(Exception ex)
{
try
{
Error _error = new Error()
{
Message = ex.Message,
StackTrace = ex.StackTrace,
DateCreated = DateTime.Now
}; _errorsRepository.Add(_error);
_unitOfWork.Commit();
}
catch { }
}
}
}

以上, ApiControllerBase定义了一个重要的方法CreateHttpResponse,不但可以处理请求响应,还可以进行异常处理,把异常记录到数据库。

接着定义MoviesController,继承ApiControllerBase基类。

[Authorize(Roles = "Admin")]
[RoutePrefix("api/movies")]
public class MoviesController : ApiControllerBase
{
private readonly IEntityBaseRepository<Movie> _moviesRepository; public MoviesController(IEntityBaseRepository<Movie> moviesRepository,IEntityBaseRepository<Error> _errorsRepository, IUnitOfWork _unitOfWork)
: base(_errorsRepository, _unitOfWork)
{
_moviesRepository = moviesRepository;
} ...
}

首页展示6个Moview,针对此写一个aciton方法。

[AllowAnonymous]
[Route("latest")]
public HttpResponseMessage Get(HttpRequestMessage request)
{
return CreateHttpResponse(request, () =>
{
HttpResponseMessage response = null; //获取6个
var movies = _moviesRepository.GetAll().OrderByDescending(m => m.ReleaseDate).Take().ToList(); //转换成视图模型
IEnumerable<MovieViewModel> moviesVM = Mapper.Map<IEnumerable<Movie>, IEnumerable<MovieViewModel>>(movies); //创建响应
response = request.CreateResponse<IEnumerable<MovieViewModel>>(HttpStatusCode.OK, moviesVM); return response;
});
}

界面如何展示出来呢?在spa/app.js中的路由已经有了定义。

 $routeProvider
.when("/", {
templateUrl: "scripts/spa/home/index.html",
controller: "indexCtrl"
})
...

也就是在根地址下,使用indexCtrl这个controller,路由到scripts/spa/home/index.html这里。

scripts/spa/home/index.html

<div ng-if="loadingMovies">
<label class="label label-primary">Loading movies...</label>
</div> <div ng-repeat="movie in latestMovies">
<strong>{{movie.Title}} </strong>
<a ng-href="../../Content/images/movies/{{movie.Image}}" title="{{movie.Description | limitTo:200}}">
<img class="media-object" height="120" ng-src="../../Content/images/movies/{{movie.Image}}" alt="" />
</a>
<available-movie is-available="{{movie.IsAvailable}}"></available-movie>
{{movie.Description | limitTo: 70}}...</small>
<label class="label label-info">{{movie.Genre}}</label>
<span component-rating="{{movie.Rating}}"></span>
<a ng-href="{{movie.TrailerURI}}">Trailer<i class="fa fa-video-camera fa-fw"></i></a>
</div>

以上,其实定义了2个directive,一个是available-movie,用来显示Movie的状态,可能是Available,也可能是Not Available;另一个是component-rating,用来显示星级,基于 raty.js文件开发。

先来看控制器:spa/home/indexCtrl.js

(function (app) {
'use strict'; app.controller('indexCtrl', indexCtrl); indexCtrl.$inject = ['$scope','apiService', 'notificationService']; function indexCtrl($scope, apiService, notificationService) { $scope.loadingMovies = true; $scope.latestMovies = [];
$scope.loadData = loadData; function loadData() {
apiService.get('/api/movies/latest', null,
moviesLoadCompleted,
moviesLoadFailed);
} function moviesLoadCompleted(result) {
$scope.latestMovies = result.data;
$scope.loadingMovies = false;
} function moviesLoadFailed(response) {
notificationService.displayError(response.data);
} loadData();
} })(angular.module('homeCinema'));

再来看是否显示Available Movie的这个自定义directive,在页面中是这样使用的:

<available-movie is-available="{{movie.IsAvailable}}"></available-movie>

实际是在spa/directives/availableMovie.directive.js中定义的。

(function (app) {
'use strict'; //注意这里的惯例,这里的availableMovie相当于界面上的available-movie
app.directive('availableMovie', availableMovie); function availableMovie() {
return {
restrict: 'E',
templateUrl: "/Scripts/spa/directives/availableMovie.html",
link: function ($scope, $element, $attrs) { //getAvailbleClass供html中调用
//attrs表示属性,注意这里的惯例:isAvailable相当于界面上的is-available
$scope.getAvailableClass = function () {
if ($attrs.isAvailable === 'true')
return 'label label-success'
else
return 'label label-danger'
}; //getAvailability根据属性的布尔值返回不同的字符串
$scope.getAvailability = function () {
if ($attrs.isAvailable === 'true')
return 'Available!'
else
return 'Not Available'
};
}
}
} })(angular.module('common.ui'));

最终,在spa/directives/availableMovie.html中:

<label ng-class="getAvailableClass()">{{getAvailability()}}</label>

在Movie的显示中,还定义了一个directive,用来显示星级,在界面中按如下:

<span component-rating="{{movie.Rating}}"></span>

在spa/directives/componentRating.directive.js中:

(function(app) {
'use strict'; app.directive('componentRating', componentRating); function componentRating() {
return {
restrict: 'A', //A说明directive以属性的方式
link: function ($scope, $element, $attrs) {
$element.raty({
score: $attrs.componentRating, //componentRating相当于界面中的component-rating,接收component-rating属性值
halfShow: false,
readOnly: $scope.isReadOnly,//表明是只读的星级
noRatedMsg: "Not rated yet!",
starHalf: "../Content/images/raty/star-half.png",
starOff: "../Content/images/raty/star-off.png",
starOn: "../Content/images/raty/star-on.png",
hints: ["Poor", "Average", "Good", "Very Good", "Excellent"],
click: function (score, event) {
//Set the model value
$scope.movie.Rating = score;
$scope.$apply();
}
});
}
}
} })(angular.module('common.ui'));

点击首页Movie缩略图,弹出窗口

关于缩略图的html部分就在scripts/spa/home/index.html中,具体为:

<a class="fancybox pull-left" rel="gallery1" ng-href="../../Content/images/movies/{{movie.Image}}" title="{{movie.Description | limitTo:200}}">
<img class="media-object" height="120" ng-src="../../Content/images/movies/{{movie.Image}}" alt="" />
</a>

根据类名fancybox,使用jquery语法调用jquery.fancybox.js的语法,具体调用是在app.js中调用的:

function run($rootScope, $location, $cookieStore, $http) {
... $(document).ready(function () {
$(".fancybox").fancybox({
openEffect: 'none',
closeEffect: 'none'
}); ...
});
}

待续~

对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(3)的更多相关文章

  1. 对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(4)

    chsakell分享了一个前端使用AngularJS,后端使用ASP.NET Web API的项目. 源码: https://github.com/chsakell/spa-webapi-angula ...

  2. 对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(2)

    chsakell分享了一个前端使用AngularJS,后端使用ASP.NET Web API的项目. 源码: https://github.com/chsakell/spa-webapi-angula ...

  3. 对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(1)

    chsakell分享了一个前端使用AngularJS,后端使用ASP.NET Web API的项目. 源码: https://github.com/chsakell/spa-webapi-angula ...

  4. 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证

    原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证 chsakell分享了前端使用AngularJS,后端使用ASP. ...

  5. 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session

    原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session chsakell分享了前端使用AngularJS,后端使用ASP.NE ...

  6. 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端

    原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端 chsakell分享了前端使用AngularJS,后端使用ASP.NET Web API的购物车 ...

  7. 对一个前端AngularJS,后端OData,ASP.NET Web API案例的理解

    依然chsakell,他写了一篇前端AngularJS,后端OData,ASP.NET Web API的Demo,关于OData在ASP.NET Web API中的正删改查没有什么特别之处,但在前端调 ...

  8. 在ASP.NET Web API项目中使用Hangfire实现后台任务处理

    当前项目中有这样一个需求:由前端用户的一个操作,需要触发到不同设备的消息推送.由于推送这个具体功能,我们采用了第三方的服务.而这个服务调用有时候可能会有延时,为此,我们希望将消息推送与用户前端操作实现 ...

  9. 如何创建一个Asp .Net Web Api项目

    1.点击文件=>新建=>项目 2.创建一个Asp .NET Web项目 3.选择Empty,然后选中下面的MVC和Web Api,也可以直接选择Web Api选项,注意将身份验证设置为无身 ...

随机推荐

  1. mysql 5.7.16安装与给远程连接权限

    ZIP Archive版是免安装的.只要解压就行了.不需要安装.我的放在d盘啦. 1.配置: 也就是my.ini文件的由来. 把my-default.ini(此文件是解压之后,自带的)这个文件复制一下 ...

  2. 推荐几款实用的Android Studio 插件

    推荐几款实用的Android Studio 插件 泡在网上的日子 发表于 2015-10-09 10:47 第 17453 次阅读 插件,Android Studio 10 编辑推荐:稀土掘金,这是一 ...

  3. ubuntu14.04禁用guest用户登录

    打开终端(ctrl+alt+t) sudo  echo -e "[SeatDefaults]\nallow-guest=false"  > /usr/share/lightd ...

  4. Windows下msysGit使用及相关配置

    Windows下msysGit使用 目前我们git通过ssh进行通信,所以需要你也安装ssh以及将ssh key发给我,省得每次都需要输入用户名和密码 1.创建工程目录 windows下进入msysG ...

  5. codeforces 677D D. Vanya and Treasure(二维线段树)

    题目链接: D. Vanya and Treasure time limit per test 1.5 seconds memory limit per test 256 megabytes inpu ...

  6. java include包含指令例子

    1.项目架构 2. 代码 (1)top.jsp 2.copyright.jsp 3.index.jsp 4.效果图: 5.总结 期间也碰到过很多问题,例如我刚开始不是创建的java动态项目而是java ...

  7. Socket通信原理

    对TCP/IP.UDP.Socket编程这些词你不会很陌生吧?随着网络技术的发展,这些词充斥着我们的耳朵.那么我想问: 1.         什么是TCP/IP.UDP?2.         Sock ...

  8. jenkins - MultiJob使用

    我们如果使用jenkins需要由串行,并行,传递参数和等待执行的功能的话,那我们会用到jenkins里面的两个东西:MultiJob和pipeline 这里我介绍下MultiJob的使用 实例任务的拓 ...

  9. java linux ImageIO 验证码在一段时间以后出不来 问题总结

    最近在测试上布署的项目经常性的出现验证码过了一段时间以后出不来的情况,耐心找了一下,最后在上级的指导下发现了报错,其实说真的,我自己也找到了这个报错,只是没有当一回事.因为这个验证码的东西不是我写的, ...

  10. 内省(Introspector)

    /** * 内省:通过反射来操作javabean * 内省类 --> Bean信息 --> 属性描述符 --> 属性的get/set对应的Method --> 进行反射 * c ...