Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/473.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 角度:在视图之间共享控制器是否表示需要服务?_Javascript_Angularjs - Fatal编程技术网

Javascript 角度:在视图之间共享控制器是否表示需要服务?

Javascript 角度:在视图之间共享控制器是否表示需要服务?,javascript,angularjs,Javascript,Angularjs,我正在为当前未登录的用户构建一个Angular应用程序,其中包括三个(潜在)初始视图: intro.html:为用户提供“登录”或“注册”选项 register.html:新用户注册表单 login.html:现有用户登录表单 我目前有一个服务,auth.service.js连接到: 然后我有一个控制器,login.controller.js,它依赖于authService来创建用户帐户、登录用户、连接到Facebook等。下面是该控制器的一部分: angular .module('ap

我正在为当前未登录的用户构建一个Angular应用程序,其中包括三个(潜在)初始视图:

  • intro.html
    :为用户提供“登录”或“注册”选项
  • register.html
    :新用户注册表单
  • login.html
    :现有用户登录表单
我目前有一个服务,
auth.service.js
连接到:

然后我有一个控制器,
login.controller.js
,它依赖于
authService
来创建用户帐户、登录用户、连接到Facebook等。下面是该控制器的一部分:

angular
  .module('app')
  .controller('RegisterController', RegisterController);

RegisterController.$inject = ['authService','$location'];

function RegisterController(authService,$location) {

  var vm = this;

  vm.createUser = function() {
    vm.mismatch = false;

    if (vm.password === vm.confirm) {

      authService.$createUser({
        email: vm.email,
        password: vm.password
      }).then(function(userData) {
        $location.path('/people');
      }).catch(function(error) {
        alert(error);
      });
    } else {
      vm.mismatch = true;
      vm.mismatchMessage = 'Password and confirmation must match';
    }
  };

  // login with Facebook
  vm.connectFacebook = function() {

    authService.$authWithOAuthPopup("facebook").then(function(authData) {
      $location.path('/places');
    }).catch(function(error) {
      alert("Authentication failed:", error);
    });
  };
...
}
我在三个“intro/register/login”视图之间共享这个控制器,但我觉得这是“错误的”。将my
createUser
connectFacebook
和类似的逻辑移动到my
auth.service.js
文件中,然后为依赖于
authService
的每个视图创建“更瘦”的控制器,这是更好的处理方法吗?

来自他们的开发指南():

正确使用控制器

一般来说,控制器不应该尝试做太多的事情。它应该只包含单个视图所需的业务逻辑

保持控制器精简的最常见方法是将不属于控制器的工作封装到服务中,然后通过依赖项注入在控制器中使用这些服务。本指南的依赖项注入服务部分将对此进行讨论

所以,简单的答案是,继续,把它们分成不同的控制器。如果您需要在他们之间共享数据,您应该使用服务来实现

angular
  .module('app')
  .controller('RegisterController', RegisterController);

RegisterController.$inject = ['authService','$location'];

function RegisterController(authService,$location) {

  var vm = this;

  vm.createUser = function() {
    vm.mismatch = false;

    if (vm.password === vm.confirm) {

      authService.$createUser({
        email: vm.email,
        password: vm.password
      }).then(function(userData) {
        $location.path('/people');
      }).catch(function(error) {
        alert(error);
      });
    } else {
      vm.mismatch = true;
      vm.mismatchMessage = 'Password and confirmation must match';
    }
  };

  // login with Facebook
  vm.connectFacebook = function() {

    authService.$authWithOAuthPopup("facebook").then(function(authData) {
      $location.path('/places');
    }).catch(function(error) {
      alert("Authentication failed:", error);
    });
  };
...
}