Каков рекомендуемый способ расширения контроллеров AngularJS?

У меня есть три контроллера, которые очень похожи. Я хочу иметь контроллер, который расширяет эти три функции и разделяет их функции.

Возможно, вы не расширяете контроллер, но возможно расширить контроллер или сделать один контроллер смесью нескольких контроллеров.

module.controller('CtrlImplAdvanced', ['$scope', '$controller', function ($scope, $controller) {
    // Initialize the super class and extend it.
    angular.extend(this, $controller('CtrlImpl', {$scope: $scope}));
    … Additional extensions to create a mixin.
}]);

Когда родительский контроллер создан, логика, содержащаяся в нем, также выполняется. См. $ Controller () для получения дополнительной информации, но $scopeнужно передать только значение. Все остальные значения будут введены нормально.

@mwarren , ваше беспокойство автоматически решается с помощью инъекции угловой зависимости. Все, что вам нужно, это ввести $ scope, хотя при желании вы можете переопределить другие введенные значения. Возьмите следующий пример:

(function(angular) {

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

	module.controller('simpleController', function($scope, $document) {
		this.getOrigin = function() {
			return $document[0].location.origin;
		};
	});

	module.controller('complexController', function($scope, $controller) {
		angular.extend(this, $controller('simpleController', {$scope: $scope}));
	});

})(angular);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>

<div ng-app="stackoverflow.example">
    <div ng-controller="complexController as C">
        <span><b>Origin from Controller:</b> {{C.getOrigin()}}</span>
    </div>
</div>

Хотя $ document не передается в 'simpleController', когда он создается 'complexController', $ document вводится для нас.

Для наследования вы можете использовать стандартные шаблоны наследования JavaScript. Вот демо, которое использует$injector

function Parent($scope) {
  $scope.name = 'Human';
  $scope.clickParent = function() {
    $scope.name = 'Clicked from base controller';
  }    
}

function Child($scope, $injector) {
  $injector.invoke(Parent, this, {$scope: $scope});
  $scope.name = 'Human Child';
  $scope.clickChild = function(){
    $scope.clickParent();
  }       
}

Child.prototype = Object.create(Parent.prototype);

В случае, если вы используете controllerAsсинтаксис (который я настоятельно рекомендую), еще проще использовать классический шаблон наследования:

function BaseCtrl() {
  this.name = 'foobar';
}
BaseCtrl.prototype.parentMethod = function () {
  //body
};

function ChildCtrl() {
  BaseCtrl.call(this);
  this.name = 'baz';
}
ChildCtrl.prototype = Object.create(BaseCtrl.prototype);
ChildCtrl.prototype.childMethod = function () {
  this.parentMethod();
  //body
};

app.controller('BaseCtrl', BaseCtrl);
app.controller('ChildCtrl', ChildCtrl);

Другим способом может быть создание просто «абстрактной» функции конструктора, которая будет вашим базовым контроллером:

function BaseController() {
  this.click = function () {
    //some actions here
  };
}

module.controller('ChildCtrl', ['$scope', function ($scope) {
  BaseController.call($scope);
  $scope.anotherClick = function () {
    //other actions
  };
}]);

Сообщение в блоге на эту тему

Ну, я не совсем уверен, чего вы хотите достичь, но обычно услуги - это путь. Вы также можете использовать характеристики наследования Scope Angular для совместного использования кода между контроллерами:

<body ng-controller="ParentCtrl">
 <div ng-controller="FirstChildCtrl"></div>
 <div ng-controller="SecondChildCtrl"></div>
</body>

function ParentCtrl($scope) {
 $scope.fx = function() {
   alert("Hello World");
 });
}

function FirstChildCtrl($scope) {
  // $scope.fx() is available here
}

function SecondChildCtrl($scope) {
  // $scope.fx() is available here
}

Вы не расширяете контроллеры. Если они выполняют те же основные функции, то эти функции необходимо перенести в службу. Эта услуга может быть введена в ваши контроллеры.

Еще одно хорошее решение, взятое из этой статьи :

// base controller containing common functions for add/edit controllers
module.controller('Diary.BaseAddEditController', function ($scope, SomeService) {
    $scope.diaryEntry = {};

    $scope.saveDiaryEntry = function () {
        SomeService.SaveDiaryEntry($scope.diaryEntry);
    };

    // add any other shared functionality here.
}])

module.controller('Diary.AddDiaryController', function ($scope, $controller) {
    // instantiate base controller
    $controller('Diary.BaseAddEditController', { $scope: $scope });
}])

module.controller('Diary.EditDiaryController', function ($scope, $routeParams, DiaryService, $controller) {
    // instantiate base controller
    $controller('Diary.BaseAddEditController', { $scope: $scope });

    DiaryService.GetDiaryEntry($routeParams.id).success(function (data) {
        $scope.diaryEntry = data;
    });
}]);

Вы можете создать сервис и наследовать его поведение в любом контроллере, просто внедрив его.

app.service("reusableCode", function() {

    var reusableCode = {};

    reusableCode.commonMethod = function() {
        alert('Hello, World!');
    };

    return reusableCode;
});

Затем в вашем контроллере, который вы хотите расширить из вышеупомянутого сервиса reusableCode:

app.controller('MainCtrl', function($scope, reusableCode) {

    angular.extend($scope, reusableCode);

    // now you can access all the properties of reusableCode in this $scope
    $scope.commonMethod()

});

ДЕМО ПЛАНКЕР: http://plnkr.co/edit/EQtj6I0X08xprE8D0n5b?p=preview

Вы можете попробовать что-то вроде этого (не проверял):

function baseController(callback){
    return function($scope){
        $scope.baseMethod = function(){
            console.log('base method');
        }
        callback.apply(this, arguments);
    }
}

app.controller('childController', baseController(function(){

}));

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

Вот пример использования фабрики: http://jsfiddle.net/aaaflyvw/6KVtj/2/

angular.module('myApp',[])

.factory('myFactory', function() {
    var myFactory = {
        save: function () {
            // saving ...
        },
        store: function () {
            // storing ...
        }
    };
    return myFactory;
})

.controller('myController', function($scope, myFactory) {
    $scope.myFactory = myFactory;
    myFactory.save(); // here you can use the save function
});

И здесь вы можете использовать функцию магазина также:

<div ng-controller="myController">
    <input ng-blur="myFactory.store()" />
</div>

Вы можете напрямую использовать $ controller ('ParentController', {$ scope: $ scope}). Пример

module.controller('Parent', ['$scope', function ($scope) {
    //code
}])

module.controller('CtrlImplAdvanced', ['$scope', '$controller', function ($scope, $controller) {
    //extend parent controller
    $controller('CtrlImpl', {$scope: $scope});
}]);

Вы можете использовать Angular «как» синтаксис в сочетании с простым наследованием JavaScript

Подробности смотрите здесь http://blogs.microsoft.co.il/oric/2015/01/01/base-controller-angularjs/

Я написал функцию для этого:

function extendController(baseController, extension) {
    return [
        '$scope', '$injector',
        function($scope, $injector) {
            $injector.invoke(baseController, this, { $scope: $scope });
            $injector.invoke(extension, this, { $scope: $scope });
        }
    ]
}

Вы можете использовать это так:

function() {
    var BaseController = [
        '$scope', '$http', // etc.
        function($scope, $http, // etc.
            $scope.myFunction = function() {
                //
            }

            // etc.
        }
    ];

    app.controller('myController',
        extendController(BaseController,
            ['$scope', '$filter', // etc.
            function($scope, $filter /* etc. */)
                $scope.myOtherFunction = function() {
                    //
                }

                // etc.
            }]
        )
    );
}();

Плюсы:

1. Вам не нужно регистрировать базовый контроллер.
2. Ни одному из контроллеров не нужно знать о службах $ controller или $ инжектор.
3. Он хорошо работает с синтаксисом внедрения массивов angular - что важно, если ваш javascript будет сокращен.
4. Вы можете легко добавить дополнительные инъекционные сервисы к базовому контроллеру, не забывая также добавлять их и передавать через все дочерние контроллеры.

Минусы:

1. Базовый контроллер должен быть определен как переменная, которая рискует загрязнить глобальную область. Я избегал этого в своем примере использования, оборачивая все в анонимную самоисполняющуюся функцию, но это означает, что все дочерние контроллеры должны быть объявлены в одном файле.
2. Этот шаблон хорошо работает для контроллеров, которые создаются непосредственно из вашего html, но не так хорош для контроллеров, которые вы создаете из своего кода через службу $ controller (), потому что его зависимость от инжектора не позволяет вам напрямую вводить дополнительные, не -сервисные параметры из вашего вызывающего кода.

Я считаю расширение контроллеров плохой практикой. Скорее поместите свою общую логику в сервис. Расширенные объекты в JavaScript, как правило, становятся довольно сложными. Если вы хотите использовать наследование, я бы порекомендовал машинопись. Тем не менее, тонкие контроллеры - лучший способ пойти по моему мнению.