Configurando estados de um arquivo json em aplicações AngularJS

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/

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by:

Configurando estados de um arquivo json em aplicações AngularJS

Gonzalo Ayuso

Gonzalo Ayuso