Question

我刚刚开始研究角度js。它显示了下面提到的错误。当使用脚本标记将js代码放置在html页面内部时，它工作正常但是当它放在外部javascript文件中时，它显示下面的错误。谁能帮我吗。我在这里粘贴了代码。我正在使用angularJS one v1.5.7

错误：

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module mainApp due to:
Error: [$injector:nomod] Module 'mainApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.7/$injector/nomod?p0=mainApp
    at file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:68:12
    at file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:2075:17
    at ensure (file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:1999:38)
    at module (file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:2073:14)
    at file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:4608:22
    at forEach (file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:321:20)
    at loadModules (file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:4592:5)
    at createInjector (file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:4514:19)
    at doBootstrap (file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:1751:20)
    at bootstrap (file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:1772:12)
http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=mainApp&p1=Error%3A…FD%3A%2FTutorials%2FAnjularjS%2FControllers%2Flib%2Fangular.js%3A1772%3A12)(anonymous function) @ angular.js:68(anonymous function) @ angular.js:4631forEach @ angular.js:321loadModules @ angular.js:4592createInjector @ angular.js:4514doBootstrap @ angular.js:1751bootstrap @ angular.js:1772angularInit @ angular.js:1657(anonymous function) @ angular.js:31468trigger @ angular.js:3198defaultHandlerWrapper @ angular.js:3488eventHandler @ angular.js:3476

HTML PART：

<html>
   <meta charset="UTF-8">
   <head>
      <title>Angular JS Controller</title>

      <script src = "lib/angular.js"></script>
   </head>

   <body>
      <h2>AngularJS Sample Application</h2>

      <div ng-app="mainApp" ng-controller="studentController">
         Enter first name: <input type = "text" ng-model = "student.firstName"><br><br>
         Enter last name: <input type = "text" ng-model = "student.lastName"><br>
         <br>

         You are entering: {{student.fullName()}}
      </div>
        <script src="js/script.js"></script>
      <!--
      <script>
       var mainApp = angular.module("mainApp", []);

         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",

               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      -->
   </body>
</html>

JS：

function initData()
{
    console.log("Entered initData:");
    ajsController();
}
function ajsController()
{

         var mainApp = angular.module("mainApp", []);

         mainApp.controller('studentController',function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",

               fullName:function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });

}

Answer 1

首先在lib文件夹中添加app.js文件

<script src = "lib/app.js"></script>

<强> app.js

var app = angular.module("mainApp", []);

         app.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",

               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });

<强> HTML

<html>
   <meta charset="UTF-8">
   <head>
      <title>Angular JS Controller</title>

      <script src="lib/angular.js"></script>
      <script src="lib/app.js"></script>

   </head>

   <body>
      <h2>AngularJS Sample Application</h2>

      <div ng-app="mainApp" ng-controller="studentController">
         Enter first name: <input type = "text" ng-model = "student.firstName"><br><br>
         Enter last name: <input type = "text" ng-model = "student.lastName"><br>
         <br>

         You are entering: {{student.fullName()}}
      </div>
</body>
</html>

Answer 2

您已将模块创建代码放在函数ajsController中，从initData调用，但我没有看到您在任何地方调用initData（）？

Angular JS注入器：modulerr

2 个答案: