在 AngularJS 应用中通过 JSON 文件来设置状态

想象一个使用简单的angular UI路由的 angularjs 应用:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="https://www.linuxidc.com/bower_components/angular/angular.js"></script>
    <script src="https://www.linuxidc.com/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="https://www.linuxidc.com/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();
        };
    })
;

我们仅定义了一个称为 'home'的状态。如果我们需要更多的状态,只需要在 config() 增加更多的function即可。在这篇文章中,我们将会使用JSON文件方式添加更多的状态,而不是在代码中去写死。

Linux下JSON库的编译及代码测试

jQuery 获取JSON数据[$.getJSON方法]

用jQuery以及JSON包将表单数据转为JSON字符串

下面是我们在JSON中定义的状态:

{
    "xxx": {
        "url": "/xxx",
        "templateUrl": "templates/xxx.html"
    },

"yyy": {
        "url": "/yyy",
        "templateUrl": "templates/yyy.html"
    },

"zzz": {
        "url": "/zzz",
        "templateUrl": "templates/zzz.html"
    }
}

现在我们的应用变成这样了:

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();
        };
    })
;

我们可以看到现在正在使用 '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' 提供了一个叫做 'router' 的provider方法可以获取到JSON文件并构建各种状态。

这是一个设想的证明过程。

还有一些问题 (如果你知道怎么解决请告诉我):

直到我们从一个http请求加载了各种状态为止, angular 应用在加载的时候没有得到所有的状态, 所以我们要使用老的方式至少加载第一个状态。

我们可以在应用运行的时候重新加载状态。我们可以新加状态,但是我们没法改变已经存的的状态。

你可以在我的 github 帐户上看例子。

带你走近AngularJS系列

带你走近AngularJS - 基本功能介绍

带你走近AngularJS - 体验指令实例

带你走近AngularJS - 创建自定义指令

如何在 AngularJS 中对控制器进行单元测试

AngularJS 之 Factory vs Service vs Provider

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/64ab94cf16c778d5b289d82052ef4bfd.html