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!

Answer 1

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!