检查模板中是否存在 ng-include $routeProvider文件
Check if file exists for ng-include in $routeProvider template
我已经设置了我的 Angular 路由以使用 URL 中的 slug 来确定要加载的文件。它看起来像这样:
$routeProvider.when("/project/:slug", {
controller: "ProjectController",
template: function($routeParams){
return '<div id="project" ng-include="''/views/' + $routeParams.slug + '.html''"></div>';
}
});
工作魅力,但如果ng-include
的文件不存在,则此处没有回退。我想过使用解析,但我似乎无法正确检查文件。我的尝试如下所示:
$routeProvider.when("/project/:slug", {
controller: "ProjectController",
resolve: {
check: ["$route", "$http", "$location", function($route, $http, $location){
$http.get("/views/" + $route.current.params.slug + ".html").then(function(res){
if (!res.data) $location.path("/");
else return true;
});
});
},
template: function($routeParams){
return '<div id="project" ng-include="''/views/' + $routeParams.slug + '.html''"></div>';
}
});
可能值得注意的是,这是 MEAN 堆栈上单页应用程序的一部分。我在 NodeJS 中设置了我的快速路由,如下所示:
app.get("*", function(req, res){ res.sendFile(__dirname + "/public/index.html"); });
事实证明,这个问题是因为我将所有文件请求路由到我的索引.html在我的 NodeJS 中。因此,当我尝试$http调用以检查.html视图是否存在时,它总是返回索引.html因此为 true。解决方案在 Node 中如下所示:
app.use(express.static(__dirname + "/public", { maxAge: 86400000 }));
app.get("/framework/*",function(req,res){ res.sendFile(__dirname + "/public" + req.path); });
app.get("/views/*",function(req,res){ res.sendFile(__dirname + "/public" + req.path); });
app.get("*", function(req, res){ res.sendFile(__dirname + "/public/index.html"); });
然后我可以在我的 Angular 路由中使用解析,如下所示:
$routeProvider.when("/projects/:slug", {
controller: "ProjectController",
resolve: {
check: ["$route", "$http", "$location", function($route, $http, $location){
return $http.get("/views/" + $route.current.params.slug + ".html").success(function(res){
return true;
}).error(function(res){
return $location.path("/");
});
}]
},
template: function($routeParams){
return '<div id="project" ng-include="''/views/' + $routeParams.slug + '.html''"></div>';
}
});
因此,此问题特定于单页应用程序设置。
您可以从 resolve 函数返回一个承诺。您的示例当前触发请求,然后返回undefined
。
我还没有测试以下内容,但它应该返回一个承诺。(当请求失败或响应上的 data
属性为假时,此承诺将失败。
$routeProvider.when("/project/:slug", {
controller: "ProjectController",
resolve: {
check: ["$route", "$http", "$q", function($route, $http, $q){
return $http.get("/views/" + $route.current.params.slug + ".html")
.then(function(res){
if (!res.data) {
return $q.reject('No data');
}
return $q.resolve('Found');
});
}];
},
template: function($routeParams){
return '<div id="project" ng-include="''/views/' + $routeParams.slug + '.html''"></div>';
}
});
对于承诺被拒绝的情况。(请求失败或没有数据)您可以订阅 $routeChangeError
事件来处理这种情况,并将浏览器定位到/
路由。
相关文章:
- AngularJS ng include dons'不起作用
- ng include导致角度问题
- AngularJS ng include won'不知什么原因不起作用
- 如何将动态文件名传递给ng-include
- 有没有办法在AngularJS中强制重新加载递归ng-include
- 使用ng-include渲染Angular模板时出现问题
- 每个ng-include模板都有单独的变量
- AngularJS:如何使用ng-include将javascript文件加载到部分中
- 阻止“ng include”创建孤立的作用域.AngularJS
- 如何扩展 Angularjs ng-include 指令
- 在 ng-include 中使用变量作为表达式
- ng-class 在 angularJs 中由 ng-include 包含的文件内不起作用
- 模块化与性能与性能与角度应用程序中的ng-include
- 未捕获的错误: [$injector:modulerr] - 角度 ng-include
- 使用ng-include调用控制器时AngularJS路由解析
- angular js中嵌套ng include内的表单
- 在AngularJS中动态切换ng include和ng控制器
- 使用ng-include重用以前实例化的模板
- 页面不可滚动,其中ng include=“”;函数()"-该代码已不再使用
- 如何在双大括号表示法{{}}中使用ng-include和html文件