简体   繁体   中英

Angular + Jade issue with express routing

I've encountered an issue with while working with Angular & Jade. Everything was working fine, routing in express was working (get & post). I noticed that when I added ng-app to the html or body tag in the jade template, post was not working anymore. Client side seems to be working, templates are loading, but once I try hitting the submit button the a form, post requests aren't being made, only gets. I even try to console log on the post in app.js and it doesn't seem to get there.

Not sure if it may even be related to the submit button just not making the submit request on the form because when I click it, nothing happens so possibly a binding issue? But if I remove the ng-app, everything starts working fine.

layout.jade

doctype html
html(ng-app='myApp')
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    meta(name='csrf-token', content=_csrf)
    title #{title} - Hackathon Starter
    link(rel='shortcut icon', href='/favicon.png')
    link(rel='stylesheet', href='/css/main.css')
  body
    include partials/header

    .container
      include partials/flash
      block content

    script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js')
    script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js')
    script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js')
    script(src='/js/lib/angular-route.min.js')
    script(src='/js/lib/angular-animate.min.js')
    script(src='/js/lib/angular-aria.min.js')
    script(src='/js/lib/angular-material.min.js')
    script(src='/js/lib/moment.js')
    script(src='/js/lib/angular-moment.min.js')
    script(src='/js/lib/angular-file-upload.min.js')
    script(src='/js/lib/jquery-2.2.0.min.js')
    script(src='/js/lib/bootstrap.min.js')
    script(src='/js/main.js')
    script(src='/js/bindings.js')

signup.jade

block content
  .page-header
    h3 Sign up
  form.form-horizontal(id='signup-form', method='POST')
    input(type='hidden', name='_csrf', value=_csrf)
    .form-group
      label.col-sm-3.control-label(for='email') Email
      .col-sm-7
        input.form-control(type='email', name='email', id='email', placeholder='Email', autofocus)
    .form-group
      label.col-sm-3.control-label(for='password') Password
      .col-sm-7
        input.form-control(type='password', name='password', id='password', placeholder='Password')
    .form-group
      label.col-sm-3.control-label(for='confirmPassword') Confirm Password
      .col-sm-7
        input.form-control(type='password', name='confirmPassword', id='confirmPassword', placeholder='Confirm Password')
    .form-group
      .col-sm-offset-3.col-sm-7
        button.btn.btn-success(type='submit')
          i.fa.fa-user-plus
          | Signup

app.js (part of it)

/**
 * Module dependencies.
 */
var express = require('express');
var compress = require('compression');
var session = require('express-session');
var bodyParser = require('body-parser');
var logger = require('morgan');
var errorHandler = require('errorhandler');
var lusca = require('lusca');
var busboy = require('connect-busboy');
var methodOverride = require('method-override');
var dotenv = require('dotenv');
var MongoStore = require('connect-mongo/es5')(session);
var flash = require('express-flash');
var path = require('path');
var fs = require('fs-extra');
var mongoose = require('mongoose');
var passport = require('passport');
var expressValidator = require('express-validator');
var sass = require('node-sass-middleware');
var multer = require('multer');
var upload = multer({ dest: path.join(__dirname, 'uploads') });

/**
 * Load environment variables from .env file, where API keys and passwords are configured.
 *
 * Default path: .env (You can remove the path argument entirely, after renaming `.env.example` to `.env`)
 */
dotenv.load({ path: '.env.example' });

/**
 * Controllers (route handlers).
 */
var homeController = require('./controllers/home');
var userController = require('./controllers/user');
var apiController = require('./controllers/api');
var contactController = require('./controllers/contact');
var picksController = require('./controllers/picks');


/**
 * API keys and Passport configuration.
 */
var passportConfig = require('./config/passport');

/**
 * Create Express server.
 */
var app = express();

/**
 * Connect to MongoDB.
 */
mongoose.connect(process.env.MONGODB || process.env.MONGOLAB_URI);
mongoose.connection.on('error', function() {
  console.log('MongoDB Connection Error. Please make sure that MongoDB is running.');
  process.exit(1);
});

/**
 * Express configuration.
 */
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(compress());
app.use(sass({
  src: path.join(__dirname, 'public'),
  dest: path.join(__dirname, 'public'),
  sourceMap: true
}));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(expressValidator());
app.use(busboy());
app.use(methodOverride());
app.use(session({
  resave: true,
  saveUninitialized: true,
  secret: process.env.SESSION_SECRET,
  store: new MongoStore({
    url: process.env.MONGODB || process.env.MONGOLAB_URI,
    autoReconnect: true
  })
}));
app.use(passport.initialize());
app.use(passport.session());

/**
 * Primary app routes.
 */
app.get('/', homeController.index);
app.get('/login', userController.getLogin);
app.post('/login', userController.postLogin);
app.get('/signup', userController.getSignup);
app.post('/signup', userController.postSignup);

Try ng-submit for angular. angular providedes you ng-submit option for forms submissions.
Edit also post your network stats from console. it will help

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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