How To Use Disqus in AngularJs

11/28/2015
How to use Disqus in AngularJs
Ads
(https://twitter.com/intent/tweet?url=http://devartisans.com/articles/use-disqus-angula
(http://devartisans.com/articles/use-disqu
How to use Disqus

in AngularJs
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
Recently I came across this directive (https://github.com/michaelbromley/angularUt

(https://github.com/michaelbromley)Bromley (https://github.com/michaelbromley)
do is to add dir-disqusdirective, give it few attributes and you are basicallydone.
Getting dirDisqusdirective
Head over to dirDisqus (https://github.com/michaelbromley/angularUtils/tree/mast
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>
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>
Note: This directive primarily needs four main attributes to work,

disqus-shortname: The name you can choose when your registeryour website in Disqus
disqus-identifier: Unique id of your page which Disqus will use to show comments
disqus-title: Title of your article
disqus-url: URL of your current page
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(){
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
General Discussion About This Article (http://devartisans.com/forum/thread/article-descussion/a
Ask Questions Related This Article (http://devartisans.com/forum/thread/questions-answers/com
Common Errors Related To This Article (http://devartisans.com/forum/thread/errors/common-err
PREVIOUS ARTICLE
How to share data between controllers in Angular
4/11
11/28/2015
NEXT ARTICLE
How to share data between directives in AngularJ
Don't Miss Out!

Get updates on new articles, and
other great technology stuff.
your@email.com
Subscribe
5/11
11/28/2015
6/11
11/28/2015
Top Articles in Angular (http://devartisans.com/categories/angular)

1
How to share data between controllers in AngularJS
(http://devartisans.com/articles/share-data-between-controllers-angularjs)
2
Simple Sidebar navigation example using angular
(http://devartisans.com/articles/sidebar-navigation-using-angular)
3
7/11
11/28/2015
WYSIWYG Rich Text Editor Using AngularJS

(http://devartisans.com/articles/wysiwyg-rich-text-editor-angularjs)
4
How to submit forms in AngularJs Multiple ways
(http://devartisans.com/articles/angularjs-ways-submit-forms)
5
(http://devartisans.com/articles/use-disqus-angularjs)
ARTICLES YOU MIGHT BE INTERESTED IN
(http://devartisans.com/articles/upload-imagedropzone-laravel5)
(http://devartisans.com/articles/working-withgulp-js)
UPLOADING IMAGE USING
WORKING WITH GULP.JS
DROPZONE.JS AND LARAVEL5
(HTTP://DEVARTISANS.COM/ARTICLES/WORKING
(HTTP://DEVARTISANS.COM/ARTICLES/UPLOAD-
WITH-GULP-JS)
IMAGE-DROPZONE-LARAVEL5)
8/11
11/28/2015
(http://devartisans.com/articles/react-js-propscomponent)
(http://devartisans.com/articles/angularjsways-submit-forms)
REACT.JS PROPS COMPONENT
HOW TO SUBMIT FORMS IN
(HTTP://DEVARTISANS.COM/ARTICLES/REACT- ANGULARJS MULTIPLE WAYS

JS-PROPS-COMPONENT)
(HTTP://DEVARTISANS.COM/ARTICLES/ANGULAR
WAYS-SUBMIT-FORMS)
Something to say? Tell us in comment section.
9/11
11/28/2015
0 Comments
Recommend
devartisans
Share
gna
Sort by Best
Start the discussion
Be the first to comment.
WHAT'S THIS?
ALSO ON DEVARTISANS
Sending AJAX request from Angular to

Laravel
3 comments 4 months ago
I've got this message
after following everithing in this post(I

have checked it atleast 3 times): POST
http://localhost:8000/api/search 500
Many to many relationship(

belongsToMany )
1 comment 7 months ago
Kenold Beauplan in user.php, the class
should be "User" instead of Role class

Role extends Model { protected
$table='users'; public function roles(){
Working with Dropbox in Laravel 5

Aurlio Guedes Thank you. This is a
great tutorial, i am happy with that.
Image Upload in Laravel 5

Dy Say FatalErrorException in
C:wampwwwtest-laravel-5projectstorageframeworkviews722a95231a3ecf420
line 20:Class 'Form' not found
GET NOTIFIED WHEN NEW TUTORIAL IS POSTED

your@email.com
SUBSCRIBE
10/11
11/28/2015
Quick links
Share
Other Links
FORUM
FACEBOOK
LARAVEL
(HTTP://DEVARTISANS.COM/FORUM)(HTTPS://WWW.FACEBOOK.COM/DEVARTISANS)
(HTTP://LARAVEL.COM/)
CONTACT US
TWITTER
ANGULARJS
(HTTP://DEVARTISANS.COM/CONTACT)
(HTTPS://TWITTER.COM/DEVARTISANS)
(HTTPS://ANGULARJS.ORG/)
ABOUT US
GOOGLE
(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.
11/11

How To Use Disqus in AngularJs

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

How To Use Disqus in AngularJs

Uploaded by

Copyright:

Available Formats

11/28/2015

How to use Disqus in AngularJs

How to use Disqus

How to use Disqus in AngularJs

Recently I came across this directive (https://github.com/michaelbromley/angularUt

Head over to dirDisqus (https://github.com/michaelbromley/angularUtils/tree/mast

How to use Disqus in AngularJs

Note: This directive primarily needs four main attributes to work,

How to use Disqus in AngularJs

General Discussion About This Article (http://devartisans.com/forum/thread/article-descussion/a

Ask Questions Related This Article (http://devartisans.com/forum/thread/questions-answers/com

Common Errors Related To This Article (http://devartisans.com/forum/thread/errors/common-err

How to share data between controllers in Angular

How to use Disqus in AngularJs

How to share data between directives in AngularJ

Don't Miss Out!

How to use Disqus in AngularJs

How to use Disqus in AngularJs

Top Articles in Angular (http://devartisans.com/categories/angular)

How to use Disqus in AngularJs

WYSIWYG Rich Text Editor Using AngularJS

ARTICLES YOU MIGHT BE INTERESTED IN

UPLOADING IMAGE USING

WORKING WITH GULP.JS

DROPZONE.JS AND LARAVEL5

How to use Disqus in AngularJs

REACT.JS PROPS COMPONENT

HOW TO SUBMIT FORMS IN

(HTTP://DEVARTISANS.COM/ARTICLES/REACT- ANGULARJS MULTIPLE WAYS

Something to say? Tell us in comment section.

How to use Disqus in AngularJs

Start the discussion

Be the first to comment.

Sending AJAX request from Angular to

I've got this message

after following everithing in this post(I

Many to many relationship(

Kenold Beauplan in user.php, the class

should be "User" instead of Role class

Working with Dropbox in Laravel 5

Aurlio Guedes Thank you. This is a

great tutorial, i am happy with that.

Image Upload in Laravel 5

GET NOTIFIED WHEN NEW TUTORIAL IS POSTED

How to use Disqus in AngularJs

You might also like