MEAN Stack failed to instantiate module app - html

Question

I am trying to create a tagging tool where a user can manually tag untagged call centre requests by means of a web page application.
The app structure is as follows:
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
My error message is at the below. I am currently running it locally and I can't seem to fix it at all. I think it has something to do with my order of imports in my index.html file.
I think it could also be something to do with the factory that I am defining named taggingApp. However I am not sure if it is just this latter error or another error with it. Any help/advice on conventions would be helpful.
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
Here is my code:
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 (Server Side)
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);
});
}
If we are only assuming a call to /tags then you will need to know what the Tag model looks like:
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"
});
});
Due to our previous assumption we can see that we need the tagsController and the view/view-tags.html files
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 (Client Side)
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");
};
}]);
And then Lastly 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="bootstrap#*" 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="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="bootstrap#*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> --> <script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="angular-route#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<script data-require="ui-bootstrap#*" 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="tether#*" 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>
Any Help whatsoever would be greatly appreciated
EDIT:
I have added the comments in below however it seems that it cannot get that Angular. Any ideas on that?
NEW view-tags.html file
<!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="angularjs#1.5.8" 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="bootstrap#*" 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="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="bootstrap#*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> -->
<!-- <script data-require="angular-route#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script> -->
<script data-require="ui-bootstrap#*" 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="tether#*" 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
EDIT:
Here is your error Aravind:
#Aravind
NEWEST EDIT:
edited index.html file:
<!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="angularjs#1.5.8" 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="bootstrap#*" 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="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="bootstrap#*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> -->
<!-- <script data-require="angular-route#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script> -->
<script data-require="ui-bootstrap#*" 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="tether#*" 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>
I am still receiving the [$injector:modulerr] error however the others are all sorted out.
EDIT:
I have changed the relative directories of my App.js so that they actually load the controllers and views. On top of that I have added an app definition into every controller. This fixes my current errors, gives me no other errors however the data is not displaying

Answer 1

Include angular scripts in the index.html and your reference for the ngResource is missing
Use
//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
//cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.9/angular-resource.js
Update :
Replace this line
"cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.9/angular-resource.js"
with this
"//cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.9/angular-resource.js"
Reason : you missed //
if // is not there it will be searching in your localhost.
adding // will be searching in the internet http or https is not mentioned because // refers to your current protocol and makes request correspondingly