Angularjs - dynamic pages, same template, how to access and load article by id

Question

I am slightly puzzled on how to use angularjs to build a blog-like web site.

If you think of an ordinary blog,,, and say,, I am building it using php and mysql.. what I don't understand is how do I make angular get an article based on id..

I can load data for a list of all articles.. I can load data for a single page (from a static json),, I understand how to send http requests,, but how do I access

mysite.com/page?id=1 or 
mysite.com/page?id=2 or 
mysite.com/page?id=3

Obviously, I want to load the same template for each separate blog post.. but I have not yet seen a single example that explains this simply.

If I have three posts in my database with id 1,2,3 how is angular meant to generate links to each individual article? I understand that I can load data to assemble urls but what urls? I suppose I am confused with routing.

Could you recommend a SIMPLE and understandable example of this? Could you suggest how to think about this?

Thanks!

score 11 · Accepted Answer · edited Dec 14 '17 at 20:33

In this short explanation I will use examples based on official tutorial. Propably somwhere in your application you created controllers module with code close to that:

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

// other controllers etc.

blogControllers.controller('BlogPostCtrl', ['$scope',
// more and more of controller code

We will be back here in a moment :) If you have controllers module, you can create a route linked to the specific controller:

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

blogApp .config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      // other routes
      when('/post/:postId', {
        templateUrl: 'partials/blog-post.html',
        controller: 'BlogPostCtrl'
      }).
      // other...
  }]);

Well but what we can do with this :postId parameter? Lets go back to our controller:

blogControllers.controller('BlogPostCtrl', ['$scope', '$routeParams', 'BlogPost',
  function($scope, $routeParams, BlogPost) {
    $scope.post = BlogPost.get({postId: $routeParams.postId});
  }]);

As you see, we are passing $routeParams here and then our BlogPost resource (it will be explained). Simplifying (again), in $routeParams you have all the params that you put in the $routeProvider for exact route (so :postId in our example). We got the id, now the magic happens ;)

First you need to add services and/or factories to your app (and look, we are using ngResource):

var blogServices = angular.module('blogServices ', ['ngResource']);

blogServices.factory('BlogPost', ['$resource',
  function($resource){
    return $resource('action/to/get/:postId.json', {}, {
      query: {method:'GET', params: { postId: 'all' }, isArray:true}
    });
  }]);

Now you know what is our BlogPost in controller :) As you see default value for postId is "all" and yes, our api should retrieve all posts for postId = "all". Of course you can do this in your own way and separate this to two factories, one for details and one for list/index.

How to print all of the blog names? Quite simple. Add list routing without any special params. You already know how to do this so let's skip it and continue with our list controller:

blogControllers.controller('BlogListCtrl', ['$scope', 'BlogPost',
  function($scope, BlogPost) {
    $scope.blogPosts = BlogPost.query(); // no params, so we are taking all posts
  }]);

Voila! All posts in our $scope variable! Thanks to this, they are accessible in the template/view :) Now we just need to iterate those posts in our view, for example:

<ul class="blog-posts">
    <li ng-repeat="blogPost in blogPosts">
        <a href="#/post/{{blogPost.id}}">{{blogPost.title}}</a>
    </li>
</ul>

And this is it:) I hope you will find AngularJS quite easy now! Cheers!

Thanks so much! I still struggle a little but it is becoming easier as I go. I need to master authentication and a few other things and it will get better. — GRowing, Nov 27 '13 at 01:37

score 2 · Answer 2 · answered Nov 26 '13 at 21:31

2

I think what you want to use for this is $routeParams. Have a look at this video from egghead.io which explains how to use it:

http://egghead.io/lessons/angularjs-routeparams

answered Nov 26 '13 at 21:31

Leo Farmer

7,730
5
31
47

This video explains how to pass parameters to a controller. You'll then need to use that parameter to do an AJAX call to get the blog data or HTML for the post contents. – jessegavin Nov 26 '13 at 21:49
OK, I see how I can use this to build my links and pass parameters. I will play with this. When you say AJAX you refer to angularjs $http? I would love to see it in action but this video does help quite a bit. – GRowing Nov 26 '13 at 21:59

score 1 · Answer 3 · answered Nov 26 '13 at 21:34

1

It's a good practice to use hash navigation. So your routing should look like this

mysite.com/blog/#!/id=1
mysite.com/blog/#!/id=2

answered Nov 26 '13 at 21:34

paka

1,601
22
35

Angularjs - dynamic pages, same template, how to access and load article by id

3 Answers3