...
eCamada de Visualização (Commons UI)
Conforme citado na seção de contextualização, a arquitetura proposta visa eliminar os problemas identificados em diversos projetos já executados, onde foi possível identificar a falta de padronização para realizar tarefas comuns no processo de desenvolvimento. Assim, temos como objetivo principal desta seção o detalhamento do projeto Commons UI que provê soluções para que seja possível estabilizar, o que era previamente uma atividade caótica, em uma atividade produtiva e padronizada. Em busca deste equilíbrio, foram estudadas soluções e padrões de mercado que balizam o desenvolvimento de software atualmente.
...
| Gliffy Diagram | ||||
|---|---|---|---|---|
|
...
| Itens | Nome | Descrição |
|---|---|---|
| 1, 2, 3 | Services | Services, factories e providers são componentes disponibilizados pela arquitetura que expoem métodos públicos e são passíveis de injeção de dependências. |
| 4, 5 | Directive | Directives são como uma extensão do HTML na forma de atributos anexados nestes elementos. Diretivas utilizam-se de services, factories, providers e eventos para comunicar-se e realizar suas funções. |
| 6 | Partials | Partials são páginas HTML que podem ser incorporadas em outras páginas através da directive ng-include. Todas as páginas de list e detail da arquitetura são partials que compoem a estrutura HTML da aplicação. |
| 7 | Controllers | Controllers interagem com as partials e controlam itens de escopo e diretivas. Métodos e regras de negócio são expostos para as partials através de controllers. |
| 8 | Scopes | Scopes formam a cola entre controllers e directives. Para expor um método para uma diretiva, este método deve estar declarado dentro de um escopo. Cada controller possui um escopo. |
| Âncora | ||||
|---|---|---|---|---|
|
...
Services são registrados a partir da Module API. Ao registrar um service, dá-se um nome no qual será utilizado para injeção de dependências em quaisquers outros componentes do AngularJS. Abaixo temos um exemplo de como registrar um service e como utiliza-lo através da injeção de dependênciasda utização de services para manter estados de um dialog.
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
fooModuleshieldModule.service( 'fooServiceDialogService', function() { this.visible = false; this.fooisOpen = function() { console.log('This is foo service printing bar :)'); return visible; }; this.show = function() { this.visible = true; }; this.hide = function() { this.visible = false; }; }); fooModuleshieldModule.controller( 'fooControllerUserProfileController', [ 'fooService'DialogService', '$scope', function( fooService DialogService, scope ) { // ... // ... // metodo chamado ao clicar no botão link 'Abrir Profile' scope.openUserProfile = function() { if ( !DialogService.isVisible() ) { fooService DialogService.fooshow(); } }; }]); |
Note a forma que declaramos a função foo 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.
...