Professional Documents
Culture Documents
Ads
(https://twitter.com/intent/tweet?url=http://devartisans.com/articles/use-disqus-angula
(http://devartisans.com/articles/use-disqu
If you have ever added Disqus platform in your site, you shouldknow Disqus provide
flawlessly, it looks like this,
disqusuniversal script
HTML
<divid="disqus_thread"></div>
<scripttype="text/javascript">
/***CONFIGURATIONVARIABLES***/
vardisqus_shortname='yourshortname';
/***DON'TEDITBELOWTHISLINE***/
(function(){
vardsq=document.createElement('script');dsq.type='text/javascript';dsq.async
dsq.src='//'+disqus_shortname+'.disqus.com/embed.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body'
http://devartisans.com/articles/use-disqus-angularjs
1/11
11/28/2015
);
})();
</script>
<noscript>PleaseenableJavaScripttoviewthe<ahref="https://disqus.com/?ref_noscript"
>commentspoweredbyDisqus.</a></noscript>
Here is the bad news for AngularJS developers, if you add the same script in your an
execute, so how to fix this problem, well there are workarounds but here is the best s
Prerequisites
You need to register your site to Disqus before you can add it to your site, head over
Using dirDisqusdirective
Getting dirDisqusdirective
dirDiscquss.js (https://github.com/michaelbromley/angularUtils/blob/master/src/di
JavaScript files, that's all we need to do for now.
Using dirDisqusdirective
Before we can use dirDiscuss directive we need to add it in our markup.
HTML
<!DOCTYPEhtml>
<htmllang="en"ng-app="app">
<head>
http://devartisans.com/articles/use-disqus-angularjs
2/11
11/28/2015
<metacharset="UTF-8">
<title>DisqussExample</title>
<scripttype="text/javascript"src="js/bower_components/angular/angular.min.js"></script
//addingdirDisqusscript
<scripttype="text/javascript"src="js/dirDisqus.js"></script>
</head>
<body>
</body>
</html>
Now we are ready to place dir-disqus directive in our page, first adddir-disquseleme
bottom, let's also warp it with DisqusController.
HTML
<divng-controller="DisqusControllerasdisqus">
<dir-disqusdisqus-shortname="yourshortname"
disqus-identifier="{{disqus.identifier}}"
disqus-title="{{disqus.title}}"
disqus-url="{{disqus.url}}"
>
</dir-disqus>
</div>
There are few more attributes which you can use, but they are not mandatory, read th
(https://github.com/michaelbromley/angularUtils/tree/master/src/directives/disqus
We will get the value of these attributes from DisqussController which we are also go
JAVASCRIPT
(function(){
http://devartisans.com/articles/use-disqus-angularjs
3/11
11/28/2015
//gettingdirDisqusmoduleasdependency
varapp=angular.module('app',['angularUtils.directives.dirDisqus'],['$locationProvid
($locationProvider){
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}]);
app.controller('DisqusController',function(){
varvm=this;
vm.title='Sometitle';
vm.identifier='someidentifier';
vm.url=window.location.href;
});
}());
That's it guys, now you can use Disqus in you site, you can also modify your code to
from you PHP or any server side language you are using.
If you liked this post, hit the Social Buttons Below and share with your friends, now if
comment section below.
(https://twitter.com/intent/tweet?url=http://devartisans.com/articles/use (http://devartisans.com
discussions
PREVIOUS ARTICLE
http://devartisans.com/articles/use-disqus-angularjs
4/11
11/28/2015
NEXT ARTICLE
your@email.com
Subscribe
http://devartisans.com/articles/use-disqus-angularjs
5/11
11/28/2015
http://devartisans.com/articles/use-disqus-angularjs
6/11
11/28/2015
2
Simple Sidebar navigation example using angular
(http://devartisans.com/articles/sidebar-navigation-using-angular)
3
http://devartisans.com/articles/use-disqus-angularjs
7/11
11/28/2015
4
How to submit forms in AngularJs Multiple ways
(http://devartisans.com/articles/angularjs-ways-submit-forms)
5
How to use Disqus in AngularJs
(http://devartisans.com/articles/use-disqus-angularjs)
(http://devartisans.com/articles/upload-imagedropzone-laravel5)
(http://devartisans.com/articles/working-withgulp-js)
(HTTP://DEVARTISANS.COM/ARTICLES/WORKING
(HTTP://DEVARTISANS.COM/ARTICLES/UPLOAD-
WITH-GULP-JS)
IMAGE-DROPZONE-LARAVEL5)
http://devartisans.com/articles/use-disqus-angularjs
8/11
11/28/2015
(http://devartisans.com/articles/react-js-propscomponent)
(http://devartisans.com/articles/angularjsways-submit-forms)
(HTTP://DEVARTISANS.COM/ARTICLES/ANGULAR
WAYS-SUBMIT-FORMS)
http://devartisans.com/articles/use-disqus-angularjs
9/11
11/28/2015
0 Comments
Recommend
devartisans
Share
gna
Sort by Best
WHAT'S THIS?
ALSO ON DEVARTISANS
Dy Say FatalErrorException in
C:wampwwwtest-laravel-5projectstorageframeworkviews722a95231a3ecf420
line 20:Class 'Form' not found
http://devartisans.com/articles/use-disqus-angularjs
SUBSCRIBE
10/11
11/28/2015
Quick links
Share
Other Links
FORUM
LARAVEL
(HTTP://DEVARTISANS.COM/FORUM)(HTTPS://WWW.FACEBOOK.COM/DEVARTISANS)
(HTTP://LARAVEL.COM/)
CONTACT US
ANGULARJS
(HTTP://DEVARTISANS.COM/CONTACT)
(HTTPS://TWITTER.COM/DEVARTISANS)
(HTTPS://ANGULARJS.ORG/)
ABOUT US
(HTTP://DEVARTISANS.COM/ABOUT)(HTTPS://PLUS.GOOGLE.COM/111720122139625635049/ABOUT)
PRIVACY POLICY
(HTTP://DEVARTISANS.COM/PRIVACY)
Copyright 2015 Devartisans. Website is built using Laravel PHP framework and AngularJS.
http://devartisans.com/articles/use-disqus-angularjs
11/11