How can I read URL parameters in AngularJS?

Question

I'm trying to make a blog using AngularJS. The home page queries a third party service of mine that returns an array of all my articles/posts. I am displaying shortened versions of these posts on the home page, and want to have "read more" under each post that passes that post's ID through a URL parameter to another HTML page:

index.html:

<div ng-controller="blogCtrl" id="blog">
    <div class="post" ng-repeat="post in posts">
      <div class="header"> 
        <h1>{{ post.fields.title }}</h1>
        <p class="date">{{ post.sys.createdAt | date}}</p>
      </div> 

      <p>{{ post.fields.body | cut:true:1600:' ...'}}</p>

      <a href="post.html?id={{ post.sys.id }}">read more</a>
    </div>
  </div>

What do I need to do in post.html so that I can read the value of id in the URL parameter? Do I need to create a new angularJS app in post.html ?

edit:

I've changed the read more link to <a href="post/{{post.sys.id}}"> and i am trying to set up the following route:

app.config(function($routeProvider){
  $routeProvider
  .when('/post/:postid',{
    templateUrl: '/post.html',
    controller: 'postCtrl' 
  })
});

However, clicking the "read more" link doesn't load up post.html , but instead a page that says File not found: /post/2B1K9K2DHqsYaGYcms2YeW . The route doesn't seem to be getting properly set up, since post.html isn't getting loaded.

Answer 1

This isn't all that hard to do, but you need to have routing set up on your app. You can create this functionality in your existing app, or separate it into a new one, it's up to you. Here are the relevant things you'll need to include in your code:

In your app include ngRoute as a dependency:

var myApp = angular.module('myApp', ['ngRoute']);

Also include routing config for your app:

myApp.config(function($routeProvider){

    $routeProvider
        .when('/someroute', {
            templateUrl: 'someFolder/withSomeFile.html'
        }
        .when('/someroutewithparamters/:aftercolonisparameter', {
            templateUrl: 'someFolder/post.html'
        }

});

You can include a default route as well, but it's not necessary if you'd rather not. Be sure to include angular-route.js in your index.html for this to work.

Now in your controller you can simply do something like:

myApp.controller('postCtrl', function($routeParams, $scope, postFactory){

     $scope.post = postFactory.functionToLoadPost($routeParams.aftercolonisparameter);

});

Obviously this will be different for your implementation based on how everything is set up, and you'll probably want to pick better names for your elements than I did, but those are the things you'll need in place to make this work. It's actually pretty straightforward.