Aggiorna pagina specifica con Angular, Express e Jade (utilizzando html5mode)

Sto cercando di aggiornare una pagina ed eseguire il percorso client per aprire un modello all’interno di 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 

Percorso del server

 // 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("!"); } ]); 

Qui il router client , voglio mostrare questo modello all’interno di ng-view

 angular.module('mean').config(['$stateProvider', function ($stateProvider) { $stateProvider. state('viewCamera', { url: "/cameras/:cameraId", templateUrl: 'static/modules/cameras/views/cameras.camera.view.html' }); } 

]);

Vista indice con tag vista ui

 

La mia testa html

 head base(href='/') 

Quello che voglio? Quando inserisci questo URL manualmente: localhost: 3000 / telecamere / 12, chiama il server e ottieni l’indice per chiamare il percorso client e apre il modello all’interno di ng-view

Qual è il problema? Quando inserisco questo URL nel browser, ottengo index.jade con la modalità download

Cosa ho già provato?

Cambia il percorso del server a questo (apparentemente questo indice reso restituito)

  // Home route app.get('*', index.render); 

Ma la route del client non viene mai chiamata

Cosa c’è che non va?

MODIFICA 1

La mia versione delle dipendenze

 "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" 

Sto usando Mean-Stack-Relacional da qui: https://github.com/jpotts18/mean-stack-relational

MODIFICA 2

Stavo usando la rotta angular, quindi ho cambiato con ui-router per vedere se il problema è stato risolto.

MODIFICA 3

Nucleo del percorso del cliente

 //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 aiutami a trovare questo problema:

Per tutti quelli che potrebbero usare Jade, ecco un rapido trucco: div(ui-view) compila su

. Quello di cui hai bisogno è div(ui-view="").

Quindi, puoi avere ui-view all’interno di ng-include , ma devi fare questo trucco

Carattere: https://github.com/angular-ui/ui-router/issues/679

Stai utilizzando percorsi HTML5 con un fallback di hashbang. Ciò significa che vuoi impostare il tuo server in modo che le richieste a /cameras/12 reindirizzino a /#!/cameras/12 . Il server eseguirà il rendering della tua applicazione Angular, che rileverà che vuole andare al tuo stato viewCamera e riscriverà l’url sul client.

Puoi farlo aggiungendo il seguente middleware alla tua app express:

 app.use(function (req, res, next) { res.set('Location', '/#!' + req.path) .status(301) .send(); });