Histórico da Página

...

Recipients

Recipients é um termo utilizado na documentação do framework AngularJS para referir-se a um agrupador contendo os componentes: service, factory e provider. Os componentes deste agrupador são abordado no decorrer desta seção.

O que é um Service? 

Âncora
what-is-service what-is-service

...

São objetos que compartilham funcionalidades através de APIs públicas para toda aplicação que faz uso do AngularJS. Services fornecem injeção de dependência e padronização quanto a criação de APIs públicas. 

...

shieldModule.service( '// aqui o service com nome DateUtil (primeiro parâmetro na chamada da função service()) é registrado no módulo treelayer.commons.ui.util
angular.module('treelayer.commons.ui.util').service( 'DateUtil', function() {
	
	this.format = function( date ) {
		new Date(date).format('dd-mm-yyyy');
	};	
});
 
shieldModule.controller( 'PeriodController', [ 'DateUtil', '$scope', function( DateUtil, scope ) {
	
	// ...

	// metodo chamado para formatar a data escolhida em um widget calendar
	scope.formatCurrentDate = function(date) {
		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. Sã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. 

...

O que é um Factory?

Assim como o service, factories também são objetos que compartilham interfaces públicas de API e são passíveis a injeção de dependências.

Factories são registradas através da Module API . Ao registrar uma factory, 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 uma factory e como utiliza-la através da injeção de dependências.

angular.module('treelayer.commons.ui').factory('$dialog', function() {

    var Dialog = function(isOpen, operation) {
        this.isOpen = isOpen // em um modulo que depende do commons (shieldApp no caso da aplicação Shield) o componente DateUtil é injetado
// em um controller através do array de string (segundo argumento da função controller()) onde este argumento
// deve conter o nome que o componente foi registrado, ou seja, 'DateUtil'
shieldApp.controller( 'PeriodController', [ 'DateUtil', '$scope', function( DateUtil, scope ) {
	
	// ...

	// metodo chamado para formatar a data escolhida em um widget calendar
	scope.formatCurrentDate = function(date) {
		scope.formattedDate = DateUtil.format(date); // utilização do service DateUtil
	};
	
}]);

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. Sã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. 

O que é um Factory? 

Âncora
what-is-factory what-is-factory

Assim como o service, factories também são objetos que compartilham interfaces públicas de API e são passíveis a injeção de dependências.

Factories são registradas através da Module API . Ao registrar uma factory, 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 uma factory e como utiliza-la através da injeção de dependências.

// aqui a factory com nome $dialog(primeiro parâmetro na chamada da função service()) é registrada no módulo treelayer.commons.ui
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()

		// ...

	};
 // em um modulo que depende do commons (shieldModule no caso da aplicação Shield) o componente $dialog é injetado
// em um controller através do array de string (segundo argumento da função controller()) onde este argumento
// deve conter o nome que o componente foi registrado, ou seja, '$dialog'
shieldApp.controller( 'PeriodCtrl', ['$dialog', '$scope', function ( Dialog, scope ) {
	
	// ...
	$scope.view = {
		detailDialog: Dialog.new() // utilização da factory $dialog
	}]);;
 
	// ...
	
}]);

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, em casos como mostrado no exemplo acima são preferíveis ao invés de services.

O que é um Provider? 

Âncora
what-is-provider what-is-provider

O que é um Provider?

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 realizada em um bloco de inicialização do AngularJS. 

...

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 listagem e detailhes detalhe da arquitetura são partials que compoem a estrutura HTML da aplicação.

...

Services são objetos compostos por funções, passíveis de injeção de dependências e inicializados . Um serviço no framework AngularJS é tratado como um singleton e pode ser injetado através de seu nome, bastando declara-lo como parametro em seus componentes (no caso, um controller, por exemplo). Para maiores informações acesse a documentação oficial sobre services.

Dialog

...

Service 

Âncora
dialog-factory dialog-factory

É um serviço declarado através do framework AngularJS que possui unicamente a funcionalidade de retornar um objeto que controla estados de um dialog. Mencionamos na introdução de services que estes não possuem estado, porém o que citamos na anteriormente foi que o Dialog Service tem como unica funcionalidade retornar um objeto com estados. Como isto se dá? Basicamente este serviço possui uma única função, a função responsável por criar o objeto dialog, ou seja, o Dialog Service não possui estado, mas sim objeto obtido no retorno desta chamada.

...

 new

...

Dialog 

Âncora
dialog-object dialog-object

 

Dialog é um objeto definido internamente no service DialogService e tem como responsabilidade controlar os estados de um dialog. O estado é basicamente quando o dialog está aberto e a operação que esta ocorrendo no momento. Para obter um objeto do tipo Dialog basta realizarmos uma chamada para a função new no DialogService.

Property Service

É um serviço declarado através do framework AngularJS que expõe funções públicas para trabalhar com propriedades, encapsulando a complexidade de realizar requisições HTTP para o desenvolvedor. Para maiores informações, leia a documentação de resources.

Os atributos disponíveis publicamente são:

Nome	Descrição	Utilização
operation	Define se o dialog quando exibido esta no modo de leitura ou edição.	Image Added
isOpen	Variável de controle utilizada para determinar se o Dialog está visível.	Image Added

As funções disponíveis publicamente são:

Nome	Descrição	Utilização

   

properties

A partir do nome de objeto, busca todas as propriedades deste objeto no back-end.Image Removed

range

A partir de um objeto e um atributo, busca a série se existente no arquivo de internacionalização.

Image Removed 

Submit Service

...

new	Inicializa um objeto do tipo Dialog e retorna.	Image Added
open	Altera o valor da atributo isOpen para false. Esta faz com que o dialog seja exibido para o usuário. No exemplo de utilização ao lado é possível notar que podemos passar um valor do tipo String. Este valor é a operação executada no dialog, quando aberto. Os valores aceitos são: create, update, delete e view.	Image Added
close	Altera o valor da atributo isOpen para false. Esta torna o dialog (se visível) oculto para o usuário.	Image Added

Property Service

É um serviço declarado através do framework AngularJS que expõe funções públicas para trabalhar com propriedades, encapsulando a complexidade de realizar requisições HTTP para o desenvolvedor. Para maiores informações, leia a documentação de resources.

As funções disponíveis publicamente são:

Nome	Descrição

   

	Utilização

createRealiza uma chamada HTTP POST para a URL configurada no MessageProvider durante a inicialização da

properties	A partir do nome de objeto, busca todas as propriedades deste objeto no back-end.	Image Added
range	A partir de um objeto e um atributo, busca a série se existente no arquivo de internacionalização.	Image Added

Submit Service

Que expõe funções que mapeiam os métodos genéricos CRUD da arquitetura back-end. Internamente as requisições HTTP são tratadas e processadas, tornando-se transparente para o desenvolvedor.

As funções disponíveis publicamente são:

Nome	Descrição	Utilização
create	Realiza uma chamada HTTP POST para a URL configurada no MessageProvider durante a inicialização da aplicação. Esta configuração mapeia a URL base dos endpoints RESTful genéricos que implementam as operações CRUD. O objeto enviado como primeiro argumento deve conter o atributo object com valor do tipo String, contendo o nome da entidade que será persistida. O segundo parâmetro é o objeto JSON com os dados a serem persistidos. O terceiro é quarto parametro são callbacks opcionais, de sucesso e falha. Após sua execução, este método delega ao back-end a responsabilidade de inserção e recebe como resposta, no caso de sucesso, um objeto contendo o id do objeto gerado pelo back-end ou, caso de falha, os erros gerados pelo back-end na inserção.
update	Realiza uma chamada HTTP PUT para a URL configurada no MessageProvider durante a inicialização da aplicação. Esta configuração mapeia a URL base dos endpoints RESTful genéricos que implementam as operações CRUD. O objeto enviado como primeiro argumento deve conter o atributo object com valor do tipo String, contendo o nome da entidade que será atualizada e um atributo id com o identificador unico da entidade já persistida no banco de dados. O segundo parâmetro é o objeto JSON com os dados a serem atualizados. O terceiro é quarto parametro são callbacks opcionais, de sucesso e falha. Após sua execução, este método delega ao back-end a responsabilidade de atualização de um objeto já persistido. Se a operação ocorrer com sucesso e houver um callback registrado, este é executado e não recebe nenhum parametro . Em caso de falha, se houver callback de falha registrado, é executado e recebe os erros gerados pelo back-end.
delete	Realiza uma chamada HTTP DELETE para a URL configurada no MessageProvider durante a inicialização da aplicação. Esta configuração mapeia a URL base dos endpoints RESTful genéricos que implementam as operações CRUD. O objeto enviado como primeiro argumento deve conter o atributo object com valor do tipo String, contendo o nome da entidade que será excluida e um atributo id com o identificador unico da entidade já persistida no banco de dados. O segundo é terceiro parametro são callbacks opcionais, de sucesso e falha. Após sua execução, este método delega ao back-end a responsabilidade de deleção de um objeto já persistido. Se a operação ocorrer com sucesso e houver um callback registrado, este é executado e não recebe nenhum parametro . Em caso de falha, se houver callback de falha registrado, é executado e recebe os erros gerados pelo back-end.
retrieve	Realiza uma chamada HTTP GET para a URL configurada no MessageProvider durante a inicialização da aplicação. Esta configuração mapeia a URL base dos endpoints RESTful genéricos que implementam as operações CRUD. O objeto enviado como primeiro argumento deve conter o atributo object com valor do tipo String, contendo o nome da entidade que será persistida. O segundo parâmetro é o objeto JSON com os dados a serem persistidos. O terceiro é quarto parametro são callbacks opcionais, de sucesso e falha. Após sua execução, este método delega ao back-end a responsabilidade de busca de um objeto já persistido. Se a operação ocorrer com sucesso e houver um callback registrado, este é executado e recebe o objeto encontrado ou nulo, caso não foi possível encontrar um objeto através do identificador informado. Em caso de falha, se houver callback de falha registrado, é executado e recebe os erros gerados pelo back-end.
find	Realiza uma chamada HTTP GET para a URL configurada no MessageProvider durante a inicialização da aplicação. Esta configuração mapeia a URL base dos endpoints RESTful genéricos que implementam as operações CRUD. O objeto enviado como primeiro argumento deve conter o atributo object com valor do tipo String, contendo o nome da entidade que será persistida. O segundo parâmetro é o objeto JSON com os dados a serem persistidos. O terceiro é quarto parametro são callbacks opcionais, de sucesso e falha. Após sua execução, este método delega ao back-end a responsabilidade de deleção de um objeto já persistido. Se a operação ocorrer com sucesso e houver um callback registrado, este é executado e recebe um array de objetos encontrados, ou um array vazio, caso não foi possível encontrar objetos persistidos. Em caso de falha, se houver callback de falha registrado, é executado e recebe os erros gerados pelo back-end.

...

...

A directive tl-object é uma das mais importantes directives criadas na arquitetura. Tem como responsabilidade indicar em qual objeto estamos trabalhando em uma determinada UI e em qual contexto que estamos trabalhando, listagem ou detalhe, além de inicializar a busca de mensagens para a internacionalização.  Através de herança, outras directives utilizam-se destas duas característica para implementar suas funcionalidades e manipular a UI conforme necessário. 

Abaixo temos um exemplo prático da utilização desta directive em dois contextos diferentes; tela de listagem e detalhe de períodos.

<div id="content" tl-object="period" tl-context="list">
 
	<!-- ... -->
 
	<!-- body -->
 
	<!-- ... -->
 
</div> 

Neste exemplo temos um outer div, ou seja, um div que engloba todos os outros elementos presentes na partial, utilizando a directive tl-object. Quando identificada, o seu construtor é executado e a partir dos valores de atributos em elementos HTML, incializa-se a busca de mensagens para a internacionalização.Toda e qualquer funcionalidade executada por outras directives nesta partial, incorporarão dois parâmetros na sua execução: objeto de negócio e contexto de visualização.

...

Listagem de atributos disponibilizados pela directive tl-object:

...

Além das funcionalidades e comportamentos acima, a directive tl-object possibilida que outras directives se registrem (através de callbacks) e sejam alertadas quando o back-end retornar as mensagens internacionalizadas. Esta directive faz uso do MessageProvider para inicializar a busca por mensagens de internacionalização.

TL Key

A directive tl-key foi criada para atender o requisito de internacionalização e a padronização de leiaute para mensagens e validações. Esta directive faz uso da directive tl-object, afim de obter o contexto da partial e então renderizar estes elementos no formato apropriado. A tl-key também utiliza a directive tl-object para registrar-se e obter as mensagens assim que a busca for finalizada pelo MessageProvider .

TL Ref

Além das funcionalidades e comportamentos acima, a directive tl-object possibilida que outras directives se registrem (através de callbacks) e sejam alertadas quando o back-end retornar as mensagens internacionalizadas. Esta directive faz uso do MessageProvider para inicializar a busca por mensagens de internacionalização.

Abaixo temos um exemplo prático da utilização desta directive em dois contextos diferentes; tela de listagem e detalhe de períodos.

<div id="content" tl-object="period" tl-context="list">
 
	<!-- ... -->
 
	<!-- body -->
 
	<!-- ... -->
 
</div> 

Neste exemplo temos um outer div, ou seja, um div que engloba todos os outros elementos presentes na partial, utilizando a directive tl-object. Quando identificada, o seu construtor é executado e a partir dos valores de atributos em elementos HTML, incializa-se a busca de mensagens para a internacionalização.Toda e qualquer funcionalidade executada por outras directives nesta partial, incorporarão dois parâmetros na sua execução: objeto de negócio e contexto de visualização.

TL Key

A directive tl-key foi criada para atender o requisito de internacionalização e a padronização de leiaute para mensagens e validações. Esta directive faz uso da directive tl-object, a fim de obter o contexto da partial e então renderizar estes elementos no formato apropriado e, para registrar-se e obter as mensagens de internacionalização assim que a busca for finalizada pelo MessageProvider.

Listagem de atributos disponibilizados pela directive tl-key:

Abaixo temos um exemplo prático da utilização desta directive em dois contextos diferentes, tela de listagem e detalhe de períodos, e a estrutura final destas telas após a execução das directives.

<div id="content" tl-object="period" tl-context="list">
 	
	<h2 tl-ref="search.period" tl-key="title"/>
 

	<!-- ... -->
 
</div> 

Em sua execução, alguns elementos serão acrescentados e/ou modificados baseado no contexto adquirido através da directive tl-object.

TL Ref

A directive tl-ref visa facilitar a vida do desenvolvedor. Em conjunto com a directive tl-key, é possível criar referencias para chaves evitando a repetição de longos prefixos. Internamente, a directive tl-ref, assim como a directive tl-key, faz uso da directive tl-object a fim de obter o contexto e objeto da partial. Contudo, a tl-ref não manipula, de forma alguma, a árvore DOM, trabalhando unicamente em conjunto com o MessageProvider.

Listagem de atributos disponibilizados pela directive tl-ref:

Abaixo temos um exemplo prático de como esta directive pode ser utilizada para tornar o processo de desenvolvimento mais produtivo, evitando repetições de prefixos em chaves de internacionalização.

<div tl-object="company" tl-context="detail" tl-dialog tl-opened="detailDialog.isOpen">
 	
	<!-- ... -->
 
	<!-- Neste elemento é declarado o tl-ref, informando que todos os filhos deste nó referenciarão model.company -->
	<div class="dialog-page-body" tl-ref="model.company as model">

            <form class="aui">
                <div class="dialog-panel-body panel-body">

                    <div class="field-container">
 
						<!-- Este elemento é filho da div onde declaramos o tl-ref, ou seja, este tl-key agora é mapeado para "model.company.name" eliminando
a necessidade de informar o prefixo model.company -->
                        <input type="text" class="field-medium" tl-key="name" ng-model="model.0x1.name" />

                    </div>
 
				<!-- ... -->
 
	<!-- ... -->
 
</div> 

Internamente, no momento de execução do construtor da directive tl-ref, todas as mensagens presentes no MessageProvider, que estão no formato raw, são processadas conforme a referencia informada para a directive e colocadas em cache.

TL Find

A directive tl-find disponibiliza busca genérica a partir da interação do usuário com a UI sem a necessidade implementar as chamadas HTTP e event handlers. A partir de um objeto preenchido pelo usuário via data-binding (uso da directive ng-model), internamente a directive percorre os atributos deste objeto e monta uma consulta padrão. Esta consulta padrão leva em consideração os tipos de dados e é construída através de cláusulas AND (por padrão) e a concatenação dos atributos e valores do objeto. 

Listagem de atributos disponibilizados pela directive tl-find:

Abaixo temos um exemplo prático de como esta directive pode ser utilizada para realizar buscas genéricas de qualquer entidade já persistida no back-end.

<!-- partial que possui a estrutura apresentada para o usuário, com campos que estão mapeados (estes campos estão omitidos para simplicar o exemplo) em um objeto de nome 'model' no controller deste partial -->
<div id="content" tl-object="company" tl-context="list">
 	
	<!-- ... -->
 
	<!-- este botão contem a directive tl-find, na qual recebe o objeto model que contem os valores preechidos pelo usuário -->
	<!-- também esta mapeado o atributo tl-result, no qual diz que a resposta desta busca deve ser mapeada para o objeto 'list' presente no scope do controller desta partial -->
	<button class="aui-button align-right" tl-ref="common" tl-key="button.search" tl-find="model" tl-result="list" />

	<!-- ... -->
 
</div> 

Quando ocorrer um evento de click neste botão, a directive tl-find irá ler o objeto model, construir a consulta, realizar as chamadas ao back-end e preencher o objeto do tipo Array com nome list. Qualquer falha durante neste processo é descartada silenciosamente e a operação é interrompida.

TL Dialog

A directive tl-dialog quando aplicada em um elemento do tipo block, faz com que todos os elementos filhos sejam encapsulados em um container maior que é representado visualmente como um dialog. Esta directive também fornece um objeto a nível de controller, possibilitando que o desenvolvedor manipule suas propriedades de visibilidade.

Para criar este dialog, a factory $dialog esta disponível através de injeção de dependências e fornece métodos para criar um objeto do tipo Dialog. Uma referencia deste objeto deve ser informado em alguns atributos da directive, realizando a ligação entre as interações do controller, dialog e directive.

Listagem de atributos disponibilizados pela directive tl-dialog:

Abaixo temos um exemplo prático de como esta directive pode ser utilizada para termos a representação visual de dialogs para o usuário.

<!-- elemento div (do tipo block) que sinaliza para a arquitetura que este deve ser um dialog através do atributo tl-dialog -->
<!-- o atributo tl-opened referencia um objeto do tipo "Dialog" e a variável do tipo Boolean "isOpen" -->
<div tl-object="company" tl-context="detail" tl-dialog tl-opened="detailDialog.isOpen">

Durante a sua execução, a directive tl-dialog transforma este elemento em um dialog e controla sua visibilidade através da referencia passada para o atributo tl-opened.

Abaixo temos uma representação visual da directive tl-dialog da tela detalhe de Companhias da aplicação Shield.

Image Added

TL Submit

A directive tl-submit, assim como a directive tl-find, executa operações no back-end utilizando os endpoints que expoe os métodos genéricos da arquitetura. Porém, a directive tl-submit realiza operações de edição, remoção e adição enquanto a directive tl-find executa apenas buscas genéricas.

Listagem de atributos disponibilizados pela directive tl-dialog:

TL Action 

Âncora
directive-tl-action directive-tl-action

A directive tl-action habilita a edição, deleção e visualização de dados já persistidos pelo back-end através do componente de dropdown list da Atlassian. Esta directive é utilizada em conjunto com o elemento <table> e com a directive tl-action-model para possibilitar que outros controlers recebam os dados. Cada linha da tabela renderiza um botão mostrando o menu de ações que podem ser executadas pelo usuário em um determinado objeto.

Listagem de atributos disponibilizados pela directive tl-action:

Abaixo temos um exemplo prático de como esta directive pode ser utilizada para habilitarmos as ações que podem ser tomadas pelo usuário de forma automática.

<table class="aui">
 
	<!-- ... -->
	
	<!-- neste exemplo a directive esta recebendo o objeto 0x1 do tipo array, através do atributo tl-action em conjunto com ng-repeat -->
	<tr ng-repeat="company in list.0x1" tl-action="list.0x1">
		<td>{{company.name}}</td>
    	<td>{{company.abbreviation}}</td>
    	<td>{{status[company.enabled]}}</td>
	</tr>
 
	<!-- ... -->
 
</table>

Durante sua execução, a directive tl-action altera os elementos <tr> para incluir a estrutura do menu e disponibilizar as funcionalidades de edição, visualização e deleção.

Abaixo temos uma representação visual da directive tl-action da tela listagem de Companhias da aplicação Shield.

Image Added

TL Action Model 

Âncora
directive-tl-action-model directive-tl-action-model

A directive tl-action-model recebe o objeto em que ocorreu a ação do usuário, através da directive tl-action e atribui para o scope onde ela esta presente. A fim de padronizar as ações de usuário, usualmente dois controllers e duas partials são criadas para representar uma determinada entidade; listagem e detalhe, respectivamente. Conforme esta estrutura, utiliza-se a directive tl-action na tela de listagem e a directive tl-action-model na tela de detalhe para habilitar a manipulação de dados a partir de ações realizadas na directive tl-action.

Listagem de atributos disponibilizados pela directive tl-dialog:

Abaixo temos um exemplo prático de como esta directive pode ser utilizada para habilitarmos as ações que podem ser tomadas pelo usuário de forma automática.

<!-- o objeto que sofreu a ação através da directive tl-action será transportado para este controller e atribuído a variável de scopoe 'model'  -->
<div ng-controller="CompanyAddDialogCtrl" tl-action-model="model">
</div>

Durante sua execução, as directives tl-action e tl-action-model trocam mensagens utilizando o sistema de eventos do AngularJS para transportar os objetos que sofreram ações nas  telas de listagem.

TL Calendar

A directive tl-calendar disponibiliza o widget de calendário da API AUI da Atlassian. Esta directive funciona como um wrapper para a funcionalidade já implementada, facilitando a integração com o AngularJS e eliminando instruções em Javascript que manipulam a HTML DOM.

Listagem de atributos disponibilizados pela directive tl-calendar:

Abaixo temos um exemplo prático de como esta directive pode ser utilizada para habilitarmos um calendário de fácil usabilidade para o usuário final.

<!-- ... -->
 
	<!-- no input abaixo temos a presença da directive tl-calendar que transforma este input em um calendário  -->
	<input tl-calendar ng-model="view.startDate" tl-key="startdate" ng-change="splitStartDate()">
<!-- ... -->

Durante sua execução, a directive tl-calendar transforma esta directive anexando <div>s para construir a estrutura HTML necessária para montar o calendário.

Abaixo temos uma representação visual da directive tl-calendar da tela detalhe de Períodos da aplicação Shield.

Image Added

TL Tab

A directive tl-tab disponibiliza o widget de tab-panels (abas). Dividida em dois atributos, tl-tabset e tl-tab, a directive tl-tab estrutura as abas de forma hierárquica. O atributo tl-tabset deve estar presente em um outer element ou nó pai, tendo como nós filhos o número desejado de elementos <div> contendo o atributo tl-tab.

Listagem de atributos disponibilizados pela directive tl-calendar:

Abaixo temos um exemplo prático de como esta directive pode ser utilizada para habilitarmos um calendário de fácil usabilidade para o usuário final.

<!-- inicializa este elemento como nó pai de todas as abas, controlando sua visibilidade -->
<div tl-tabset>
		
	<!-- transforma esta div em uma aba, internacionaliza seu título através da directive tl-key e determina a visiblidade através do atributo active apontando para a variável "active" nos objetos "view.tabs.dates" -->
	<div tl-tab tl-key="detail.period.dates" active="view.tabs.dates.active">
 
	<!-- ... -->
 
</div>

Abaixo temos uma representação visual da directive tl-tab da tela detalhe de Períodos da aplicação Shield.

Image Added