javascript - Express 和 AngularJS 路由

Question

编辑: 大家好，我的代码是正确的。我不得不使用 $locationProvider 从 Url 中删除“#”。这就是问题所在；)

我正在学习 MEAN 堆栈来做一个简单的拍卖应用程序。 我在理解快速路由和 Angular 路由如何协同工作时遇到了一些问题。

我的 Node 服务器正在提供这个文件 app.js

    var express = require('express');
    var path = require('path');
    var favicon = require('serve-favicon');
    var logger = require('morgan');
    var cookieParser = require('cookie-parser');
    var bodyParser = require('body-parser');
    var routes = require('./routes');

    var mongoose = require('mongoose');

    var app = express();

    mongoose.connect('localhost:27017/auction');

    // view engine setup
    app.set('views', path.join(__dirname, '/views'));
    app.set('view engine', 'jade');

    app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
    app.use(logger('dev'));
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(cookieParser());
    app.use(express.static(path.join(__dirname, 'public')));

    app.get('/partials/:filename', routes.partials);

    app.use(routes.index);

我有一个普通的 index.jade 和一个名为 auction.js 的 Angular 应用程序，我在其中执行 Angular 路由，如下所示:

    var app = angular.module('auction', [ 'ngRoute','HomeCtrl','NewAuctionCtrl', 'FollowingAuctionsCtrl','MyAuctionsCtrl']);


    app.config(function ($routeProvider){

    $routeProvider
       .when('/myauctions', {
          templateUrl: 'partials/myauctions.jade',
          controller: 'MyAuctionsController'
      })
       .when('/followingauctions', {
           templateUrl: 'partials/followingauctions.jade',
           controller: 'FollowingAuctionsController'
      })
       .when('/users', {
          templateUrl: 'partials/users.jade',
          controller: 'UsersController'
      })
       .when('/newauction', {
          templateUrl: 'partials/newauction.jade',
          controller: 'NewAuctionController'
      })
       .otherwise({redirectTo:'/'});

});

我没有任何控制台错误，服务器加载 index.jade，但是当我在导航栏中导航时，我在其他 jade 文件或 Controller 中所做的任何事情都没有发生。这是应用程序的结构:

   -bin(server)
   -models(for mongoose)
   -public
       -images
       -javascripts
          -auction.js
          -controllers
          -services
       -stylesheets
  -routes
       -index.js
  -views
       -partials
         -the other jade files
       -index.jade
  -app.js

这是 index.jade 文件(只有导航栏部分)

    #auction-navbar
  nav.navbar.navbar-default
    .container-fluid
      // Brand and toggle get grouped for better mobile display
      .navbar-header
        button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-1', aria-expanded='false')
          span.sr-only Toggle navigation
            span.icon-bar
            span.icon-bar
            span.icon-bar
      // Collect the nav links, forms, and other content for toggling
      #bs-example-navbar-collapse-1.collapse.navbar-collapse
        ul.nav.navbar-nav
          li
            a(href='/')
              | Dashboard
          li
            a(href='/myauctions')
              | My auctions
          li
            a(href='/followingauctions')
              | Following Auctions
          li
            a.btn.btn-primary(href='/newauction')
              | New Auction



  #content(ng-view)

这是index.js文件

     exports.index = function(req, res){
         res.render('index');
    };

     exports.partials = function (req, res) {
         var filename= req.params.filename;
         if(!filename) return;
         res.render('partials/' + filename);
    };

Answer 1

试试这个链接

Setting Up MEAN Stack Application

Router in ExpressJS