-2
我试图创建一个标记工具，用户可以通过网页应用程序手动标记未标记的呼叫中心请求。MEAN Stack未能实例化模块应用程序
该应用程序结构如下：
client
js
controllers
editTagController.js
editUntagController.js
tagnamesController.js
tagsController.js
untagsController.js
imports
jquery-3.1.1.js
app.js
views
index.html
edit-tags.html
view-tagnames.html
view-tags.html
view-untags.html
node_modules
body-parser
express
jquery
mongoose
tether
server
controllers
tagscontroller.js
models
tag.js
name.js
package.json
README.MD
server.js
我的错误消息是在下方。我目前在本地运行它，而我似乎无法修复它。我认为这与我的index.html文件中的导入顺序有关。
我认为这也可能与我定义的工厂有关，名为taggingApp。但是我不确定它是否仅仅是后一个错误或者是另一个错误。任何关于公约的帮助/建议都会有所帮助。
Failed to instantiate module taggingApp due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=n...)
at https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:6:412
at https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:40:222
at q (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:7:355)
at g (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:39:319)
at https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:39:488
at q (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:7:355)
at g (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:39:319)
at cb (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:43:336)
at c (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:20:390)
at Bc (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:21:179
这里是我的代码：
server.js
var express = require('express'),
app = express(),
bodyParser = require('body-parser'),
mongoose = require('mongoose'),
tagsController = require('./server/controllers/tagscontroller');
mongoose.connect('mongodb://localhost:27017/STDBank');
app.use(bodyParser());
app.get('/', function (req, res) {
res.sendfile(__dirname + '/client/views/index.html');
});
app.use('/js', express.static(__dirname + '/client/js'));
// app.get('/api', function (req, res) {
// res.sendfile(__dirname + '/client/views/index.html');
// });
//REST API
app.get('/api/tags', tagsController.list);
app.post('/api/tags/:id', tagsController.update);
app.get('/api/untags', tagsController.listUntags);
app.post('/api/untags/:id', tagsController.updateUntags);
app.get('/api/tagnames', tagsController.listName);
app.listen(3000, function() {
console.log('I\'m Listening...');
})
tagscontroller.js （服务器端）
var Tag = require('../models/tag');
var TagName = require('../models/name');
module.exports.list = function (req, res) {
Tag.find({}, function (err, results) {
console.log("RESULTS ARE: ",results);
var arr = [];
for(var i = 0; i<results.length;i++){
if(results[i].itag[0]){
arr.push({
_id : results[i]._id,
name : results[i].name,
itag : results[i].itag
});
console.log("enter if: ", results[i]);
}//end of if statement
else{
console.log("enter if: ", results[i].itag);
console.log("enters else statement ", arr);
}//end of else statement
}//end of for loop
console.log("results ",arr);
res.json(arr);
});
}
module.exports.update = function(req, res){
var arr = [];
//for(var k = 0;k<req.body.intentTag.length();k++){
// arr[k]= req.body.intentTag[k];
//}
console.log("Server side entered ", req.body.itag);
Tag.findByIdAndUpdate(req.params.id, {
$set: {
name: req.body.name,
itag: req.body.itag //arr
}
}, function (err, tag){
if(err) res.send(err);
res.json(tag);
});
}
module.exports.listUntags = function (req, res) {
Tag.find({}, function (err, results) {
var arr = [];
for(var i = 0; i<results.length;i++){
if(results[i].itag[0]){
//console.log("enter if: ", results[i].intentTag);
}//end of if statement
else{
//console.log("enter if: ", results[i].intentTag);
//console.log("enters else statement ", arr);
arr.push({
_id : results[i]._id,
name : results[i].name
});
}//end of else statement
}//end of for loop
//console.log("results ",arr);
res.json(arr);
});
}
module.exports.updateUntags = function(req, res){
var arr = [];
//for(var k = 0;k<req.body.intentTag.length();k++){
// arr[k]= req.body.intentTag[k];
//}
console.log("Server side entered ", req.body.itag);
Tag.findByIdAndUpdate(req.params.id, {
$set: {
name: req.body.name,
itag: req.body.itag //arr
}
}, function (err, tag){
if(err) res.send(err);
res.json(tag);
});
}
module.exports.listName = function(req, res){
TagName.find({}, function(err, results){
console.log("RESULTS: ", results);
res.json(results);
});
}
如果我们只是假设一个呼叫/标签，那么您需要知道标签模型的外观：
个tag.js
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var TagSchema = new Schema({
name: String,
itag: []// arr
}, {collection : "requests"});
module.exports = mongoose.model('Tag', TagSchema);
app.js
var app = angular.module("taggingApp", ["ngRoute","ngResource"]);
app.config(function($routeProvider) {
$routeProvider.when("/tags", {
templateUrl: "../views/view-tags.html",
controller: "tagsController"
})
.when("/tags/:index", {
templateUrl: "../views/edit-tags.html",
controller: "/controllers/editTagController"
})
.when("/untags", {
templateUrl: "../views/view-untags.html",
controller: "/controllers/untagsController"
})
.when("/untags/:index", {
templateUrl: "/views/edit-tags.html",
controller: "/controllers/editUntagController"
})
.when("/tagnames", {
templateUrl: "../views/view-tagnames.html",
controller: "/controllers/tagnamesController"
})
.otherwise({
redirectTo: "/tags"
});
});
由于我们之前的假设，我们可以看到，我们需要的tagsController和视图/视图tags.html文件
view-tags.html
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search Tag Details" data-ng-model="search" />
</div>
<table class="table table-striped table-hover">
<tbody>
<tr>
<th>Request</th>
<th>Tag Name</th>
</tr>
<tr data-ng-repeat="item in items | filter: search" data-ng-click="editItem($index)">
<td>{{item.name}}</td>
<td>{{item.tag}}</td>
</tr>
</tbody>
</table>
<div class="form-group">
<button data-ng-click="untaggedView()" class="btn btn-primary">Untagged View</button>
</div>
<div class="form-group">
<button data-ng-click="tagnamesView()" class="btn btn-primary">View Tagnames</button>
</div>
tagsController.js （客户端）
app.controller("tagsController", ["$scope", "$resource", "$location", "$routeParams", function($scope, $resource, $location, $routeParams) {
var Tag = $resource("/api/tags");
Tag.query(function(results){
$scope.items = results;
console.log("The items = ", items);
});
$scope.untaggedView = function() {
$location.path("/untags");
};
$scope.editItem = function(index) {
$location.path("/tags/" + index);
};
$scope.tagnamesView = function() {
$location.path("/tagnames");
};
}]);
然后最后的index.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
<script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap -->
<link data-require="[email protected]*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous" />
<!-- <script data-require="[email protected]*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="[email protected]*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> --> <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="[email protected]*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<script data-require="[email protected]*" data-semver="2.2.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.2.0.js"></script>
<script data-require="[email protected]*" data-semver="1.3.4" src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/cyborg/bootstrap.min.css" />
<script type="text/javascript" src="/js/app.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1> Tagging Tool</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div data-ng-view=""></div>
<p>{{search}}</p>
</div>
</div>
</div>
<script type="text/javascript" src="/js/controllers/tagsController.js"></script>
<!-- <script type="text/javascript" src="/js/controllers/untagsController.js"></script>
<script type="text/javascript" src="/js/controllers/editTagController.js"></script>
<script type="text/javascript" src="/js/controllers/editUntagController.js"></script>
<script type="text/javascript" src="/js/controllers/tagnamesController.js"></script> -->
</body>
</html>
任何任何帮助，将不胜感激
编辑：
我在下面添加了注释，但它似乎无法获得Angular。有关于此的任何想法？
NEW view-tags。HTML文件
<!DOCTYPE html>
<html ng-app="taggingApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
<script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<!--<script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>-->
<script src="cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.9/angular-resource.js"></script>
<link data-require="[email protected]*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous" />
<!-- <script data-require="[email protected]*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="[email protected]*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> -->
<!-- <script data-require="[email protected]*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script> -->
<script data-require="[email protected]*" data-semver="2.2.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.2.0.js"></script>
<script data-require="[email protected]*" data-semver="1.3.4" src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/cyborg/bootstrap.min.css" />
<script type="text/javascript" src="/js/app.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1> Tagging Tool</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div ng-view=""></div>
<p>{{search}}</p>
</div>
</div>
</div>
<script type="text/javascript" src="/js/controllers/tagsController.js"></script>
<!-- <script type="text/javascript" src="/js/controllers/untagsController.js"></script>
<script type="text/javascript" src="/js/controllers/editTagController.js"></script>
<script type="text/javascript" src="/js/controllers/editUntagController.js"></script>
<script type="text/javascript" src="/js/controllers/tagnamesController.js"></script> -->
</body>
</html>
These are the errors I have been getting when I updated my HTML file
编辑： 这是你的错误亚拉文：
NEWEST编辑：
编辑我ndex.html文件：
<!DOCTYPE html>
<html ng-app="taggingApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="//www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
<script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!--<script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.9/angular-resource.js"></script>
<link data-require="[email protected]*" data-semver="4.0.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous" />
<!-- <script data-require="[email protected]*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="[email protected]*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> -->
<!-- <script data-require="[email protected]*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script> -->
<script data-require="[email protected]*" data-semver="2.2.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.2.0.js"></script>
<script data-require="[email protected]*" data-semver="1.3.4" src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/cyborg/bootstrap.min.css" />
<script type="text/javascript" src="/js/app.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1> Tagging Tool</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div ng-view=""></div>
<p>{{search}}</p>
</div>
</div>
</div>
<script type="text/javascript" src="/js/controllers/tagsController.js"></script>
<!-- <script type="text/javascript" src="/js/controllers/untagsController.js"></script>
<script type="text/javascript" src="/js/controllers/editTagController.js"></script>
<script type="text/javascript" src="/js/controllers/editUntagController.js"></script>
<script type="text/javascript" src="/js/controllers/tagnamesController.js"></script> -->
</body>
</html>
我仍然收到[$ injector：modulerr]错误，但其他所有错误都已排除。
编辑：
我已经改变了我App.js的相对目录，使它们实际加载的控制器和视图。最重要的是，我已经将应用程序定义添加到每个控制器中。这解决我目前的错误，让我没有其他的错误，但是数据没有显示
嗨！在角度路由之前不想错过导入angular.js？ – deChristo