简体   繁体   中英

How do I render partials and jade files with Angular and Express 4.0?

I looked online a few places, but most of it was for Express 2-3. I know I need to put information about partials somewhere, but I don't know where or how exactly to map it out. Basically, my page goes from '/' to '/game', where I want to have a SPA, but I'm having issues rendering jade templates inside this page. I copied a test page but I keep causing crashes attempting to get it to load something from either /views or /partials. Since my page becomes angular-heavy not on index, I didn't understand where to put the code about partials. In app.js? in game.js? In index.js? Somewhere else? And what exactly do I put?

in 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

in 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: '/'
        });
    }]);

Route has registered with / , so you need to use href as #/first & #/second

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM