Imagine esta simples aplicação AngularJS usando o angular-ui-router:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> <script src="js/app.js"></script> </head> <body ng-app="App" ng-controller="MainController"> <div ui-view></div> </body> </html>
angular.module('App', ['ui.router']) .config(function ($stateProvider, $urlRouterProvider, routerProvider) { $stateProvider .state('home', { url: '/home', templateUrl: 'templates/home.html' }); $urlRouterProvider.otherwise('/home'); }) .controller('MainController', function ($scope, router) { $scope.reload = function() { router.setUpRoutes(); }; }) ;
Definimos apenas um estado chamado “home”. Se precisamos de mais estados, apenas adicionamos mais na função config(). Neste artigo, vamos tentar adicionar mais estados a partir de um arquivo json em vez de codar os estados diretamente no código.
Vamos criar nosso arquivo json com as definições de estado:
{ "xxx": { "url": "/xxx", "templateUrl": "templates/xxx.html" }, "yyy": { "url": "/yyy", "templateUrl": "templates/yyy.html" }, "zzz": { "url": "/zzz", "templateUrl": "templates/zzz.html" } }
Agora nossa aplicação fica assim:
angular.module('App', ['ui.router', 'Routing']) .config(function ($stateProvider, $urlRouterProvider, routerProvider) { $stateProvider .state('home', { url: '/home', templateUrl: 'templates/home.html' }); $urlRouterProvider.otherwise('/home'); routerProvider.setCollectionUrl('js/routeCollection.json'); }) .controller('MainController', function ($scope, router) { $scope.reload = function() { router.setUpRoutes(); }; }) ;
Como você pode ver, estamos usando o ‘Routing’
angular.module('Routing', ['ui.router']) .provider('router', function ($stateProvider) { var urlCollection; this.$get = function ($http, $state) { return { setUpRoutes: function () { $http.get(urlCollection).success(function (collection) { for (var routeName in collection) { if (!$state.get(routeName)) { $stateProvider.state(routeName, collection[routeName]); } } }); } } }; this.setCollectionUrl = function (url) { urlCollection = url; } }) .run(function (router) { router.setUpRoutes(); });
‘Routing’ oferece um provider chamado “router”, que busca o arquivo json e constrói os estados.
Essa é uma prova conceito.
Há alguns problemas – e por favor me diga se você conseguir resolve-los:
- Como estamos carregando os estados a partir de uma conexão http, a aplicação em Angular não tem todos os estados quando inicia, então é preciso criar ao menos o primeiro estado da forma tradicional.
- É possível fazer um reload nos estados com a aplicação rodando. Também é possível adicionar novos estados, mas não modificar os já existentes.
Você pode ver um projeto de exemplo na minha conta no GitHub.
***
Artigo traduzido pela Redação iMasters com autorização do autor. Publicado originalmente em http://gonzalo123.com/2014/06/30/setting-up-states-from-a-json-file-in-angularjs-applications/