用Angular,Express和Jade刷新特定页面(使用html5mode)
我试图刷新一个页面,并执行客户端路由在ng-view中打开一个模板
Index.jade
extends layouts/default block content section(data-ng-view) script(type="text/javascript"). window.user = !{user};
default.jade
doctype html html(lang='en', xmlns='http://www.w3.org/1999/xhtml', xmlns:fb='https://www.facebook.com/2008/fbml', itemscope='itemscope', itemtype='http://schema.org/Product') include ../includes/head body div(data-ng-include="'static/modules/core/views/core.header.view.html'", data-role="navigation") div(data-ng-include="'static/modules/core/views/core.index.view.html'", data-role="navigation") div(data-ng-include="'static/modules/core/views/core.menu.view.html'", data-role="navigation") div(data-ng-include="'static/modules/core/views/core.footer.view.html'", data-role="navigation") include ../includes/foot
服务器路由
// Camera Routes app.get('/api/cameras', cameras.all); app.post('/api/cameras', auth.requiresLogin, cameras.create); app.get('/api/cameras/:cameraId', cameras.show); app.put('/api/cameras/:cameraId', auth.requiresLogin, auth.article.hasAuthorization, cameras.update); app.del('/api/cameras/:cameraId', auth.requiresLogin, auth.article.hasAuthorization, cameras.destroy); app.param('cameraId', cameras.camera); // Home route app.get('/', index.render);
express.js
/** * Module dependencies. */ var express = require('express'); var flash = require('connect-flash'); var helpers = require('view-helpers'); var config = require('./config'); module.exports = function(app, passport) { console.log('Initializing Express'); app.set('showStackError', true); //Prettify HTML app.locals.pretty = true; //Should be placed before express.static app.use(express.compress({ filter: function(req, res) { return (/json|text|javascript|css/).test(res.getHeader('Content-Type')); }, level: 9 })); //Setting the fav icon and static folder app.use(express.favicon()); app.use('/static',express.static(config.root + '/public')); //Don't use logger for test env if (process.env.NODE_ENV !== 'test') { app.use(express.logger('dev')); } //Set views path, template engine and default layout app.set('views', config.root + '/app/views'); app.set('view engine', 'jade'); //Enable jsonp app.enable("jsonp callback"); app.configure(function() { //cookieParser should be above session app.use(express.cookieParser()); // request body parsing middleware should be above methodOverride app.use(express.urlencoded()); app.use(express.json()); app.use(express.methodOverride()); //express/mongo session storage app.use(express.session({ secret: '$uper$ecret$e$$ionKey'})); //connect flash for flash messages app.use(flash()); //dynamic helpers app.use(helpers(config.app.name)); //use passport session app.use(passport.initialize()); app.use(passport.session()); //routes should be at the last app.use(app.router); //Assume "not found" in the error msgs is a 404. this is somewhat silly, but valid, you can do whatever you like, set properties, use instanceof etc. app.all('/*', function(req, res, next) { res.render('index.jade', {'root': 'app/views/'}); }); app.use(function(err, req, res, next) { //Treat as 404 if (~err.message.indexOf('not found')) return next(); //Log it console.error(err.stack); //Error page res.status(500).render('500', { error: err.stack }); }); //Assume 404 since no middleware responded app.use(function(req, res, next) { res.status(404).render('404', { url: req.originalUrl, error: 'Not found' }); }); }); };
HTML5 ENABLE
//Setting HTML5 Location Mode angular.module('mean').config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode(true); $locationProvider.hashPrefix("!"); } ]);
这里的客户端路由器 ,我想在ng-view里面显示这个模板
angular.module('mean').config(['$stateProvider', function ($stateProvider) { $stateProvider. state('viewCamera', { url: "/cameras/:cameraId", templateUrl: 'static/modules/cameras/views/cameras.camera.view.html' }); }
]);
带有ui-view标签的索引视图
<section data-ng-controller="MapController" data-ng-init="find()"> <div ui-view> </div> <div class="map-content" ng-class="{'map-content-left': cameraOpen != undefined}"> <leaflet defaults="defaults" center="center" class="map"></leaflet> </div> </section>
我的HTML头
head base(href='/')
我想要的是? 当手动插入这个URL:localhost:3000 / cameras / 12时,调用服务器并获取索引来调用客户端路由并在ng-view中打开模板
有什么问题? 当我在浏览器中插入这个URL时,我用下载模式得到了index.jade
我已经尝试过了吗?
更改服务器的路线(这显然是这个返回呈现的索引)
// Home route app.get('*', index.render);
但客户端路由永远不会被调用
怎么了?
编辑1
我的依赖版本
"angular": "latest", "angular-resource": "latest", "angular-cookies": "latest", "angular-mocks": "latest", "angular-ui-utils": "0.0.4", "angular-translate": "~2.5.2", "angular-translate-loader-static-files": "~2.5.2", "ngDialog": "~0.3.7", "angular-leaflet-directive": "~0.7.10", "leaflet.markercluster": "~0.4.0", "angular-loading-bar": "~0.6.0", "angular-ui-router": "~0.2.13"
我从这里使用Mean-Stack-Relacional: https : //github.com/jpotts18/mean-stack-relational
编辑2
我正在使用angular度路由,所以我改成了UI路由器,看看问题是否解决了。
编辑3
客户端路由核心
//Setting up route angular.module('mean').config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/"); $stateProvider. state('login', { url: '/login', template: '', controller: 'SessionController', data: { method: "login" } }) .state('signin', { url: '/signin', template: '', controller: 'SessionController', data: { method: "signin" } }) .state('home', { url: '/', resolve: { resetMap: function ($q, $location, $rootScope) { $rootScope.$emit('rootScope:emit', ''); } } }); } ]);
@Scymex帮我find这个问题:
对于任何可能使用Jade的人,这里有一个快速的窍门: div(ui-view)
编译为<div ui-view="ui-view"></div>.
你需要的是div(ui-view="").
所以,你可以在ng-include
里面使用ui-view
,但是需要这样做
字体: https : //github.com/angular-ui/ui-router/issues/679
您正在使用带有hashbang后备的HTML5路由。 这意味着你想设置你的服务器,以便请求/cameras/12
redirect到/#!/cameras/12
。 然后,服务器将呈现您的Angular应用程序,它将检测到它想要进入viewCamera
状态,并将重写客户端上的URL。
您只需将以下中间件添加到快速应用程序即可完成此操作:
app.use(function (req, res, next) { res.set('Location', '/#!' + req.path) .status(301) .send(); });