繁体   English   中英

Express 和 AngularJS 路由

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM