Javascript 角度布线不';当URL在浏览器中直接访问时不起作用,但在单击时起作用?
我有一个带有目录结构的angular应用程序Javascript 角度布线不';当URL在浏览器中直接访问时不起作用,但在单击时起作用?,javascript,node.js,angularjs,express,Javascript,Node.js,Angularjs,Express,我有一个带有目录结构的angular应用程序 app ..views ....partials ......main.jade ......foo.jade ....index.jade 路线定义如下: "严格使用", angular.module('myApp', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute', 'firebase', 'myApp.config' ]) .config(functi
app
..views
....partials
......main.jade
......foo.jade
....index.jade
路线定义如下:
"严格使用",
angular.module('myApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'firebase',
'myApp.config'
])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/partials/main',
controller: 'MainCtrl'
})
.when('/foo/:fooName', {
templateUrl: '/partials/foo',
controller: 'FooCtrl'
})
.otherwise({
redirectTo: '/'
});
});
我在服务器端使用express,相关代码为:
// server.js
app.configure('development', function(){
app.use(express.static(path.join(__dirname, '.tmp')));
app.use(express.static(path.join(__dirname, 'app')));
app.use(express.errorHandler());
});
app.configure('production', function(){
app.use(express.favicon(path.join(__dirname, 'public/favicon.ico')));
app.use(express.static(path.join(__dirname, 'public')));
});
app.get('/', routes.index);
app.get('/partials/:name', routes.partials);
//routes.js
exports.index = function(req, res){
res.render('index');
};
exports.partials = function(req, res){
var name = req.params.name;
res.render('partials/' + name);
};
主路径“/”
加载良好,当我单击“/foo/bar”
时,局部视图foo.jade
按预期加载。然而,当我尝试直接访问URL中的“/foo/bar”
时,我从Express中得到了404响应“cannot get/foo/bar”,这很有意义,因为Express中没有定义这样的路由。然而,我认为这就是定义角度路由器的全部要点。它应该拦截此请求并实际请求“/partials/foo”
。
我试着加上
//redirect all others to the index (HTML5 history)
app.get('*', routes.index);
但它并没有解决这个问题,甚至似乎捕获了对静态js资产的请求,并使用index.html
的内容进行响应,这是非常糟糕的。
我肯定我做错了什么。我如何修复这些问题,以便可以直接访问URL?路由之所以如此,是因为打开了HTML5模式。 注意这行:
$locationProvider.html5Mode(true)代码>
您需要了解,当您尝试直接访问“/foo/bar”
时,浏览器会向此URL发送HTTP GET请求。正如您所说,当您尝试通过单击链接访问此url时,Angular正在拦截此操作并调用History.pushState,该操作仅更新浏览器的链接
要使HTML5模式路由工作,您需要做的是实现url重写。每个请求都必须重定向到引导AngularJS应用程序的索引文件,但这需要在服务器上完成。Angular将自己呈现所需的页面
检查一下能做得很好的grunt任务
您也可以直接访问。但我尝试在服务器上使用:app.get('*',routes.index)执行此操作;那没用,我觉得你做不到。如果您使用的是express,则connect mod rewrite应易于使用。Express写在connect的上面,但这正是这里要做的:这是标准的角度参考。为什么它在这种情况下有效?