对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(3)
chsakell分享了一个前端使用AngularJS,后端使用ASP.NET Web API的项目。
源码: https://github.com/chsakell/spa-webapi-angularjs
文章：
这里记录下对此项目的理解。分为如下几篇：
● 对一个前端使用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("http://www.mamicode.com/", { 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: "http://www.mamicode.com/" }); } //为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
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/65977.html
