2

I'm using Angular to design the front end of an app, whose content will be dynamically updated based on the contents of a back end database. The database would be accessed through a server that I will use AJAX on to get the data from. My issue is with two things.

The first needs a bit of explanation as to how the website would be structured. In one of the views there's a lot of categories. You can go to a category, which can in turn have another set of categories, and then another and another and so on to infinity... The front end will only get one level at a time - just an array of names and descriptions to display.

I have absolutely no idea how to do that in ngRoute or UI Router.

Then I'll need to have breadcrumbs that route back to the previous views, they need to display the names of the categories you have been through, but the URL is supposed to have the representative IDs of the categories.

An example would be xxx.com/categories/categoryId/categoryId/categoryId/something else

Here's how one category would look:

{
"id": "4",
"name": "AppServers",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
}

Thanks in advance and do excuse the noobiness, I'm new to web development.

Edit: only thing left now is the breadcrumbs. Currently I'm trying to use this:

Breadcrumbs in Angular

But my breadcrumbs still don't work. In case anyone needs my route configuration (I'm running in html5mode):

$routeProvider.
    when('/home', {
        templateUrl: '/components/home/home.html',
        controller: 'HomeController'
    }).
    when('/categories', {
        templateUrl: '/components/categories/categories.html',
        controller: 'CategoriesController'
    }).
    when('/categories/:categoryId', {

    }).
    when('/requests', {

    }).
    when('/requests/:requestId', {

    }).
    when('favorites/:favoriteId', {

    }).
    when('templates/:templateId', {

    }).
    when('/modify', {

    }).
    otherwise({
        redirectTo: '/home'
    });
Community
  • 1
  • 1
SpooXter
  • 119
  • 1
  • 10
  • I believe it's impossible to do an "infinite" dynamic route. But you could try something like xxx.com/categories/categoryId/somethingelse and maintain the history of category navigation into a service. You will use the service to build your breacrumbs. I this is what you need i'll work on an exemple in a plunkr. – Okazari Aug 05 '15 at 14:15
  • 1
    I would use a single route (`/categories`) then create a directive which displays your nesting for you and a service to handle the URL. It's an advanced topic. If you're new to web development I would recommend starting with something less complex! – Ed_ Aug 05 '15 at 14:21
  • I don't have much of a choice in terms of starting with something simpler :P This is not really an exercise. But thanks a lot! Giving me an example of a service sounds awesome! I will be fine with not having the URL update the same way as the breadcrumbs – SpooXter Aug 05 '15 at 14:33

0 Answers0