How to use Dynamic URL's to create Dynamic pages in Angular JS

Question

I have put the question at the bottom as the only way I could explain my problem was with an example so with out the example it might not make sense but feel free to skip down to the bottom and just read the question.

I will use this example to try give some idea of what I do understand and where my understanding falls down.

I want to build a page where I can browse through a collection of items which I would set up like this:

angular.module('App')
  .config(['$stateProvider', function ($stateProvider) {
    $stateProvider
      .state('browse', {
        url: '/browse',
        templateUrl: 'app/browse/browse.html',
        controller: 'BrowseCtrl',
        title: 'Browse',
        mainClass: 'browse'
      });
  }]);

Each item is pulled through and place on this page using ng-repeat and then calling an api:

    $scope.items = [];
    $http.get('/api/items').success(function(items) {
      $scope.items = items;
      socket.syncUpdates('Item', $scope.items);

      $scope.totalItems = $scope.items.length;
      $scope.$watch('currentPage + itemsPerPage', function() {
        var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
          end = begin + $scope.itemsPerPage;

        $scope.filteredItems = $scope.items.slice(begin, end);
      });

    });

This then accesses the api and repeats out the items. So far so good. Heres an example of the API setup. Worth mentioning I am using the Angular-fullstack generator which plugs in to Mongo DB using Express & Sockets.io

Item.find({}).remove(function() {
  Item.create({
    "image_url" : "../../../assets/images/test.jpg",
    "title" : "Test Item",
    "created_on" : new Date(2014, 9, 23, 3, 24, 56, 2),
    "creator" : {
      "profile_img" : "../../../assets/images/stephanie-walters.jpg",
      "username" : "StephW",
      "url" : "/stephanie-walters",
      "first_name" : "Stephanie",
      "last_name" : "Walters",
    }
  }

Ok now this is where things start to get unclear for me.

I now need to create the item pages, so that when I click on an item I get access to the content of that item. Short of creating every single page for every entry I would very much like to be able to create a page template that ui-router is able to attach content to when the correct url structure is met.

Thats probably not clear so let me try be a bit clearer. Lets say if we follow that JSON above I want to go to 'Stephanie Walters' profile I am going to need three things.Firstly a profile template, secondly I need the content for the profile in an api call and lastly a dynamic url that can take that api content and put it in to the page template.

Perhaps something similar to:

.state('profile.username', {
    url: '/:username',
    templateUrl: '/partials/profile.username.html',
    controller: 'profileUsernameCtrl'
})

But I don't exactly understand how to get the take a variable like username from the item JSON(above) and then use that to build a URL /:username that connects to a template page profile.username.html and further still fill that page with the users content that is stored in another API call.

craigb · Accepted Answer · 2014-07-26 15:00:32Z

2

To "build a url" so to speak, you need to use the ui-sref directive.

Given a state like so:

.state('profile.username', {
    url: '/:username',
    templateUrl: '/partials/profile.username.html',
    controller: 'profileUsernameCtrl'
})

to create a link to this state use:

<a ui-sref="profile.username({username: user.name})">{{ user.name }}</a>

where user is an attribute on the scope where that link is displayed.

For more complex URLs you just add additional parameters like so:

.state('browse.item', {
    url: '/:username/:itemId'
})

To get the parameters you use the $stateParams service in your controller like so:

.controller('MyController', function($scope, $stateParams) {
    $scope.username = $stateParams.username;
    $scope.itemId = $stateParams.itemId;
})

edited Jul 26, 2014 at 15:00

answered Jul 24, 2014 at 1:06

craigb

16.9k7 gold badges54 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daimz Over a year ago

Ok so that would gets me set up with the url. How do I then fill that page with the content for url: '/:username/:itemId'. I some how need to do a $http.get('/api/items').success(function(items) or something similar for the content of that user. Perhaps thats what you where meaning here:

.controller('MyController', function($scope, $stateParams) { $scope.username = $stateParams.username; $scope.itemId = $stateParams.itemId; })

But I didn't really understand that part.

Daimz Over a year ago

Ok I have managed to get the :itemId to create the url and so that when clicked it creates the item page. Now my problem is $scope.itemId = $stateParams.itemId; is a part of the controller so I can do <h1>{{ itemID }}</h1> and that works. But I can't access anything else. I want to get all the information of that user not just the users id or username. Do I somehow have to do an api call using the id?

craigb Over a year ago

Yes, now you ave the user and item ids you can make whatever $http calls needed to get the data. You could do it in the controller with $http but better way would be to encapsulate your service calls in an angular "service". Either way you now have the state you need to get the data.

Collectives™ on Stack Overflow

How to use Dynamic URL's to create Dynamic pages in Angular JS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related