Angularjs未捕获错误：[$ injector：modulerr]

Question

我无法弄清楚为什么我在没有注入所需模块时遇到模块错误。这是我的plunker链接。 Plunker-UserApp

以下是我的浏览器控制台的完整错误。

VM677 angular.min.js：6未捕获错误：[$ injector：modulerr] http://errors.angularjs.org/1.4.5/ $ injector / modulerr？p0 = myapp＆amp; p1 =错误％3A％2 ... ogleapis.com％2Fajax％2Flibs％ 2Fangularjs％2F1.4.5％2Fangular.min.js％3A37％3A180）

我正在尝试创建一个用户应用程序，该应用程序从拥有json对象的mocker.io网站获取用户。

关于用户应用程序：

执行3项任务。

1. 从模拟器获取用户列表并将其显示为表格
2. 创建并添加新用户
3. 根据ID
获取用户

上述任务在服务“userService”中实现。然后将该服务注入到“UserListController.js”和“AddUserController.js”中编写的控制器组件中。该模块在script.js中与路由配置一起定义。用户列表视图和添加新用户视图位于各自独立的模板中。

UserService.js

//An Angular Service to retreive UserList from the backend
(function() {
  angular.module('myapp')
    .service('userService', ['$http', '$q', function($http, $q) {
      var usrSvc = this;

      //Function to get User List from the backend
      usrSvc.getUserList = function() {

        var defer = $q.defer();

        $http
          .get('http://mocker.egen.io/users')
          .then(function(response) {
            console.log(response.data);
            defer.resolve(response.data);
          }, function(error) {
            console.log(error.status);
            defer.reject(error.status);
          });
        return defer.promise;
      };

      usrSvc.addUser = function(newUser) {
        var defer = $q.defer();

        $http
          .post('http://mocker.egen.io/users', newUser)
          .then(function(response) {
            defer.resolve(response.status);
            console.log(response);
          }, function(error) {
            defer.reject(error.status);
            console.log(error);
          });
        //return defer.promise;
      };

    }]);
})();

AddUserController.js

(function(){
  angular
    .module('myapp')
    .controller('AddUserCtrl',AddUserCtrlfn);

    AddUserCtrlfn.$inject = ['userService'];

    function AddUserCtrlfn(userService){
      var addUserVm = this;

      userService.addUser(addUserVm.formData)
      .then(function(promiseStatus){
        alert('Success! User created!');
        console.log(promiseStatus);
      }, function(errorStatus){
        alert('An error occurred while creating the user');
        console.log(errorStatus);
      });
    }
})();

UserListController.js

(function() {
  angular.module('myapp')
    .controller('UserListCtrl', UserListCtrlfn);

    UserListCtrlfn.$inject = ['userService'];

    function UserListCtrlfn(userService) {
      var UserListVm = this;
      userService.getUserList()
        .then(function(promiseObj) {
          UserListVm.users = promiseObj;
        }, function(error) {
          console.log(error);
        });
    }
})();

Answer 1

更改<script>标记的顺序，以便在使用之前首先定义模块。

<script src="script.js"></script>
<script src="UserListController.js"></script>
<script src="AddUserController.js"></script>
<script src="UserService.js"></script>

remove first argument in config method。