AngularJS 子模块（和身份验证）

Question

免责声明：这是 Angular 中正在进行的“第一个项目”，所以我仍在努力。

长话短说，我使用the answer here 作为身份验证模式（通过对 PHP 脚本的 RESTful 调用完成）。它工作得很好。当我希望它与 Angular 方面已经存在的控制器一起工作时，需要注意的是。来自我的 C++/Perl/Python 背景，我想编写一次并包含它。为此，我找到了the answer here。但它并不完全适合我。对于初学者来说，我的网站是从另一个网站模板化的，而且语法有点不同——我还不太明白。当我在 myApp 中尝试 InjectedModule.otherApp 时，出现错误。代码如下所示：

angular.module('otherApp', ['ngRoute','infinite-scroll'])
.controller("loginController",
            ['$scope',
            '$http',
            '$location',
            '$window',
            function($scope,$http,$location,$window) {
// Do a bunch of authentication stuff

}])

angular.module('myApp', ['ngRoute','infinite-scroll'])
.controller("imageController",
        ['$scope',
        '$http',
        '$location',
        '$window',
        function($scope,$http,$location,$window) {

// Guts of the page generated here

}])

理想情况下，我希望 imageController 依赖于身份验证控制器，并且当然可以控制基于身份验证显示的内容。

Answer 1

不应依赖控制器。您应该为此使用服务。 首先，您应该构建一个身份验证服务。

angular.module('authentication')
.service('authService', function(){
    var isAuthenticated = false;
    var user     = 'guest';
    var username = '';

    return {
      login: function() { isAuthenticated = true; },
      isAuthenticated: function() { return isAuthenticated; },
      loggedInUser: function() { return user; }
    }
});

现在，您的控制器可以从此服务调用身份验证逻辑：

angular.module('authentication', ['ngRoute','infinite-scroll'])
.controller("loginController",
        ['$scope', '$http', '$location', '$window', 'authService',
        function($scope,$http,$location,$window, authService) {

  // Do a bunch of authentication stuff
  $scope.login = function LoginUser() {
    authService.login();
  }

}]);

// include 'authentication' module - 'images' module will depend on it
angular.module('images', ['ngRoute','infinite-scroll', 'authentication'])
.controller("imageController",
    ['$scope', '$http', '$location', '$window', 'authService',
    function($scope,$http,$location,$window, authService) {

  // Guts of the page generated here
  $scope.loadImages = function LoadImages() {
    if (authService.isAuthenticated()) {
      // do authenticated user image load logic
    } else {
      // do unauthenticated user image load logic
    }
  }
}]);

您的应用还应包含这两个模块：

angular.module('bootstraper', [
  'authentication',
  'images'
])