Question

我是一名拥有超过5年经验的网络开发人员。如今我学会了MEAN-stack网站开发方式，并开始启动MEAN-stack项目。然后我在前端部分有一些问题（角度控制管理）。

我的主要问题是我的角度控制器js文件导致2个浏览器错误。如下。

第一个错误如下：

aangular.js:68 Uncaught Error: [$injector:nomod] Module 'app' 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.(…)(anonymous function) 
@ angular.js:68(anonymous function) 
@ angular.js:2082ensure 
@ angular.js:2006module 
@ angular.js:2080(anonymous function) 
@ UsersService.js:4(anonymous function) 
@ UsersService.js:111

第二个错误如下：

angular.js:13920 Error: [ng:areq] Argument 'Users.Controller' is not a   function, got undefined

我的前端代码结构如下。

控制器 users.controller.js，account.controller.js，projects.controller.js等。
服务 UsersService.js，AccountService.js等
app.js（中间件部分）
的观点 index.html，htmls对应每个控制器js

让我们详细了解一下代码。

App.js文件：

(function () {
    angular.module('app', ['ui.router'])
        .config(config)
        .run(run);

    function config($stateProvider, $urlRouterProvider) {
        // default route
        $urlRouterProvider.otherwise("/");

        $stateProvider
            .state('home', {
                url: '/',
                template: '<h1>Unpasan Admin Page!</h1>',
                controller: 'Users.Controller',
                controllerAs: 'vm',
                //data: { activeTab: 'home' }
            })
            .state('account', {
                url: '/account',
                templateUrl: 'views/account.html',
                controller: 'Accounts.Controller',
                controllerAs: 'vm',
                data: { activeTab: 'account' }
            })
            .state('client', {
            url: '/client',
            templateUrl: 'views/client.html',
            controller: 'Clients.Controller',
            controllerAs: 'vm',
            data: { activeTab: 'client' }
            })
            .state('user', {
                url: '/user',
                templateUrl: 'views/user.html',
                controller: 'Users.Controller',
                controllerAs: 'vm',
                data: { activeTab: 'client' }
            })
            .state('project', {
                url: '/project',
                templateUrl: 'views/project.html',
                controller: 'Projects.Controller',
                controllerAs: 'vm',
                data: { activeTab: 'project' }
            });
    }

UsersService.js：

＆＃13;

(function () {

    angular
        .module('app')
        .factory('UserService', function(){

                var service = {};

                service.GetCurrent = GetCurrent;
                service.GetAll = GetAll;
                service.GetById = GetById;
                service.GetByUsername = GetByUsername;
                service.Create = Create;
                service.Update = Update;
                service.Delete = Delete;

                return service;

                function GetCurrent() {
                    return $http.get('/api/users/current').then(handleSuccess, handleError);
                }

                function GetAll() {
                    return $http.get('/api/users').then(handleSuccess, handleError);
                }

                function GetById(_id) {
                    return $http.get('/api/users/' + _id).then(handleSuccess, handleError);
                }

                function GetByUsername(username) {
                    return $http.get('/api/users/' + username).then(handleSuccess, handleError);
                }

                function Create(user) {
                    return $http.post('/api/users', user).then(handleSuccess, handleError);
                }

                function Update(user) {
                    return $http.put('/api/users/' + user._id, user).then(handleSuccess, handleError);
                }

                function Delete(_id) {
                    return $http.delete('/api/users/' + _id).then(handleSuccess, handleError);
                }

                // private functions

                function handleSuccess(res) {
                    return res.data;
                }

                function handleError(res) {
                    return $q.reject(res.data);
                }

        });

})();

＆＃13;

users.controller.js

＆＃13;

angular.module('app',[]).controller('UsersController', ['$scope, UserService', function($scope, UserService){

   $scope.users = null;

    initController();
    console.log('Users.Controller:initController');

    function initController() {            // get current user
        UserService.getAllUser().then(function (users) {
            $scope.users = users;
        });
    }

    function saveUser() {
        UserService.Update(vm.user)
            .then(function () {
                FlashService.Success('User updated');
            })
            .catch(function (error) {
                FlashService.Error(error);
            });
    }

    function deleteUser() {
        UserService.Delete(vm.user._id)
            .then(function () {
                // log user out
                $window.location = '/login';
            })
            .catch(function (error) {
                FlashService.Error(error);
            });
    }


}] );

＆＃13;

当我点击index.html中侧边栏的元素时，应该交换“ui-view＆＃39;”的内容。标签。

上面提到的错误消息是点击用户＆＃39; ui tag＆＃39;。

Answer 1

而不是controller: 'Users.Controller'，它应该是controller: 'UsersController'（请参阅传递到＆＃39; home＆＃39;的状态定义中的对象）。您应该传入控制器的名称（UsersController），而不是文件名（users.controller）。

AngularJS控制器在MEAN-stack中的管理开发

1 个答案: