Angularjs Uncaught Error: [$injector:modulerr]

Question

我无法弄清楚为什么我在没有注入所需模块时出现模块错误。这是一个 link 给我的笨蛋。 Plunker-UserApp

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

VM677 angular.min.js:6 未捕获错误：[$injector:modulerr] http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=myapp&p1=Error%3A%2…ogleapis.com% 2Fajax%2Flibs%2Fangularjs%2F1.4.5%2Fangular.min.js%3A37%3A180)

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

关于用户应用程序：

它执行 3 个任务。

从 mocker 获取用户列表并将其显示为 table
创建并添加新用户
根据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.

Angularjs Uncaught Error: [$injector:modulerr]