title: How to use Dynamic URL's to create Dynamic pages in Angular JS
body: <p><strong>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.</strong></p>
  
  <p>I will use this example to try give some idea of what I do understand and where my understanding falls down.</p>
  
  <p>I want to build a page where I can browse through a collection of items which I would set up like this:</p>
  
  <pre><code>angular.module('App')
    .config(['$stateProvider', function ($stateProvider) {
      $stateProvider
        .state('browse', {
          url: '/browse',
          templateUrl: 'app/browse/browse.html',
          controller: 'BrowseCtrl',
          title: 'Browse',
          mainClass: 'browse'
        });
    }]);
  </code></pre>
  
  <p>Each item is pulled through and place on this page using ng-repeat and then calling an api:</p>
  
  <pre><code>    $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);
        });
  
      });
  </code></pre>
  
  <p>This then accesses the api and repeats out the items. <strong>So far so good</strong>. Heres an example of the API setup. Worth mentioning I am using the <a href="https://www.npmjs.org/package/generator-angular-fullstack" rel="nofollow">Angular-fullstack generator</a> which plugs in to Mongo DB using Express &amp; Sockets.io</p>
  
  <pre><code>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",
      }
    }
  </code></pre>
  
  <p><strong>Ok now this is where things start to get unclear for me.</strong></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Perhaps something similar to:</p>
  
  <pre><code>.state('profile.username', {
      url: '/:username',
      templateUrl: '/partials/profile.username.html',
      controller: 'profileUsernameCtrl'
  })
  </code></pre>
  
  <p>But I don't exactly understand how to get the take a variable like <code>username</code> from the <code>item</code> JSON(above) and then use that to build a URL <code>/:username</code> that connects to a template page <code>profile.username.html</code> and further still fill that page with the users content that is stored in another API call. </p>