AngularJS+NodeJS路由-不工作

AngularJS + NodeJS Routing - Not working

本文关键字:工作 路由 AngularJS+NodeJS      更新时间:2023-09-26

我正在尝试使用MEAN堆栈制作一个基本的应用程序。

在过去的一个多小时里,我一直在努力让一条基本路线可行,但我失败得很惨。

每当我在//strong>上访问我的应用程序时,提供给Angular路由的模板将不会呈现该模板,即使我可以在浏览器中的templateUrl手动访问它。

这是我的代码:

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'));   
};

路由.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);
    });

布局。翡翠

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

指数。翡翠

extends ../includes/layout
block main-content
    h1 Hello World
    section.content
        div(ng-view)

main.翡翠

section.content
    h1 I should be rendered!

编辑

这是我的文件夹结构:

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

在您的角度代码中,您在哪里调用REST命令?看起来你只是在应用程序中导航到另一个页面,但你并没有告诉它从服务器上提取。