在 Angular js 中编写控制器的不同方法答案

【问题标题】：Different approach to write controller in angular js在 Angular js 中编写控制器的不同方法
【发布时间】：2015-10-03 17:40:17
【问题描述】：

我是 Angular js 的新手。角度编码的不同方法让我感到困惑。我刚刚找到了两种不同的方法来编写角度控制器声明。

第一种方法

angular.module('App', [])
      .controller('AppCtrl', function ($scope) {

          $scope.model = 0;

          $scope.initSlider = function () {

          };
    });

第二种方法

angular.module('MyApp', []);

function MyCtrl($scope) {
    angular.element(document).ready(function () {
        document.getElementById('msg').innerHTML = 'Hello';
    });
}

只看控制器声明的第一个代码

.controller('AppCtrl', function ($scope) {
})

但在第二个中，只有一个函数被声明为控制器

function MyCtrl($scope) { }

http://jsfiddle.net/tnq86/15/

http://jsfiddle.net/cVsdp/4/

告诉我已经采取了两种不同的方法来声明控制器？哪一个是正确的，当人们遵循不使用控制器字来声明控制器的第二种方法时。我需要指南来理解 2 种不同的方法。

【问题讨论】：

第二种方法无效，不起作用。
查看 js fiddle 链接然后你可以看到第二个正在工作。
你是对的，它有效。但这是不好的做法。您应该使用.controller() 函数来注册控制器。否则，您将在 window 上声明它，这是明确不推荐的。 docs.angularjs.org/api/ng/service/$controller
仅适用于旧版本...全局函数不适用于 1.3 及更高版本。现在必须在模块上下文中声明控制器。这是他们摆脱的旧惯例
@ZenDD 不正确...在 1.2 及以下版本中可以正常工作jsfiddle.net/cVsdp/310

标签： angularjs angular-controller

【解决方案1】：

把第二个控制器中的逻辑放在一边。

第一个选项是推荐的。

第二个选项首先起作用的唯一原因是出于演示的目的，不应使用。在 1.3+ 中甚至不推荐使用这种声明控制器的方式。

有关更多信息，请查看：https://docs.angularjs.org/guide/migration。特别是讨论控制器的部分。

从中提取：

$controller 将不再在窗口中查找控制器。在窗口中查找控制器的旧行为最初旨在用于示例、演示和玩具应用程序。我们发现允许全局控制器功能会鼓励不良做法，因此我们决定默认禁用此行为。

【讨论】：

【解决方案2】：

你必须关注

第一种方法

angular
.module('App', [])
      .controller('AppCtrl', function ($scope) 
      {
       //you code
      };
});

第二种方法

angular
.module('App', [])
      .controller('AppCtrl', ['$scope', function ($scope) {
        //you code
       };
}]);

第三种方法

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

function SomeController($scope) { 
      //you code
}

我想建议第二种方法，它也可以在缩小 JavaScript 之后使用。或者你也可以关注Angular Style Guide。

【讨论】：

【解决方案3】：

在我的企业中，我们正在开发 Angular，我们使用的样式我想它更清晰。

(function() {
  'use strict';

  function myController(_, $window) {
    ...
  }

  //Injections into the controller
  myController.$inject = ['lodash', '$window'];
  angular.module('myModule').controller('myController', myController);
})();

【讨论】：