Question

你好我已经面对这个问题很长一段时间了。我能够在这个地方找到它，这是由于html页面中的ng-app。但是我在js中有正确的food模块。这个错误的原因是什么？任何的想法？我的代码

INDEX.HTML

<!DOCTYPE html>
<html ng-app="food">
  <head>
    <title>Scratchpad</title>

    <!-- Viewport mobile tag for sensible mobile support -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


    <!--
        Stylesheets and Preprocessors
        ==============================

        You can always bring in CSS files manually with `<link>` tags, or asynchronously
        using a solution like AMD (RequireJS).  Or, if you like, you can take advantage
        of Sails' conventional asset pipeline (boilerplate Gruntfile).

        By default, stylesheets from your `assets/styles` folder are included
        here automatically (between STYLES and STYLES END). Both CSS (.css) and LESS (.less)
        are supported. In production, your styles will be minified and concatenated into
        a single file.

        To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
        For example, here are a few things you could do:

            + Change the order of your CSS files
            + Import stylesheets from other directories
            + Use a different or additional preprocessor, like SASS, SCSS or Stylus
    -->
    <!--Twitter Bootstrap-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!--STYLES-->
    <link rel="stylesheet" href="/styles/importer.css">
    <!--STYLES END-->
  </head>

    <body>
      <nav class = "navbar navbar-default" role = "navigation">
        <div class = "container-fluid">
          <div class = "navbar-header">
            <a class = "navbar-brand" ui-sref = "scratchpad">FoodForShare</a>
          </div>
        </div>

      </nav>


      <p>SAMPLE PAGE</p>

      <div class = "container">
        <div ui-view></div>
      </div>



    <!--

      Client-side Javascript
      ========================

      You can always bring in JS files manually with `script` tags, or asynchronously
      on the client using a solution like AMD (RequireJS).  Or, if you like, you can
      take advantage of Sails' conventional asset pipeline (boilerplate Gruntfile).

      By default, files in your `assets/js` folder are included here
      automatically (between SCRIPTS and SCRIPTS END).  Both JavaScript (.js) and
      CoffeeScript (.coffee) are supported. In production, your scripts will be minified
      and concatenated into a single file.

      To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
      For example, here are a few things you could do:

          + Change the order of your scripts
          + Import scripts from other directories
          + Use a different preprocessor, like TypeScript

    -->


    <script src="/js/dependencies/sails.io.js"></script>
    <script src="/js/bower_components/angular/angular.min.js"></script>
    <script src="/js/bower_components/angular-route/angular-route.min.js"></script>
    <script src="/js/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="/js/bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="/js/main.js"></script>
    <script src="/js/routes.js"></script>
    <script src="/js/service/crud.js"></script>

  </body>
</html>

MAIN.JS

/**
* Defines module-scratchpadModule for the application
*@dependencies: ui-router , Angular - resource
*@states: 2 Parent states and 1 Child state
*@Controllers: Controllers for listing, viewing and adding a scratch
*@Factory Service: Notes for the angular resource
*
*
*
*
*/
var foodshareModule= angular.module('food',['ngRoute','ngResource']);

console.log("Main file getting included");


foodshareModule.controller("personController", function($scope) {
    console.log($scope);
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    console.log($scope.firstName);
    console.log($scope.lastName);
});

foodshareModule.controller('scratchListController', function($scope,$state,Notes){

   console.log("working");

  $scope.scratchpad =Food.query();

  $scope.deleteScratch = function (scratch,flag) {
    if(flag === 0) {                                            //Checks if Bulk delete or single delete
      if(confirm("You Clicked DELETE !! Are you sure ?")) {
      scratch.$delete(function() {                          //Single delete
        window.location.href = 'http://localhost:1337';
      });
      }
    }
    else {                                                      //Bulk delete
      scratch.$delete(function() {
        window.location.href = 'http://localhost:1337';
      });
    }

  }

  $scope.emptyScratchpad = function () {
    var ask = false;
    if (confirm ("You are about Empty Scratchpad. Sure ????")) {
      ask = true;
    }
    if(ask === true) {
      for (var i = 0; i < $scope.scratchpad.length; i++) {
        $scope.deleteScratch($scope.scratchpad[i],1);
      }
    }

  }
})



foodshareModule.factory('Food', function($resource) {
  return $resource('http://localhost:1337/Food:id', { id: '@_id' }, {
    update: {
      method: 'PUT'
    }
  });
});

错误：

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=food&p1=TypeError%…calhost%3A1337%2Fjs%2Fbower_components%2Fangular%2Fangular.min.js%3A17%3A1)

Answer 1

您尚未包含ngResource脚本文件。 ngResource并没有与angular.js捆绑在一起

<script src="path-to-js/angular-resource.min.js"></script>

注入器错误在angular.js中找不到模块？

1 个答案: