Writing a mini blog with $routeParams in AngularJS

Today we’re going to continue with ngRoute, and we’re going to use routeParams. What are these? When we want to refer to a particular post, for example, we will have a dynamic id. Let’s give it a try.

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      template: 'home.html',
      controller: 'homeCtrl'
    })
    .when('/posts', {
      template: '<h1>Posts for my site</h1>'
    })
    .when('/posts/:postId', {
      template: '<h1>This is my cool post</h1>'
    })
});

If we look in the browser and write #/posts/232 we see that when we enter any id we get the “This is my cool post” pattern. It’s very handy when you have some content displayed depending on the url id you entered. It’s this :postId that denotes which parameter in the url will change.

Now let’s add .otherwise.

What is a rule? It is a rule that will be triggered when none of the rules above fit. For example, we entered something that wasn’t expected at all. If we enter a url that doesn’t exist, we will see a 404.

.otherwise({
  template: '404 no such page'
})

Now let’s replace all templates with templateUrl.

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      template: 'home.html',
      controller: 'homeCtrl'
    })
    .when('/posts', {
      template: 'posts.html'
    })
    .when('/posts/:postId', {
      template: 'post.html'
    })
    .otherwise({
      template: '<h1>404 no such page</h1>'
    })
});

Let’s create the posts.html and post.html files.

As we see, templateUrl works correctly and outputs the correct templates.

Now let’s add a postCtrl controller.

<pre class="wp-block-code"><code>.when('/posts/:postId', {
  template: 'post.html',
  controller: 'postCtrl'
})

app.controller('postCtrl', function ($scope, $routeParams) {
  console.log($routeParams);
});</code></pre>

As we can see in the browser, routeParams is an object in which we have a property postId with the value 333. This is because ngRoute gives us the ability in any template controller to access dynamic variables such as postId. Now we can output everything in the controller that relates to that post.

Let’s add postsCtrl

.when('/posts', {
  template: 'posts.html',
  controller: 'postsCtrl'
})

app.controller('postsCtrl', function ($scope) {
  console.log('postsCtrl');
});

In the browser we can see that when we go to /posts, postsCtrl is triggered. Now let’s create a factory in which our posts will be stored.

app.factory('postsFactory', function () {
  return [
    {
      id: 1,
      name: 'Why AngularJS is good?'
    },
    {
      id: 2,
      name: 'I love AngularJS'
    },
    {
      id: 3,
      name: 'Is AngularJS  easy to learn?'
    }
  ];
})

Here we have 3 posts and now we inject postsFactory.

app.controller('postsCtrl', function ($scope, postsFactory) {
  console.log('postsCtrl', postsFactory);
  $scope.posts = postsFactory;
});

Create a new variable $scope.posts and output them in the template.

<h1>Posts</h1>
<div ng-repeat="post in posts">
  <a href="#/posts/{{id}}">{{post.name}}</a>
</div>

In the browser, we can see that we have all three posts displayed. When we click on a post, we go to a specific post.

Now we want the correct content to be displayed when we click on a particular post

app.controller('postCtrl', function ($scope, $routeParams, postsFactory) {
  console.log($routeParams);
  var postId = Number($routeParams.postId);
  $scope.post = _.findWhere(postsFactory, { id: postId });
});

We index postsFactory in the controller and find the right post in the array of posts. When we find our postId, it is string, because it is taken from our url. Number turns it into a number so we can find it correctly in the array.

I added the lodash library to search for items in the array. We want to get the right thing in the array. To do that we use the lodash findWhere method, which takes an array to search and an object with a key to look for.

<h1>{{post.name}}</h1>

In the browser, we see that we have the name of our post displayed when we go to the post. Here we have created a minimal blog with posts.