MEAN Stack无法实例化模块应用程序

时间：2016-11-24 16:24:32

标签： html angularjs rest web mean-stack

我正在尝试创建一个标记工具，用户可以通过网页应用程序手动标记未标记的呼叫中心请求。

app结构如下：

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);

    });
}

如果我们只是假设调用/ tags，那么你需要知道Tag模型的样子：

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和view / view-tags.html文件

视图-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="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>

任何帮助将不胜感激

修改

我在下面添加了评论，但似乎无法获得Angular。有什么想法吗？

新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="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

修改 这是你的错误Aravind：

@Aravind

最新编辑：

已编辑的index.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="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>

我仍然收到[$ injector：modulerr]错误，但其他人都已整理好了。

修改

我更改了App.js的相关目录，以便它们实际加载控制器和视图。最重要的是，我在每个控制器中添加了一个应用程序定义。这修复了我当前的错误，没有其他错误，但数据没有显示

1 个答案:

答案 0 :(得分：0)

在index.html中包含角度脚本，并且缺少对ngResource的引用

使用

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

更新：

替换此行

"cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.9/angular-resource.js"

用这个

"//cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.9/angular-resource.js"

原因：您错过了//

  1. 如果//不在那里，它将在您的localhost中搜索。
  2. 添加//将在互联网上搜索http或https未提及，因为//指的是您当前的协议并相应地提出请求
相关问题
最新问题