ng-click不起作用，mysql中没有数据发布

我一直在尝试通过Shiva Adhikari的教程“AngularJs，Node js，Express js，Bootstrap，EJS，MySQL的CRUD应用程序”学习，当时我意识到自己被困在教程的第5部分。

我的问题

在提交表单以创build产品类别时，浏览器控制台不执行任何操作。 我是新来的，谢谢你的帮助。

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> &nbsp;&nbsp; <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>&nbsp;</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>&nbsp;</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'); } }; } 

Answer 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> 

Plunker