jeudi 24 novembre 2016

MEAN Stack failed to instantiate module app

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://ift.tt/2fJrZAJ...)
    at http://ift.tt/2fVWMgM
    at http://ift.tt/2fJnRAK
    at q (http://ift.tt/2fW2QFW)
    at g (http://ift.tt/2fJnupT)
    at http://ift.tt/2fVZNh4
    at q (http://ift.tt/2fW2QFW)
    at g (http://ift.tt/2fJnupT)
    at cb (http://ift.tt/2fJs1bP)
    at c (http://ift.tt/2fVZjYh)
    at Bc (http://ift.tt/2fJoCtr

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></td>
      <td></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="http://ift.tt/290frSy"></script><!-- Tether for Bootstrap -->
    <script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
    <script src="http://ift.tt/2fVQMo2"></script><!-- Bootstrap -->
    <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="http://ift.tt/2ekKUla" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous" />
 <!--   <script data-require="jquery@*" data-semver="3.0.0" src="http://ift.tt/28Ay9tC"></script>
    <script data-require="bootstrap@*" data-semver="4.0.5" src="http://ift.tt/2e82MEK"></script> -->    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="http://ift.tt/2fVRIc7"></script>
    <script data-require="angular-route@*" data-semver="1.5.8" src="http://ift.tt/2fJtrmM"></script>
    <script data-require="ui-bootstrap@*" data-semver="2.2.0" src="http://ift.tt/2fVW4Qk"></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="http://ift.tt/2fJqBOJ" />
    <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></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




Aucun commentaire:

Enregistrer un commentaire