Estrutura dos arquivos da tela
Todas as telas do framework deverão estar contidas em uma pasta dentro de um WebContainer, para esse exemplo vamos assumir que uma pasta chamada html-sample ira ser disponibilizada por um WebServer no contexto html-sample.
Para carregar uma tela, o framework procura por um arquivo de entrada para a tela, para este exemplo vamos assumir que a tela para o framework fica na URL /html-sample/message, note que aperar desta URL, o framework irá procurar um arquivo JS (JavaScript) na seguinte URL: /html-sample/html/message/message.js, essa URL é montada, onde o contexto é a primeira parte da URL do framework, seguida de html, seguida de uma pasta com o nome da tela (segunda parte da URL do framework) e o arquivo com o nome da tela com extensão JS.
Obs: essa estrutura de duas partes ainda está em discussão.
Tendo essas informações, a estrutura para uma tela de CRUD simples possui os seguintes arquivos dentro da pasta html-sample:
Arquivo | Conteúdo |
---|---|
html-sample/i18n/translations.js | Arquivo JSON com a lista das literais utilizadas pelas tela do contexto html-sample |
html-sample/html/message/message.js | Arquivo JavaScript que o framework chama para inicializar os states da tela |
html-sample/html/message/message-services.js | Arquivo JavaScript que registra os services que a tela precisa utilizar |
html-sample/html/message/message-controllers.js | Arquivo JavaScript que registra os controllers que a tela precisa utilizar |
html-sample/html/message/message.list.html | Arquivo HTML da tela de listagem dos registros da tabela |
html-sample/html/message/message.search.html | Arquivo HTML da tela de parâmetros de pesquisa avançada de registros |
html-sample/html/message/message.detail.html | Arquivo HTML da tela de visualização de um registro da tabela |
html-sample/html/message/message.edit.html | Arquivo HTML da tela de alteração/inclusão de um registro da tabela |
Internacionalização I18N
O filtro de i18n do framework depende de uma lista de literais que é carregado em algum momento, essa lista de literais, atualmente, é um aquivo chamado translation.js que é um arquivo JSON com um array Javascript com as literais das telas do contexto em que ele está inserido.
Para a nossa tela de exemplo, utilizamos o seguinte conteúdo:
Arquivos da tela
Como dito, a tela será chamada no arquivo principal, neste exemplo, message.js, esse arquivo deve registrar todos os recursos que a tela necessida pra fucnionar, como controllers, services e states.
Neste exemplo vamos separar os states dos outros recursos.
Os states da tela, é definição de cada um dos estados da tela, a definição de cada state define para a tela:
- id - identifica um state, deve ser unico para toda a aplicação, como sugestão todos os states da tela iniciam com a URL para a tela
- url - identifica a URL do state, é interessante ter, pois permite que seja feito um link para a tela abrir diretamente um state específico.
- controller - identifica qual controller deverá ser utilizado para o state, controllers podem ser utilizados para 1 ou mais states
- controllerAs - por convenção do framework, sempre será 'controller'
- templateUrl - é a localizaçao do template da tela, no caso cada state pode ter o seu template ou varios states podem compartilhar a mesma template.
- abstract - é um parametro para o state raiz da tela, a api de states funciona com uma hierarquia.
- template - caso um state não tenha uma templatem em uma URL, o conteudo da template pode ser definido neste parametro.
Mais informações a respeito da api de states, deve ser verificado na seguinte URL: https://github.com/angular-ui/ui-router/wiki
O arquivo principal tambem deve definir os outros recursos que a tela irá utilizar, mas como estamos separando os controllers e services para outro arquivo JS, utilizamos os recursos do requirejs para carregar e executar os arquivos auxiliares.
Para nossa tela de exemplo, o arquivo principal da tela possui o seguinte conteudo:
No próximo passo vamos criar os templates para as telas do CRUD