...
| Itens | Nome | Descrição |
|---|---|---|
| 1 | Recipients | 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. |
| 2 | Directives | 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. |
| 3 | 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 listagem e detail detalhe da arquitetura são partials que compoem a estrutura HTML da aplicação. |
| 4 | 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. |
| 5 | 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. |
...
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.
...
| Informações |
|---|
Todas as diretivas tem uma namespace como prefixo, como por exemplo ng na API do framework AngularJS. Este prefixo serve para que atributos em elementos HTML definidos pela especificação HTML Spec 4.01 não entrem em conflito com nomes de directives. Afim A fim de seguir as boas práticas e evitar problemas advindos de novas especificações, toda directive criada e disponibilizada pela arquitetura é prefixada com a namespace tl. |
...
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 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.
...
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 afim 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.
...
Abaixo temos uma representação visual da directive tl-dialog da tela detalhe de Companhias da aplicação Shield.
...
| Atributos | Parâmetros | Descrição |
|---|---|---|
tl-submit | Object | Este atributo deve especificar objeto que deve ser enviado para o back-end. |
tl-opened | Boolean | Este atributo deve especificar um valor do tipo |
TL
...
Action
| Âncora | ||||
|---|---|---|---|---|
|
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:
| Atributos | Parâmetros | Descrição |
|---|---|---|
tl-action | Array | Recebe um array de objetos, itera esta coleção e modificando a estrutura HTML para incluir as opções para o usuário. |
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.
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<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.
TL Action Model
| Âncora | ||||
|---|---|---|---|---|
|
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:
| Atributos | Parâmetros | Descrição |
|---|---|---|
tl-action-model | Object | Define um objeto em scopo na tela de detalhe que recebe o objeto em que o usuário realizou uma ação na tela de listagem. |
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.
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<div ng-controller="CompanyAddDialogCtrl" tl-action-model="model"> |
Durante sua execução, as directives tl-action e tl-action-model trocam mensagens utilizando o sistema de eventos do AngularJS para