在 AngularJS 應用中通過 JSON 文件來設置狀態

jopen 10年前發布 | 20K 次閱讀 JSON開發包 angularjs

想象一個使用簡單的angular UI路由的 angularjs 應用:

<!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></pre> 


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


我們僅定義了一個稱為 'home'的狀態。如果我們需要更多的狀態，只需要在 config() 增加更多的function即可。在這篇文章中，我們將會使用JSON文件方式添加更多的狀態，而不是在代碼中去寫死。


下面是我們在JSON中定義的狀態:


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


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


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


現在我們的應用變成這樣了:


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();
        };
    })
;</pre> 
我們可以看到現在正在使用 '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();
    });</pre> 


'Routing' 提供了一個叫做 'router' 的provider方法可以獲取到JSON文件并構建各種狀態。


這是一個設想的證明過程。


還有一些問題 (如果你知道怎么解決請告訴我):
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！