AngularJS的基础知识。 我尝试按照this tutorial使用路由来实现基于角色的应用，根据用户的角色将用户重定向到不同的视图。
问题
当我加载初始页面时，尽管没有出现错误，但它似乎也没有触发＆＃34; authorizationService＆＃34;也没有任何路线。我在服务和路线中都设置了断点。解决，但没有一个被触发。
现在，默认页面加载空的＆＃34; /＆＃34; templateView，尽管登录的用户具有与其他视图相关的组权限，应首先显示。
代码
我的主要app.js看起来像这样：
"use strict";
var roles = {
compras : "Compras",
tesoreria: "Tesoreria",
cuentasPorPagar: "Cuentas Por Pagar",
masterData: "Master Data"
};
var app = angular.module("proveedorApp", ['ngRoute', 'ngResource'])
.config(function($routeProvider, $locationProvider) {
$routeProvider.when("/Compras", {
templateUrl: _spPageContextInfo.webAbsoluteUrl +"/SiteAssets/Angular/Templates/compras.html",
caseInsensitiveMatch: true,
controller: "comprasCtrl",
resolve: {
permission: function(authorizationService, $route) {
return authorizationService.permissionCheck([roles.compras]);
},
}
}).when("/Tesoreria", {
templateUrl: _spPageContextInfo.webAbsoluteUrl +"/SiteAssets/Angular/Templates/tesoreria.html",
caseInsensitiveMatch: true,
controller: "tesoreriaCtrl",
resolve: {
permission: function(authorizationService, $route) {
return authorizationService.permissionCheck([roles.tesoreria]);
},
}
}).when("/CuentasPorPagar", {
templateUrl: _spPageContextInfo.webAbsoluteUrl +"/SiteAssets/Angular/Templates/cuentasPorPagar.html",
caseInsensitiveMatch: true,
controller: "cuentasPorPagarCtrl",
resolve: {
permission: function(authorizationService, $route) {
return authorizationService.permissionCheck([roles.cuentasPorPagar]);
},
}
}).when("/MasterData", {
templateUrl: _spPageContextInfo.webAbsoluteUrl +"/SiteAssets/Angular/Templates/masterData.html",
caseInsensitiveMatch: true,
controller: "masterDataCtrl",
resolve: {
permission: function(authorizationService, $route) {
return authorizationService.permissionCheck([roles.masterData]);
},
}
}).when("/NoAccess", {
templateUrl: _spPageContextInfo.webAbsoluteUrl +"/SiteAssets/Angular/Templates/inicio.html",
caseInsensitiveMatch: true,
controller: "inicioCtrl"
}).when("/", {
templateUrl: _spPageContextInfo.webAbsoluteUrl +"/SiteAssets/Angular/Templates/inicio.html",
caseInsensitiveMatch: true,
controller: "inicioCtrl"
})
});
＆＃34; authorizationService＆＃34;使用如下：
"use strict";
app.factory('authorizationService', function ($resource, $q, $rootScope, $location) {
return {
// We would cache the permission for the session,
//to avoid roundtrip to server
//for subsequent requests
permissionModel: {
permission: {},
isPermissionLoaded: false
},
permissionCheck: function (roleCollection) {
// we will return a promise .
var deferred = $q.defer();
//this is just to keep a pointer to parent scope from within promise scope.
var parentPointer = this;
//Checking if permission object(list of roles for logged in user)
//is already filled from service
if (this.permissionModel.isPermissionLoaded) {
//Check if the current user has required role to access the route
this.getPermission(this.permissionModel, roleCollection, deferred);
} else {
//if permission is not obtained yet, we will get it from server.
// 'api/permissionService' is the path of server web service , used for this example.
var permissionsRestCall = _spPageContextInfo.webAbsoluteUrl + '/_api/web/currentuser/groups?$select=title';
// $resource('/api/permissionService').get().$promise.then(function (response) {
$resource(permissionsRestCall).get().$promise.then(function (response) {
//when server service responds then we will fill the permission object
// parentPointer.permissionModel.permission = response;
var groups = $($(reponse).find('entry content'));
var names = $.map(groups, function(x){ return $(x).text() });
parentPointer.permissionModel.permission = names;
//Indicator is set to true that permission object is filled and
//can be re-used for subsequent route request for the session of the user
parentPointer.permissionModel.isPermissionLoaded = true;
//Check if the current user has required role to access the route
parentPointer.getPermission(parentPointer.permissionModel, roleCollection, deferred);
});
}
return deferred.promise;
},
//Method to check if the current user has required role to access the route
//'permissionModel' has permission information obtained from server for current user
//'roleCollection' is the list of roles which are authorized to access route
//'deferred' is the object through which we shall resolve promise
getPermission: function (permissionModel, roleCollection, deferred) {
var ifPermissionPassed = false;
angular.forEach(roleCollection, function (role) {
switch (role) {
case roles.compras:
if (permissionModel.includes(roles.compras)) {
ifPermissionPassed = true;
}
break;
case roles.tesoreria:
if (permissionModel.includes(roles.tesoreria)) {
ifPermissionPassed = true;
}
break;
case roles.cuentasPorPagar:
if (permissionModel.includes(roles.cuentasPorPagar)) {
ifPermissionPassed = true;
}
break;
case roles.masterData:
if (permissionModel.includes(roles.masterData)) {
ifPermissionPassed = true;
}
break;
default:
ifPermissionPassed = false;
}
});
if (!ifPermissionPassed) {
//If user does not have required access,
//we will route the user to unauthorized access page
$location.path("/NoAccess");
//As there could be some delay when location change event happens,
//we will keep a watch on $locationChangeSuccess event
// and would resolve promise when this event occurs.
$rootScope.$on('$locationChangeSuccess', function (next, current) {
deferred.resolve();
});
} else {
deferred.resolve();
}
}
};
});
我的主页基本上是一个Div容器。重要的是，此DIV容器将插入SharePoint Online 2013上托管的SharePoint WebPart页面中的ScriptEditor WebPart中。
<div ng-app="proveedorApp"> Aqui se comienza
<div ng-view>
</div>
现在每个templateView只有一个<p> This is view X </p>元素供参考。
已编辑：错过了ng-app中的ng-view
已编辑：澄清默认页面的当前行为