AngularJS路由在html5mode错误
这里是我的前端AngularJS路由:
$urlRouterProvider.otherwise('/'); $locationProvider.html5Mode(true).hashPrefix('!'); $stateProvider .state('main', { url: '/', templateUrl: '/views/main.html', controller: 'MainCtrl' }) .state('review', { url: '/review', templateUrl: '/views/review.html', controller: 'NewReviewCtrl' }) .state('model', { url: '/:make/:model', templateUrl: '/views/model.html', controller: 'ModelPageCtrl' });
这里是我的服务器端路由(node.js):
//...some routes app.use('/*', function(req, res){ res.sendFile(config.rootPath + '/public/index.html'); });
使用/review
路线,一切工作正常,但不与/:make/:model
:
HTML:
<a href="" ui-sref="model({make: 'lenovo', model: 'thinkpad-t430'})">See more details...</a>
如果我通过该链接去到这个页面,一切正常,但如果我刷新或直接进入localhost:3030/lenovo/thinkpad-t430
我得到这个错误:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app to: Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
这可能是因为html5mode
。 我build议不使用这个URL,因为它是一个2级的URL。
我怎样才能解决这个问题?
编辑:Express.jsconfiguration:
app.set('view engine', 'ejs'); app.use(function (req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); next(); }); app.use(bodyParser()); app.use(session({secret:"some_secret"})); app.use(passport.initialize()); app.use(passport.session()); app.use(express.static(config.rootPath+"/public"));
我创build了工作plunker ,它使用相同的UI-Router设置,如上所述。 一切正在工作。 所以,现在我们应该知道,客户端应该设置得当。
主要和唯一的区别是,更明确的设置,这使得我们可以在头部省略<base href="/" />
$locationProvider .html5Mode( { enabled: true, requireBase: false, })
或者我们可以使用<base>
元素(检查index.html <head>
)int那个plunker
似乎问题是在服务器端,请检查两次: