[英]Express and AngularJS routing
编辑:大家好,我的代码是正确的。 我不得不使用 $locationProvider 从 Url 中删除一个“#”。 这就是问题所在;)
我正在学习 MEAN 堆栈做一个简单的拍卖应用程序。 我在理解 express 和 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 和一个名为uction.js 的角度应用程序,我在其中执行角度路由,如下所示:
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 文件或控制器中所做的任何事情都没有发生。 这是应用程序的结构:
-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);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.