...
| Bloco de código |
|---|
| theme | Eclipse |
|---|
| language | js |
|---|
| title | Registrando e Utilizando Services |
|---|
| linenumbers | true |
|---|
|
shieldModule.service( 'DialogServiceDateUtil', function() {
this.visibleformat = false;
this.isOpen = function(function( date ) {
return visiblenew Date(date).format('dd-mm-yyyy');
};
});
thisshieldModule.show = function() {
this.visible = true;
};
this.hide = function(controller( 'PeriodController', [ 'DateUtil', '$scope', function( DateUtil, scope ) {
this.visible = false;
};
});
shieldModule.controller( 'UserProfileController', [ 'DialogService', '$scope', function( DialogService, scope // ...
// ...
// metodo chamado para formatar a data escolhida em um widget calendar
scope.formatCurrentDate = function(date) {
// ...
// ...
// metodo chamado ao clicar no link 'Abrir Profile'
scope.openUserProfile = function() {
if ( !DialogService.isOpen() ) {
DialogService.show();
}
};
}]); |
...
scope.formattedDate = DateUtil.format(date);
};
}]); |
Note a forma que declaramos a função format no service acima. Internamente, ao declarar um service, a função retornada será instanciada apenas quando necessário (lazy). Esta instanciação dá-se chamando construtor da função através do operador new. Services são estruturas simples, expoem métodos declarados no contexto (variável implícita this) e serão instanciados pelo AngularJS a partir de um construtor padrão. Como são estruturas simples, objetos mais complexos que tem a necessidade de receber parametros antes de sua criação são desenvolvidos como factoriesSão utilizados quando não há necessidade de manter estado nos objetos e/ou criar objetos que necessitam de parâmetros para sua instanciação.
| Informações |
|---|
|
A arquitetura não faz uso de services, apenas factories e providers. O exemplo acima serve apenas como uma forma de demonstrar como e quando utilizar services. |
| Âncora |
|---|
| what-is-factory |
|---|
| what-is-factory |
|---|
|
...
| Bloco de código |
|---|
| theme | Eclipse |
|---|
| language | js |
|---|
| title | Registrando e Utilizando Factories |
|---|
| linenumbers | true |
|---|
|
shieldModule.angular.module('treelayer.commons.ui').factory('$dialog', function() {
var Dialog = function(isOpen, operation) {
this.isOpen = isOpen ? isOpen : false;
this.operation = operation ? operation : '';
};
Dialog.prototype.close = function() {
this.isOpen = false;
this.operation = '';
};
Dialog.prototype.open = function(op) {
this.isOpen = true;
if (op) this.operation = op;
};
return {
'new': function(isOpen, operation) {
return new Dialog(isOpen, operation);
}
};
});
shieldApp.controller( 'PeriodCtrl', ['$scope', '$http', '$property', '$resourceLocator', '$dialog', function ( $scope, $http, $property, $resourceLocator, $dialog ) {
// ...
// ...
$scope.view = {
// ...
// ...
detailDialog: $dialog.new()
// ...
// ...
};
// ...
// ...
}]); |
Note a forma que declaramos a função foo na factory acima. Internamente, ao declarar uma factory, a função foo já esta instanciada e apenas será executada, diferentemente do service onde uma nova função será instanciada através do operador new. A factory $dialog oferece um método público new que constroi uma nova instância do objeto Dialog. Factories fornecem mais flexibilidade na sua instanciação, possibilitando a construção de objetos que possuam parametro, por isso é preferível utilizar factories, devido a flexibilidade de criação destes objetos, em casos como mostrado no exemplo acima são preferíveis ao invés de services.
| Informações |
|---|
|
Acesse o código-fonte da factory $dialog e do controller PeriodCtrl . |
...
Providers, assim como services e factories provem interfaces públicas e são passíveis de dependência. Diferentemente destes outros componentes, providers são expostos antes da inicialização da aplicação. Este atributo fornece aos providers um mecanismo de configuração, tornando-os uteis onde o comportamento de seus métodos públicos diferem conforme a configuração realiza realizada em um bloco de inicialização do AngularJS.
São registrados através da Module API . Ao registrar um provider, dá-se um nome no qual será utilizado (primeiro parâmetro na chamada de função angular.module('treelayer.commons.ui').provider) no qual será utilizado para injeção de dependências em quaisquers outros componentes qualquer outro componente do AngularJS. Abaixo temos um exemplo de como registrar um provider e como utiliza-lo através da injeção de dependências.
| Bloco de código |
|---|
| theme | Eclipse |
|---|
| language | js |
|---|
| title | Registrando e Utilizando Providers |
|---|
| linenumbers | true |
|---|
|
fooModuleangular.module('treelayer.commons.ui').provider( 'fooProvider$message', function () {
// ...
var barName // ...
this.baseUrl = '';
// this.foo = function(...
// ...
this.$get = ['$q', '$http', function ($q, $http) {
console.log('This is foo provider printing ' + barName + ' :)')return this.$message($q, $http);
}];
this.$get = function () {
return this;
};
});
fooModule.controller('fooController', ['foo', function( fooProvider ) {
fooProvider.foo();
}]); |
...
Todo provider deve possuir um método $get. Este será invocado pelo AngularJS para instanciar o provider e deixa-lo disponível para o bloco de configuração da aplicação. Internamente, services e factories são instancias de providers, onde o método $get é injetado automaticamente pelo framework para facilitar o desenvolvimento.
...
| Bloco de código |
|---|
| theme | Eclipse |
|---|
| language | js |
|---|
| title | Utilizando Providers em Blocos de Configuração |
|---|
| linenumbers | true |
|---|
|
fooModuleshieldApp.config( [ 'fooProvider', function( fooProvider ) {
fooProvider.barName = 'Bar';
['$messageProvider',
'$routeProvider',
'partialsPath',
function ($messageProvider, $routeProvider, partialsPath) {
// ...
// ...
$messageProvider.baseUrl = AJS.contextPath() + '/rest/shield/latest';
// ...
// ...
}]); |
| Âncora |
|---|
| what-is-directive |
|---|
| what-is-directive |
|---|
|
...