How to dynamically add routes to angularjs from database

Question

I am creating an NodeJs + AngularJS Application. I have list of Hotels stored into database. I want to create dynamic route based on the hotel name and the load partial view based on property ID.

E.g In my database I have:

HotelID         HotelName                       

1               example hotel                   
2               second example hotel            
3               third example hotel

In app.js I want something like this

var hotelierApp = angular.module('hotelierApp', ['ngRoute', 'ngCookies', 'pascalprecht.translate', 'hotelierApp.services', 'hotelierApp.directives', 'hotelierApp.filters', 'hotelierApp.controller']);
hotelierApp.run(function ($rootScope) {
$rootScope.langId = 1;
})
hotelierApp.config(['$routeProvider', '$locationProvider', '$translateProvider',
function ($routeProvider, $locationProvider, $translateProvider) {

    angular.forEach(hotels, function (hotel) {
  $routeProvider.when(hotel.name.replace(" ","-"), { templateUrl: 'partials/property', controller: propertyCtrl });
});

angular.forEach(reviews, function (review) { $routeProvider.when(review.title.replace(" ","-"), { templateUrl: 'partials/review', controller: reviewCtrl }); });

    $locationProvider.html5Mode(true);

    $translateProvider.useStaticFilesLoader({
        prefix: 'data/locale-',
        suffix: '.json'
    });
    $translateProvider.preferredLanguage('en');
    $translateProvider.useLocalStorage();
}

]);

Here Hotels/reviews will be the list coming from database by making api calls and also I want to pass their corresponding Ids as route params to the controller.

I have many other section in my application for which i have to create routes from database.

Please help.

Regards, - Manoj

score 3 · Answer 1 · answered Jun 10 '14 at 11:45

3

There is no reason you need to do that.

i'm pretty sure your routes can be factored into something like

$routeProvider.when("/:id/:name", { 
templateUrl: 'partials/property', controller: propertyCtrl })

then use $routeParams to get name of the hotel in your controller.As for template urls,your can pass a function instead of a string that will resolve the name of the template you need to use.

templateUrl:function(pathParms){...}

So no need to use angular.forEach.

answered Jun 10 '14 at 11:45

mpm

20,148
7
50
55

No actually. For above example I want my routes to be like: abc.com/example-hotel abc.com/second-example-hotel abc.com/third-example-hotel In the same way for Reviews my routes will be like abc.com/examp-review abc.com/secon-review-example abc.com/thi-hote-reew-exmples So basically for all records in my database, I will have multiple routes for hotels but single view and accordingly I will have multiple routes for reviews but single view. This is the reason I Want to call API to get hotels/reviews and then loop through the records and then create routes.e.g: http://www.florahospitality.com – Manoj Jun 10 '14 at 12:10
And you can do that with my solution,all you need to do is to query the database to resolve the name of the hotel on route change.You dont have to load anything from the database upfront. – mpm Jun 10 '14 at 12:25
Can you please provide me some example as how to resolve this ? – Manoj Jun 10 '14 at 13:09

score 0 · Answer 2 · answered Jun 30 '14 at 12:56

While this is using another router: http://dotjem.github.io/angular-routing/ the same stuff is possible in tne core router.

Here is illustrated what @mpm is saying you can do: http://plnkr.co/edit/8XuJswpx0FucwMczWTHF?p=preview

In your case I think Option1 would be most appropriate, this is because you talk about a generated url pr. hotel, which makes me assume that there is a large similarity in layout for all hotels.

When that is the case, they may as well share template, where you can just populate the template with the hotel specific data.

How to dynamically add routes to angularjs from database

2 Answers2