检测是否使用JavaScript和AngularJS重写规则背后存在的资源 [英] detect if resource exists behind rewrite rules with javascript and AngularJS
问题描述
我试图覆盖只用javascript和AngularJS我的单页的应用程序的部分。
I am trying to overwrite portions of my single page app using only javascript and AngularJS.
覆盖项都是基于子域。
的每个子域指向同一个文档根。的
controllers.js
controller('AppController', ['$scope','$route','$routeParams','$location', function($scope, $route, $routeParams, $location) {
$scope.$on("$routeChangeSuccess",function( $currentRoute, $previousRoute ){
render();
});
var render = function(){
//Is it actually a subdomain?
if($location.host().split(".",1).length>2){
//Use subdomain folder if it is.
var url = "views/"+$location.host().split(".",1)+"/"+$route.current.template;
var http = new XMLHttpRequest();
http.onreadystatechange=function(){
if (http.readyState==4){
//If there isn't an overwrite, use the original.
$scope.page = (http.status!=404)?url:("views/"+$route.current.template);
}
}
http.open('HEAD', url, true);
http.send();
}
else{
//Else we are on the parent domain.
$scope.page = "views/"+$route.current.template;
}
};
}])
config.js
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
template: 'home.html'
});
$routeProvider.when('/services', {
template: 'services.html'
});
$routeProvider.otherwise({redirectTo: '/'});
}]);
的index.html
<html lang="en" ng-app="myApp" ng-controller="AppController">
<body>
<div ng-include src="page" class="container"></div>
</body>
</html>
由于这是一个单页的应用程序，当你直接打一个网址，这将 404 。这就是为什么我们在服务器上应用重写规则。就我而言，我使用nginx的：
Because this is a single page app, when you hit a URL directly, it's going to 404. That's why we apply rewrite rules on the server. In my case I'm using nginx:
location / {
try_files $uri /index.html;
}
当我不是一个子这个伟大的工程，但话又说回来，我也没有发出一个 XMLHtt prequest 。当我使用的子域，现在我们需要检查的覆盖。
This works great when I'm not on a subdomain, but then again I'm also not sending out an XMLHttpRequest. When I do use the subdomain, now we need to check for an overwrite.
这里棘手的部分是，重写规则迫使XMLHtt prequest返回一个200。
的我如何能有我的蛋糕和熊掌兼得的想法？的
推荐答案
我决定与当地stradegy走有两个原因：
I decided to go with a local stradegy for two reasons:
- 有XML请求没有额外的开销。
- 404的消息惯于polute控制台日志时资源不存在。
services.js
factory('Views', function($location,$route,$routeParams,objExistsFilter) {
var viewsService = {};
var views = {
subdomain1:{
'home.html':'/views/subdomain1/home.html'
},
subdomain2:{
},
'home.html':'/views/home.html',
};
viewsService.returnView = function() {
var y = $route.current.template;
var x = $location.host().split(".");
return (x.length>2)?(objExistsFilter(views[x[0]][y]))?views[x[0]][y]:views[y]:views[y];
};
viewsService.returnViews = function() {
return views;
};
return viewsService;
}).
controllers.js
controller('AppController', ['$scope','Views', function($scope, Views) {
$scope.$on("$routeChangeSuccess",function( $currentRoute, $previousRoute ){
$scope.page = Views.returnView();
});
}]).
filters.js
filter('objExists', function () {
return function (property) {
try {
return property;
} catch (err) {
return null
}
};
});
这篇关于检测是否使用JavaScript和AngularJS重写规则背后存在的资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
