Good day.

There is a collection of routes of length N. The i-th element contains properties, say, url and name. Required to configure on the main page routes to url'am specified in this array.

In HTML, as I understand it, a code like this comes out:

<ul> <li ng-repeat="route in routes"><a ui-sref="{{route.url}}">{{route.name}}<a></li> </ul>

The i-th ui-sref points to the i-th url.

I can not figure out how in this case to register in the config $ stateProvider. Normal code like this

 $stateProvider .state('page0', { url: 'page0', templateUrl: 'page0.htm', })

as I understand it, does not fit here, because At the configuration stage, there is no routes collection yet. How to do this at runtime dynamically? Ideally it would be in the form of a function that passes through the routes collection, and adds routes to $ stateProvider

  • Do your routes collection change often? If not often, then I see no reason to fill $stateProvider dynamically. - Stepan Kasyanenko
  • Well, you imagine that there are only, let's say, 33. For example, links to resources sorted by letters of the alphabet. Only 33 links by number of letters. - user211576 1:32 pm

1 answer 1

To be honest, I do not see the point in creating routings dynamically.

But if you really need, you can do so.

An example on jsfiddle .

 angular.module('ExampleApp', ["ui.router"]) .config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); //Статический роутинг $stateProvider .state('a', { url: '/a', template: '<h2>A template</h2>' }); //Добавляем данные по роутингу, загруженные через AJAX. angular.forEach(ROUTES, function(item) { $stateProvider .state(item.name, { url: '/' + item.url, template: '<h2>' + item.name + ' template</h2>' }) }) }); var ROUTES; angular.element(document).ready(function() { //После загрузки страницы, запрашиваем наши данные по роутингу $.ajax("/getRoutes", { complete: function(data) { //допустим, что data- массив вида [{name:"c",url:"c"}] ROUTES = [{ name: "c", url: "c" }]; //Запускаем приложение angular вручную, после загрузки всех роутингов. angular.bootstrap(document, ['ExampleApp']); } }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script> <div> <a ui-sref="a">Static</a> <a ui-sref="c">Dynamic</a> <div ui-view></div> </div>

Without jQuery .

An example on jsfiddle .

 angular.module('ExampleApp', ["ui.router"]) .config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); //Статический роутинг $stateProvider .state('a', { url: '/a', template: '<h2>A template</h2>' }); //Добавляем данные по роутингу, загруженные через AJAX. angular.forEach(angular.module('ExampleApp').ROUTES, function(item) { $stateProvider .state(item.name, { url: '/' + item.url, template: '<h2>' + item.name + ' template</h2>' }) }) }); angular.element(document).ready(function() { //После загрузки страницы, запрашиваем наши данные по роутингу var $injector = angular.injector(['ng', 'ui.router']); var $http = $injector.get("$http"); $http.get("https://google.com").error(function(data) { //допустим, что data- массив вида [{name:"c",url:"c"}] var data = [{ name: "c", url: "c" }]; var app = angular.module('ExampleApp'); //Сохраняем в модуль ExampleApp наши роутинги, что бы не засорять глобальное пространство app.ROUTES = data; //Запускаем приложение angular вручную, после загрузки всех роутингов. angular.bootstrap(document, ['ExampleApp']); }); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script> <div ng-cloak> <a ui-sref="a">Static</a> <a ui-sref="c">Dynamic</a> <div ui-view></div> </div>

  • non-working example in snippet: Failed to instantiate module ExampleApp due to: Error: [$ injector: unpr] Unknown provider: $ stateProvider - Grundy
  • in this form, static routing is not needed, because at the time of application deployment all routes are already available - Grundy
  • Well, ideally, remove jQuery - Grundy
  • Sorry, I didn’t really understand about static routing. If you are talking about routing, which refers to a template , then it is left for comparison with dynamic, so that it would be clear that there is no difference between dynamic and static. - Stepan Kasyanenko
  • If you remove jquery , you have to write an ajax call via XHR . It seems to me that using $.ajax more intuitive for most developers. - Stepan Kasyanenko