Victor's Blog

Live as if you were to die tomorrow. Learn as if you were to live forever

NAVIGATION - SEARCH

Add Disqus into your Angular.js site.

Add Disqus into your Angular.js site.

Disqus ranks #1 in Quantcast's U.S. networks with 144 million monthly unique U.S. visits. Disqus is featured on many major publications, such as CNN, Daily Telegraph and IGN and about 750,000 blogs and websites. So it's a no-brainer to put Disqus into your website if you want to have a out-of-box comment system. Recently, I tried to put Disqus into my website which uses Angular.js. But this wasn't as easy as I thought. So I want to share with you what I found out.

1. There are a lot of disqus directive over the net. I found the best one would be this kirstein / angular-disqus. It is very simple to use. Also, it works if you have multiple domain names point to the same site. 

2. Disqus will only update on sites which use hashbang ( #! ). Disqus will ignore everything in your url after # unless it is followed by the !. So please make sure that you have your $locationProvider.hashPrefix('!') set.

Example:

angular.module("test",   ["ngDisqus"]).
  config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
    $routeProvider
      .when("/", { templateUrl: "/Home.html" })
      .when("/login", { templateUrl: "/Account/Login.html" })
      .otherwise({ redirectTo: "/" });

    $locationProvider.html5Mode(false).hashPrefix("!");
}]);

3. Once you enter your comment, you might not be able to find your comment to appear at your page straightway. It seems Disqus needs sometime to process the comment and put into the system. So please wait few minutes before you think there is something wrong with your code. (You can always verify your comment through your Disqus admin console.)

 

blog comments powered by Disqus