简体   繁体   中英

AngularJS + NodeJS Routing - Not working

I am trying to make a basic application using the MEAN Stack.

I have been struggling for the past hour or so to make a basic route work, but I fail miserably.

Whenever I access my application on / the template provided to the Angular route will not render the template, even if I can manually access it at templateUrl in the browser.

This is my code:

express.js

var express = require('express'),
    bodyParser = require('body-parser'),
    session = require('express-session'),
    logger = require('morgan'),
    cookieParser = require('cookie-parser');

module.exports = function(app, config){
    app.set('views', config.rootPath + '/server/views');
    app.set('view engine', 'jade');

    app.use(logger('dev'));

    app.use(cookieParser());

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({
        extended: true
    }));

    app.use(session({secret: 'contact demo'}));

    app.use(express.static(config.rootPath + '/public'));   
};

routes.js

var mongoose = require('mongoose'),
    Contact = mongoose.model('Contact');

module.exports = function(app, router) {

    router.get('/partials/*', function(req, res) {
        res.render('../../public/app/' + req.params[0]);
    });

    router.get('*', function(req, res) {
        res.render('index');
    });

    app.use('/', router);
};

server.js

// Module Dependencies
var express = require('express'),
    mongoose = require('mongoose');

// Initialize Express Application
var app = express(),
    env = process.env.NODE_ENV = process.env.NODE_ENV || 'development';

// Config Parameters
var config = require('./server/config/config')[env];

// Invoke Express Config File
require('./server/config/express')(app, config);

// Invoke Mongoose Config File
require('./server/config/mongoose')(config);

// Invoke Routes File
require('./server/config/routes')(app, express.Router());

app.listen(config.port);
console.log('Listening on port ' + config.port + '...');

app.js

angular.module('demo', ['ngResource', 'ngRoute'])
    .config(function($routeProvider, $locationProvider) {

        $routeProvider
            .when('/', {templateUrl: '/partials/main/main'});

        $locationProvider.html5Mode(true);
    });

layout.jade

doctype
html
    head
        title Contact Management Application
        link(rel="stylesheet" href="/vendor/bootstrap/dist/css/bootstrap.min.css")
        link(rel="stylesheet" href="/css/style.css")
    body(ng-app="demo")
        block main-content
        include scripts

index.jade

extends ../includes/layout

block main-content
    h1 Hello World

    section.content
        div(ng-view)

main.jade

section.content
    h1 I should be rendered!

EDIT

This is my folder structure:

--public/
  --app/
    --main/
      --main.jade
    --app.js
  --css/
  --vendor/

--server/
  --config/
    --express.js
    --routes.js
  --includes/
    --layout.jade
    --scripts.jade
  --views/
    --index.jade
--server.js

Where are you calling the REST commands in your angular code? It seems like you're just navigating to a different page within the app but you aren't telling it to pull from the server.

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