Geek asks and answers

Dynamic routing in AngularJS. Can I get data from the server before setting up $ routeProvider?

Is there a way to get the server to delete data before setting all the routes to $routeProvider? I want to be able to dynamically configure routes based on this remote data. I tried something like this:

angular.module("myApp").config(["$routeProvider", "$http", function($routeProvider, $http) {
    $http.get("myData").success(function(data) {
        $routeProvider.when(data.dynamicRoute, {
            //route definition
        }
        //or
        $routeProvider.when("/known/route", {
            redirectTo: data.dynamicRoute
        }
    });
}]);

but this leads to the following error:

Unknown provider: $http from myApp

So, I understand that the config function is an injection of providers, not services. However, I still want to know if I can somehow fulfill my ultimate goal? I don’t think I can do this with the help $httpProvider, but please someone will correct me if I am wrong. If there is any fundamental reason why this is simply not possible, explain. Any help with this would be greatly appreciated.

+5
4

.

- . API . - , config. , . , $routeProvider $httpProvider, $route $http, .

, - .

$routeProvider , . - .

, , , $http , . , .

, , ; , , . , .

, , , , , .

, .

+5

100% - !

  • . , json

    {"0":{"id":1,"when":"/","controller":"MainController","template":"app/views/site/main_inner.html"},"1":{"id":2,"when":"/firm/:firmID","controller":"CompanyController","template":"app/views/site/firm.html"},"2":{"id":3,"when":"/search","controller":"SearchController","template":"app/views/site/search.html"}}

  • RouteProvider

      var $routeProviderReference;
 var app = angular.module('myApp', []);

  app.config(['$routeProvider', function($routeProvider) {
  $routeProviderReference = $routeProvider;
  }]);

  • -, run, ajax .

       app.run(['$rootScope', '$http', '$route', function($rootScope, $http, $route) {
    //getting routes
    $http.get('routes.php').success(function (data) {

    angular.forEach(data, function (route) {
        $routeProviderReference.when( route.when, { templateUrl: route.template, controller: route.controller } );
    });
    $routeProviderReference.otherwise({ redirectTo: '/' });
    $route.reload();

});

}]);

. http://blog.brunoscopelliti.com/how-to-defer-route-definition-in-an-angularjs-web-app

+7

: @dnc253 - angular-detour , , json. , , , , json .

, , mergeJson app.js. - /, , , - .:) , , , .

: , JSON, - JQuery , .

:

$.ajax({
  url: "http://example.com/routes"
  }
}).done(function ( data ) {
    angular
        .module('myApp',[])
        .config(function($routeProvider) {
          //read routing instructions from data and call "when" on $routeProvider to define the routes
         });

});

ui-router. , , , , , , .

eazel7, , , . , , , , $http, ( Angular ui-router) t , , , - . , , , , .

, , , , . . , AJAX/JSON . ui-router https://github.com/afterglowtech/angular-detour. , /. . , , .

+4

I think the easiest way to do this is to allow routes later, for example, ask for routes via json. Verify that I am doing the factory from $ routeProvider during the configuration phase through $ provide, so I can continue to use the $ routeProvider object at the startup stage and even in controllers.

'use strict';

angular.module('myapp', []).config(function($provide, $routeProvider) {
    $provide.factory('$routeProvider', function () {
        return $routeProvider;
    });
}).run(function($routeProvider, $http) {
    $routeProvider.when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
    }).otherwise({
        redirectTo: '/'
    });

    $http.get('/dynamic-routes.json').success(function(data) {
        $routeProvider.when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        });
        // you might need to call $route.reload() if the route changed
        $route.reload();
    });
});
+2
source

More articles:


All Articles