Express和Angular路由

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

我正在学习一个简单的拍卖应用程序的平均堆栈。 我有一些问题了解如何expression和angular度路由一起工作。

我的节点服务器,正在服务这个文件,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,但是当我在我的导航栏中导航,没有任何反应,我在其他玉文件或与控制器。 这是应用程序的结构:

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

试试这个链接

设置MEAN堆栈应用程序

路由器在ExpressJS