用Angular，Express和Jade刷新特定的页面（使用html5mode） [英] Refresh specific page with Angular, Express and Jade (using html5mode)

问题描述

Index.jade

p>

 扩展布局/默认
 
块内容
部分（data-ng-view）
脚本（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 / images / core / view / core.footer.view.htmldata-role =navigation）
 div（data-ng-include ='static / '，data-role =navigation）
 include ../includes/foot 
  

服务器路由

  // Camera Routes 
 app.get（'/ api /相机'，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

  / ** 
 *模块依赖关系。 
 * / 
 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）; 
 
 //优化HTML 
 app.locals.pretty = true; 
 
 //应该放在express.static之前
 app.use（express.compress（{
 filter：function（req，res））{
 return（/ json | text | javascript | css /）。test（res.getHeader（'Content-Type'））; 
}，
级别：9 
}））; 
 
 //设置fav图标和静态文件夹
 app.use（express.favicon（））; 
 app.use（'/ static'，express.static（config.root +'/ public'））; 
 
 //不要使用logger进行测试env 
 if（process.env.NODE_ENV！=='test'）{
 app.use（express.logger（' dev的'））; 
} 
 
 //设置视图路径，模板引擎和默认布局
 app.set（'views'，config.root +'/ app / views'）; 
 app.set（'view engine'，'jade'）; 
 
 //启用jsonp 
 app.enable（jsonp callback）; 
 
 app.configure（function（）{
 // cookieParser应该在会话上方
 app.use（express.cookieParser（））; 
 
 //请求身体解析中间件应该高于methodOverride 
 app.use（express.urlencoded（））; 
 app.use（express.json（））; 
 app.use（express。 methodOverride（））; 
 
 // express / mongo会话存储
 app.use（express.session（{secret：'$ uper $ ecret $ e $$ ionKey'}））; 
 
 //连接Flash的Flash消息
 app.use（flash（））; 
 
 //动态帮助
 app.use（helpers config.app.name））; 
 
 //使用护照会话
 app.use（passport.initialize（））; 
 app.use（passport.session（）） ; 
 
 //路由应该是最后一个
 app.use（app.router）; 
 //假设错误中没有找到msgs是一个404.这个有点傻，但有效，你可以做任何你喜欢的，设置p使用instanceof等
 
 app.all（'/ *'，function（req，res，next）{
 res.render（'index.jade'，{'root' ：'app / views /'}）; 
}）; 
 
 app.use（function（err，req，res，next）{
 //对待as $ $ $ $ $ $ $ $ $ $ $ $ $ $ ）return next（）; 
 
 //记录它
 console.error（err.stack）; 
 
 //错误页
 res.status （500）.render（'500'，{
 error：err.stack 
}）; 
}）; 
 
 //假设404，因为没有中间件响应
 app.use（function（req，res，next）{
 res.status（404）.render（'404' {
 url：req.originalUrl，
 error：'Not found'
}）; 
}）; 
}）; 
}; 
  

HTML5 ENABLE

设置HTML5位置模式
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 =MapControllerdata-ng-init =find（）> 
< div ui-view> 
< / div> 
< div class =map-contentng-class ={'map-content-left'：cameraOpen！= undefined}> 
< leaflet defaults =defaultscenter =centerclass =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：最新，
角度资源：最新 b $ bangular-cookies：最新，
角溜溜球：最新，
angular-ui-utils：0.0.4，
 angle-translate：〜2.5.2，
angular-translate-loader-static-files：〜2.5.2，
ngDialog：〜0.3.7 
角形单张指令：〜0.7.10，
leaflet.markercluster：〜0.4.0，
角加载条：〜 0.6.0，
angular-ui-router：〜0.2.13
  

我正在使用Mean-Stack-Relacional： https://github.com/jpotts18/mean-stack-关系

编辑2

我正在使用角度路线，所以我更改为ui-router查看问题是否olved。

编辑3

客户端路由核心

  //设置路由
 angular.module（'mean'）。config（['$ stateProvider'，'$ urlRouterProvider'，
函数（$ 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帮助我找到这个问题： p>

对于任何可能使用Jade的人来说，这是一个快速的查询： div（ui-view）编译为< div ui-view =ui-view>< / div>。您需要的是 div（ui-view =）。

所以，你可以在里面有 ui-view ng-include ，但需要做这个技巧

字体： https://github.com/angular-ui/ui-router/issues/679

I'm trying to refresh a page and execute client route to open a template inside 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

Server route

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

Client router here, I want to show this template inside ng-view

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

]);

Index view with ui-view tag

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

My html head

head
  base(href='/')

What I want? When insert this url manually: localhost:3000/cameras/12, call server and get index to call client route and open the template inside ng-view

What's the problem? When I insert this url in browser, I get the index.jade with download mode

What I already tried?

Change the server route to this (apparently this return rendered index)

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

But the client route is never called

What's wrong?

EDIT 1

My dependencies version

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

I'm using Mean-Stack-Relacional from here: https://github.com/jpotts18/mean-stack-relational

EDIT 2

I was using angular-route, so I changed to ui-router to see if the problem was solved.

EDIT 3

Client Route core

//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 help me to find this issue:

For anybody who might be using Jade, here's a quick gotcha: div(ui-view) compiles to <div ui-view="ui-view"></div>. What you need is div(ui-view="").

So, you can have ui-view inside ng-include, but need do this trick

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

这篇关于用Angular，Express和Jade刷新特定的页面（使用html5mode）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！