我一直在尝试通过教程＆＃34; CRUD应用程序学习AngularJs，Node js，express js，Bootstrap，EJS，MySQL＆＃34;当Shiva Adhikari意识到我被困在教程的第5部分时。
我的问题
在提交表单以创建产品类别时，浏览器控制台不执行任何操作。我很新，感谢您的帮助。
app.js
// Module Dependencies ============================================================================
var express = require('express'); // call express
var app = express(); // define our app using express
var routes = require('./routes');
var http = require('http');
var path = require('path');
//var methodOverride = require('method-override'); // simulate DELETE and PUT (express4)
var bodyParser = require('body-parser');
var mysql = require("mysql");
//var favicon = require('serve-favicon');
//var morgan = require('morgan'); // log requests to console
// Environment =================================================================================
app.set('port', process.env.PORT || 3000);
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(__dirname + '/public'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.get('/', routes.index);
app.get('/about', routes.about);
app.get('/contact', routes.contact);
//app.get('/fileUploader', routes.fileUploader);
var productCategoryRoute = require('./routes/productCategoryRouteConfig.js');
//var productRoute = require('./routes/productRouteConfig.js');
new productCategoryRoute(app);
//new productRoute(app);
http.createServer(app).listen(app.get('port'), function () {
console.log('Express server listening on port ' + app.get('port'));
});
createProductCategory.ejs
<% include index %>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"> <%=title %> </h3>
</div>
<div class="panel-body">
<div class="container"
data-ng-cloak
data-ng-app="productCategoryModule"
data-ng-controller="productCategoryController">
<form
class="navbar-form navbar-left" role= "search"
method = "POST"
name = "formProductCategory"
>
<div class="row">
<div class="form-group">
<label for="productCategory"> Product Category Name </label>
<input type="text"
class="form-control"
placeholder="Please Enter Product Category"
name="productCategory"
id="productCategory"
ng-model="productCategory.categoryName"
style="width:100%"
required>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label for="productDetails"> Product Category Details </label>
<textarea
class="form-control"
placeholder="Product Category Details"
name="productDetails"
id="productDetails"
rows="5"
cols="30"
ng-model="productDetails.categoryDetails"
style="width:100%"
required></textarea>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group"> <style="padding-left:40%">
<button type="button"> <class="btn btn-primary">
<ng-click="createProductCategory(productCategory)">Create Product Category</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="../../javascripts/app/productCategory/productCategoryModule.js"></script>
<script src="../../javascripts/app/productCategory/productCategoryService.js"></script>
<script src="../../javascripts/app/productCategory/productCategoryController.js"></script>
productCategoryRouteConfig
function productCategoryRouteConfig(app) {
this.app = app;
this.routeTable = [];
this.init();
}
// two types of functions add and process, get
productCategoryRouteConfig.prototype.init = function () {
var self = this;
this.addRoutes();
this.processRoutes();
};
// 1- process routes , depending on get, post, or delete
productCategoryRouteConfig.prototype.processRoutes = function () {
var self = this;
self.routeTable.forEach(function (route) {
if (route.requestType == 'get') {
console.log(route);
self.app.get(route.requestUrl, route.callbackFunction);}
else if (route.requestType == 'post') {
console.log(route);
self.app.post(route.requestUrl, route.callbackFunction);}
else if (route.requestType == 'delete') {
console.log(route);
self.app.delete(route.requestUrl, route.callbackFunction);}
});
};
// 2- add routes below,
productCategoryRouteConfig.prototype.addRoutes = function () {
var self = this;
//3 - createProductCategory, get req
self.routeTable.push({
requestType : 'get',
requestUrl : '/createProductCategory',
callbackFunction : function (request, response) {
response.render('createProductCategory', { title : "Create Product Category" });
}
});
//4 - createProductCategory, get req
self.routeTable.push({
requestType : 'post',
//in vid he has no api here
requestUrl : '/createProductCategory',
callbackFunction : function (request, response) {
var productCategoryDao = require('../server/Dao/productCategoryDao.js');
console.log(request.body)
productCategoryDao.productCategoryDao.createProductCategory(request.body,
function (status) {
response.json(status);
console.log(status);
});
}
});
// 5- add routes, /viewProductCategory, get req
self.routeTable.push({
requestType : 'get',
requestUrl : '/viewProductCategory',
callbackFunction : function (request, response) {
response.render('viewProductCategory', { title : "View Product Category" });
}
});
// 6
self.routeTable.push({
requestType : 'get',
requestUrl : '/getAllProductCategory',
callbackFunction : function (request, response) {
var productCategoryDao = require('../Server/Dao/productCategoryDao.js');
productCategoryDao.productCategoryDao.getAllProductCategory (
function (productCategories) {
console.log(productCategories);
response.json({ productCategories : productCategories });
});
}
});
};
module.exports = productCategoryRouteConfig;
productCategoryController.js
//refer to the parent module
angular.module("productCategoryModule")
.controller("productCategoryController", productCategoryController);
//dependency injection, a timeout service, inject the service we need productCategoryService
productCategoryController.$inject = ['$scope', '$timeout','productCategoryService'];
//constructor
function productCategoryController($scope, productCategoryService) {
//define it as object, and it will have two properties
$scope.productCategory = {
categoryName: "",
categoryDetails :""
};
$scope.createProductCategory = function(productCategory) {
//the ervice has a metod called createProductCategory which we give the product category
productCategoryService.createProductCategory(productCategory)
.success(function(data){
// $timeout(function() {}, 3000)
});
}
}
productCategoryService.js
//use same module, but make a factory, module hands data to the service
angular.module("productCategoryModule")
.factory("productCategoryService", productCategoryService);
//dependency injection, uses http, ajax service
productCategoryService.$inject = ['$http'];
function productCategoryService($http) {
return {
//our services, first a method to take the categories from the controller
//the services does things with the data from the controller
createProductCategory: function(productCategory) {
//post to this route /createProductCategory, here is the gate request
return $http.post('/createProductCategory',
//the data we are posting to the url
{
categoryName: productCategoryName,
categoryDetails: productCategory.categoryDetails
}
);
},
//angular $http route endpoint
getAllProductCategories: function() {
return $http.get('/getAllProductCategory');
}
};
}
答案 0 :(得分：1)
您有以下代码，其中包含无效的HTML
<div class="row">
<div class="form-group">
<style="padding-left:40%">
<button type="button"> <class="btn btn-primary">
<ng-click="createProductCategory(productCategory)">Create Product Category</button>
</div>
</div>
应该是这样的
<div class="row">
<div class="form-group" style="padding-left:40%">
<button type="button" class="btn btn-primary" ng-click="createProductCategory(productCategory)">Create Product Category</button>
</div>
</div>