Histórico da Página
...
- <contexto da aplicação>/<contexto da view>/html/<view>/<view>.js
Para possibilitar esta estruturação e carregamento dinâmico, foi utilizado o AngularJS UI Router para permitir sejam feitas views com sub-view.
O arquivo <view>.js deverá ser um descritor de 'estados' para a view. Por padrão o framework procura por um 'state' do tipo '.start' para iniciar a view caso não seja especificado um 'state' na própria chamada.
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
appStateConfig.$inject = define(['$stateProviderindex', '$urlRouterProvider']; function appStateConfig($stateProvider, $urlRouterProvider/html-sample/html/country/country-services.js'], function(index) { // index.stateProvider = $stateProvider; // Views padrões da aplicação que não possuem 'states'. $stateProvider.state( 'aboutInicializa os states da aplicação. index.stateProvider // Estado pai, a hierarquia de states é feita através do '.', e todo estado novo // tem que ter um estado pai, que nesse caso é abstrato. Este status precisa // apenas de uma template com o elemento <ui-view> para conter os estados filhos. .state('html-sample/country', { abstract: true, template: '<ui-view/>' }) // Estado inicial da tela deve ser o estado pai com o sufixo '.start' este estado // será ativado automaticamente quando a tela for carregada. // // A URL deve ser compatível com a tela inicial. // // No estado também definimos o controller usado na template do estado, e definimos // o nome do controller em 'controllerAs' para ser utilizado na view. // também definimos a template ou templateUrl com o HTML da tela da view. .state('html-sample/country.start', { url: '/html-app/aboutsample/country/', controller:'framework.country-list.Control', controllerAs: 'controller', templateUrl: '/html-appsample/html/country/aboutcountry.list.html' } ).state( 'blank) // Notar que outros estados também são filhos com sufixos conforme o objetivo da tela, // assim como o padrão da URL, controller e template. .state('html-sample/country.detail', { url:'/html-sample/country/detail/:id', controller:'framework.country-detail.Control', controllerAs: 'controller', templateUrl:'/html-sample/html/country/country.detail.html' }) .state('html-sample/country.edit', { url: '/html-sample/country/edit/:id', controller: 'framework.country-edit.Control', controllerAs: 'controller', templateUrl: '/html-appsample/html/country/blankcountry.edit.html' } ); } // appStateConfig index.config(appStateConfig); }) .state('html-sample/country.new', { url: '/html-sample/country/new', controller: 'framework.country-edit.Control', controllerAs: 'controller', templateUrl: '/html-sample/html/country/country.edit.html' }); }); |
Observação: Com a utilização do RequireJS é possível separar o carregamento dos estados para a view dos serviços para a mesma. Portanto, ao definir o descritor de estados podemos solicitar que o mesmo carregue os arquivos de serviços para a view (country-services.js), caso o mesmo já não tenha sido carregado, para isto basta adicionar o caminho completo do arquivo na definição de dependências do RequireJS conforme exemplo acima.