App.controller vs function в angular.js

Я изучаю angular.js и задаюсь вопросом, когда следует использовать app.controller("MyCtrl",...) и когда нужно использовать function MyCtrl($scope){...}.

Я не вижу больших различий между двумя подходами в этом примере (ссылка на плункер):

index.html

<body ng-app="myApp">

    <div ng-controller="FirstCtrl as app1">
        <button class="btn" ng-model="app1.count"
                            ng-click="app1.increment()">
        Click to increment</button>
        {{ app1.count }}
    </div>

    <div ng-controller="SecondCtrl">
        <button class="btn" ng-model="count"
                            ng-click="increment()">
        Click to increment</button>
        {{ count }}
    </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
    <script type="text/javascript" src="example.js"></script>
</body>

example.js

var app = angular.module("myApp", []);

app.controller("FirstCtrl",function () {
    this.count = 0;
    this.increment = function (){
        this.count = this.count + 1;
    }
});

function SecondCtrl($scope){
    $scope.count = 0;
    $scope.increment = function (){
        $scope.count = $scope.count + 1;
    }
}

Ответы

Ответ 1

В обоих ваших привычках рекомендуется применять $scope и использовать это (вместо использования this, что вы можете сделать и во втором подходе).

Разница между подходами один и два заключается в том, как поддерживать минимизацию. В первом вы можете предоставить массив введенных аргументов, тогда как в последнем вы измените $inject. Это, конечно, немного технически, но настоятельно рекомендуется поддерживать минимизацию. См. Заметка о минимизации в документации.

Первая также не называет функцию в глобальной области, что обычно хорошо!

Ответ 2

Основными причинами использования объявления контроллера на основе модуля являются

Поддержка минимизации. Второй подход ломается, когда вы уменьшаете код по мере того, как отказоустойчивость отказывается.
Хорошая практика JavaScript заключается в минимизации загрязнения глобального пространства имен и первой синтаксической помощи.

Ответ 3

Как правило, при создании приложения вам необходимо настроить начальное состояние для области Angular.

Angular применяется (в смысле функции JavaScript # применить) функцию конструктора контроллера к новому объекту области видимости Angular, который устанавливает начальное состояние области. Это означает, что Angular никогда не создает экземпляры типа контроллера (путем вызова нового оператора в конструкторе контроллера). Конструкторы всегда применяются к существующему объекту области видимости.

Вы устанавливаете начальное состояние области, создавая свойства модели. Например:

function GreetingCtrl($scope) {
  $scope.greeting = 'Hola!';
}

Контроллер GreetingCtrl создает модель приветствия, на которую можно ссылаться в шаблоне.

ПРИМЕЧАНИЕ. Многие из примеров в документации показывают создание функций в глобальной области. Это только для демонстрационных целей - в реальном приложении вы должны использовать метод .controller вашего модуля Angular для вашего приложения следующим образом:

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingCtrl', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

Заметим также, что мы используем нотацию массива, чтобы явно указать зависимость контроллера от службы $scope, предоставленной Angular.

Подробнее... Читать