это может звучать newb, но я выполнял этот учебник для компонента angularjs.
Я новичок в компонентах и как я вставляю константу Utils или authService в свой компонент следующим образом:
app.component('tlOverallHeader', {
bindings: {
data: '='
},
templateUrl: 'js/indexTimeline/components/tl_overallHeader/templates/tl_overallHeader.html',
controller: function() {
this.ms = 'tlOverallheader!'
}
})
спасибо!
Вы должны иметь возможность внедрять службы в свой компонентный контроллер, как автономный контроллер:
controller: function(Utils, authService) {
this.ms = 'tlOverallheader!'
authService.doAuthRelatedActivities().then(...);
}
Вы можете добавлять сервисы к контроллеру компонентов следующим образом:
angular.module('app.module')
.component('test', {
templateUrl: 'views/someview.html',
bindings: {
subject: '='
},
controller: ['$scope', 'AppConfig', TestController]
});
function TestController(scope, config) {
scope.something = 'abc';
}
или вот так:
angular.module('app.module')
.component('test', {
templateUrl: 'views/someview.html',
bindings: {
subject: '='
},
controller: TestController
});
TestController.$inject = ['$scope', 'AppConfig']
function TestController(scope, config) {
scope.something = 'abc';
}
Принятый ответ не является безопасным. Здесь вы также можете использовать нотацию с надписью с надписью minification-safe:
controller: ['Utils', 'authService',
function(Utils, authService) {
this.ms = 'tlOverallheader!'
authService.doAuthRelatedActivities().then(...);
},
]
Для программирования функционального стиля, в котором используются службы стиля Factory, следующий синтаксис выполняет задание:
angular.module('myApp')
.component('myComponent', {
templateUrl: 'myTemplate.html',
controller: ['myFactory', function(myFactory){
var thisComponent = this;
thisComponent.myTemplatemsg = myFactory.myFunc();
}]
})
.factory('myFactory', [ function(){
return {
myFunc: function(){
return "This message is from the factory";
}
};
}]);
Слово Предостережение:. Те же сервисы компонентов / factory, которые вы устанавливаете для своего компонента, также могут быть инъецированы (и, следовательно, доступны) в другое место в вашем приложении, включая родительскую область и другие области компонентов. Это мощно, но можно легко злоупотреблять. Следовательно, рекомендуется, чтобы компоненты только изменяли данные в пределах их собственного объема, поэтому нет путаницы в том, кто кого-то модифицирует. Подробнее об этом см. https://docs.angularjs.org/guide/component#component-based-application-architecture.
Однако даже обсуждение в вышеупомянутой ссылке касается только
предостерегающее использование значения свойства двустороннего связывания '=' при использовании объекта привязки. Поэтому те же рассуждения должны применяться для услуг компонентов и заводов. Если вы планируете использовать ту же услугу или factory в других областях компонентов и/или в родительской области, я рекомендую настроить вашу службу /factory, где находится ваша родительская область, или где проживает ваша предполагаемая совокупность служб/фабрик. Особенно, если у вас есть многочисленные компоненты, использующие одну и ту же услугу /factory. Вы не хотите, чтобы он находился в каком-то произвольном компоненте, из которого было бы трудно найти.