如何使用Angular和Express 4.0渲染部分和玉文件?

时间:2015-08-10 20:31:10

标签: angularjs express pug partials

我在网上查了几个地方,但大部分是Express 2-3。我知道我需要在某处提供部分信息,但我不知道在何处或如何准确地将其映射出来。基本上,我的页面来自' /'到了游戏',我想要一个SPA,但是我在这个页面内渲染玉石模板时遇到了问题。我复制了一个测试页但是我一直在试图让它从/ views或/ partials中加载某些东西。由于我的页面变得棱角分明而不是索引,我不知道在哪里放置代码部分。在app.js?在game.js?在index.js?别的地方?我到底放了什么?

在layout.js

doctype html
html
  head
    title test title
     script(src='http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js')
    script(src='http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js')
    script(src='script.js')
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content
app.js中的

// catch-all route so non-explicitly defined routes load angular routes
app.get('*', function(req, res){
    res.render('home'); //
});

home.jade

extends layout
block content
  body(ng-app='RoutingApp')
    h2 AngularJS Routing Example
    p
      | Jump to the 
      a(href='#first') first
      |  or 
      a(href='#second') second page
    div(ng-view='')

的script.js

var app = angular.module('RoutingApp', ['ngRoute']);

app.config( ['$routeProvider', function($routeProvider) 
    {
    $routeProvider
        .when('/first', {
            // templateUrl: 'views/last' // THIS CRASHES THE PAGE
            // templateUrl: 'last' // so does this
            templateUrl: 'last.jade' // this doesn't, but serves up static file instead of rendering jade
        })
        .when('/second', {
            templateUrl: 'second.html'
        })
        .otherwise({
            redirectTo: '/'
        });
    }]);

1 个答案:

答案 0 :(得分:0)

路线已在/注册,因此您需要将href用作#/first& #/second

p
  | Jump to the 
  a(href='#/first') first
  |  or 
  a(href='#/second') second page