how to use disqus in angularjs

7/23/2019 How to Use Disqus in AngularJs

1/11

11/28/2015 How to use Disqus in AngularJs

http://devartisans.com/articles/use-disqus-angularjs 1

(https://twitter.com/intent/tweet?url=http://devartisans.com/articles/use-disqus

(http://devartisans.com/articles/us

If you have ever added Disqus platform in your site, you should know Disqus pr

flawlessly, it looks like this,

disqus universal script

HTML

How to use Disqus in AngularJs

/* * * CONFIGURATION VARIABLES * * */

var disqus_shortname = 'yourshortname';

/* * * DON'T EDIT BELOW THIS LINE * * */

(function() {

var dsq = document.createElement('script'); dsq.type = 'text/javascript'; ds

dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('
http://devartisans.com/articles/use-disqus-angularjshttps://twitter.com/intent/tweet?url=http://devartisans.com/articles/use-disqus-angularjs&text=How%20to%20use%20Disqus%20in%20AngularJs&via=devartisanshttp://devartisans.com/articles/use-disqus-angularjshttps://twitter.com/intent/tweet?url=http://devartisans.com/articles/use-disqus-angularjs&text=How%20to%20use%20Disqus%20in%20AngularJs&via=devartisans


2/11



Here is the bad news for AngularJS developers, if you add the same script in yo

execute, so how to fix this problem, well there are workarounds but here is the

Prerequisites

You need to register your site to Disqus before you can add it to your site, head

Using dirDisqus directive

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

(https://github.com/michaelbromley)Bromley (https://github.com/michaelbro

do is to add dir-disqus directive, give it few attributes and you are basically don

Getting dirDisqus directive

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

dirDiscquss.js (https://github.com/michaelbromley/angularUtils/blob/master/

JavaScript files, that's all we need to do for now.

Using dirDisqus directiveBefore we can use dirDiscuss directive we need to add it in our markup.

HTML

); })();

Please enable JavaScript to view the


3/11



Now we are ready to place dir-disqus directive in our page, first add dir-disqus

bottom, let's also warp it with DisqusController.

HTML

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

disqus-shortname: The name you can choose when your register your website in Dis

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, r

(https://github.com/michaelbromley/angularUtils/tree/master/src/directives/d

We will get the value of these attributes from DisqussController which we are a

JAVASCRIPT

Disquss Example

//adding dirDisqus script

(function() {
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/disqus


4/11



(https://twitter.com/intent/tweet?url=http://devartisans.com/articles(http://devartisans

discussions

How to share data between controllers in A

PREVIOUS ARTICLE

That's it guys, now you can use Disqus in you site, you can also modify your co

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,

comment section below.

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

Ask Questions Related This Article(http://devartisans.com/forum/thread/questions-answ Common Errors Related To This Article(http://devartisans.com/forum/thread/errors/com

//getting dirDisqus module as dependency

var app = angular.module('app', ['angularUtils.directives.dirDisqus'], ['$locati

($locationProvider) {

$locationProvider.html5Mode(true);

$locationProvider.hashPrefix('!');

}]);

app.controller('DisqusController', function() {

var vm = this;

vm.title = 'Some title';

vm.identifier = 'some identifier';

vm.url = window.location.href;

});

}());
http://devartisans.com/forum/thread/errors/common-errors-use-disqus-angularjshttp://devartisans.com/forum/thread/questions-answers/common-questions-use-disqus-angularjshttp://devartisans.com/forum/thread/article-descussion/article-discussion-use-disqus-angularjshttp://devartisans.com/articles/share-data-between-controllers-angularjshttp://devartisans.com/articles/use-disqus-angularjshttps://twitter.com/intent/tweet?url=http://devartisans.com/articles/use-disqus-angularjs&text=How%20to%20use%20Disqus%20in%20AngularJs&via=devartisans


5/11



How to share data between directives in An

NEXT ARTICLE

Don't Miss Out!Get updates on new articles, and

other great technology stuff.

[email protected]

Subscribe
http://devartisans.com/articles/share-data-between-directives


6/11




7/11



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
http://devartisans.com/categories/angular


8/11



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

How to use Disqus in AngularJs

(http://devartisans.com/articles/use-disqus-angularjs)

ARTICLES YOU MIGHT BE INTERESTED IN

(http://devartisans.com/articles/upload-image-

dropzone-laravel5)

UPLOADING IMAGE USING

DROPZONE.JS AND LARAVEL5

(HTTP://DEVARTISANS.COM/ARTICLES

- -

(http://devartisans.com/articles/working-with-

gulp-js)

WORKING WITH GULP.JS


WITH-GULP-JS)
http://devartisans.com/articles/working-with-gulp-jshttp://devartisans.com/articles/working-with-gulp-jshttp://devartisans.com/articles/upload-image-dropzone-laravel5http://devartisans.com/articles/upload-image-dropzone-laravel5


9/11



(http://devartisans.com/articles/react-js-props-

component)

REACT.JS PROPS COMPONENT


JS-PROPS-COMPONENT)

(http://devartisans.com/articles/angularjs-

ways-submit-forms)

HOW TO SUBMIT FORMS IN

ANGULARJS MULTIPLE WAYS


- -

Something to say? Tell us in comment section.
http://devartisans.com/articles/angularjs-ways-submit-formshttp://devartisans.com/articles/angularjs-ways-submit-formshttp://devartisans.com/articles/react-js-props-componenthttp://devartisans.com/articles/react-js-props-component


10/11



Sending AJAX request from Angular to

Laravel

I've got this message

after following everithing in this post(I

have checked it atleast 3 times): POST

Working with Dropbox in Laravel 5

Thank you. This is a

great tutorial, i am happy with that.

Many to many relationship(

belongsToMany )

in user.php, the class

should be "User" instead of Role classRole extends Model { protected

Image Upload in Laravel 5

FatalErrorException in

C:wampwwwtest-laravel-5-

projectstorageframeworkviews722a952

DEVARTISANS

0 Comments

GET NOTIFIED WHEN NEW TUTORIAL IS POSTED

[email protected] SUBSCRIBE
http://disq.us/url?url=http%3A%2F%2Fdevartisans.com%2Farticles%2Fmany-to-many-relationship%3AwvX-eCrnxqlJ5cLUNnAAy8OoHgQ&imp=80i63r4numh56&prev_imp=80hv8p6vsoust&forum_id=3543480&forum=devartisans&thread_id=4117027684&user_id=184665485&thread=3727830744&zone=thread&area=bottom&object_type=thread&object_id=3727830744http://disq.us/url?url=http%3A%2F%2Fdevartisans.com%2Farticles%2Fmany-to-many-relationship%3AwvX-eCrnxqlJ5cLUNnAAy8OoHgQ&imp=80i63r4numh56&prev_imp=80hv8p6vsoust&forum_id=3543480&forum=devartisans&thread_id=4117027684&user_id=184665485&thread=3727830744&zone=thread&area=bottom&object_type=thread&object_id=3727830744http://disq.us/url?url=http%3A%2F%2Fdevartisans.com%2Farticles%2Fajax-laravel-angularjs%3APDtFLrccWo3qkFPflNPh_Ca7ojA&imp=80i63r4numh56&prev_imp=80hv8p6vsoust&forum_id=3543480&forum=devartisans&thread_id=4117027684&user_id=184665485&thread=4017804143&zone=thread&area=bottom&object_type=thread&object_id=4017804143http://disq.us/url?url=http%3A%2F%2Fdevartisans.com%2Farticles%2Fajax-laravel-angularjs%3APDtFLrccWo3qkFPflNPh_Ca7ojA&imp=80i63r4numh56&prev_imp=80hv8p6vsoust&forum_id=3543480&forum=devartisans&thread_id=4117027684&user_id=184665485&thread=4017804143&zone=thread&area=bottom&object_type=thread&object_id=4017804143http://disq.us/url?url=http%3A%2F%2Fdevartisans.com%2Farticles%2Fimage-upload-laravel-5%3AtR8JoK99omeIAgWYKHb7LaNbbBk&imp=80i63r4numh56&prev_imp=80hv8p6vsoust&forum_id=3543480&forum=devartisans&thread_id=4117027684&user_id=184665485&thread=3751517498&zone=thread&area=bottom&object_type=thread&object_id=3751517498http://disq.us/url?url=http%3A%2F%2Fdevartisans.com%2Farticles%2Fimage-upload-laravel-5%3AtR8JoK99omeIAgWYKHb7LaNbbBk&imp=80i63r4numh56&prev_imp=80hv8p6vsoust&forum_id=3543480&forum=devartisans&thread_id=4117027684&user_id=184665485&thread=3751517498&zone=thread&area=bottom&object_type=thread&object_id=3751517498http://disq.us/url?url=http%3A%2F%2Fdevartisans.com%2Farticles%2Fimage-upload-laravel-5%3AtR8JoK99omeIAgWYKHb7LaNbbBk&imp=80i63r4numh56&prev_imp=80hv8p6vsoust&forum_id=3543480&forum=devartisans&thread_id=4117027684&user_id=184665485&thread=3751517498&zone=thread&area=bottom&object_type=thread&object_id=3751517498http://disq.us/url?url=http%3A%2F%2Fdevartisans.com%2Farticles%2Fajax-laravel-angularjs%3APDtFLrccWo3qkFPflNPh_Ca7ojA&imp=80i63r4numh56&prev_imp=80hv8p6vsoust&forum_id=3543480&forum=devartisans&thread_id=4117027684&user_id=184665485&thread=4017804143&zone=thread&area=bottom&object_type=thread&object_id=4017804143http://disq.us/url?url=http%3A%2F%2Fdevartisans.com%2Farticles%2Fworking-with-dropbox-laravel-5%3AW7Eo9GtSOSPZD8rsjTL4tnBoPjg&imp=80i63r4numh56&prev_imp=80hv8p6vsoust&forum_id=3543480&forum=devartisans&thread_id=4117027684&user_id=184665485&thread=3770737025&zone=thread&area=bottom&object_type=thread&object_id=3770737025https://disqus.com/by/disqus_gGAMfWgILt/https://disqus.com/home/inbox/https://disqus.com/home/forums/devartisans/http://disq.us/url?url=http%3A%2F%2Fdevartisans.com%2Farticles%2Fimage-upload-laravel-5%3AtR8JoK99omeIAgWYKHb7LaNbbBk&imp=80i63r4numh56&prev_imp=80hv8p6vsoust&forum_id=3543480&forum=devartisans&thread_id=4117027684&user_id=184665485&thread=3751517498&zone=thread&area=bottom&object_type=thread&object_id=3751517498http://disq.us/url?url=http%3A%2F%2Fdevartisans.com%2Farticles%2Fmany-to-many-relationship%3AwvX-eCrnxqlJ5cLUNnAAy8OoHgQ&imp=80i63r4numh56&prev_imp=80hv8p6vsoust&forum_id=3543480&forum=devartisans&thread_id=4117027684&user_id=184665485&thread=3727830744&zone=thread&area=bottom&object_type=thread&object_id=3727830744http://disq.us/url?url=http%3A%2F%2Fdevartisans.com%2Farticles%2Fworking-with-dropbox-laravel-5%3AW7Eo9GtSOSPZD8rsjTL4tnBoPjg&imp=80i63r4numh56&prev_imp=80hv8p6vsoust&forum_id=3543480&forum=devartisans&thread_id=4117027684&user_id=184665485&thread=3770737025&zone=thread&area=bottom&object_type=thread&object_id=3770737025http://disq.us/url?url=http%3A%2F%2Fdevartisans.com%2Farticles%2Fajax-laravel-angularjs%3APDtFLrccWo3qkFPflNPh_Ca7ojA&imp=80i63r4numh56&prev_imp=80hv8p6vsoust&forum_id=3543480&forum=devartisans&thread_id=4117027684&user_id=184665485&thread=4017804143&zone=thread&area=bottom&object_type=thread&object_id=4017804143


11/11


Copyright 2015 Devartisans. Website is built using Laravel PHP framework and AngularJS.

Quick linksFORUM

(HTTP://DEVARTISANS.COM/FORUM)

CONTACT US

(HTTP://DEVARTISANS.COM/CONTACT)ABOUT US

(HTTP://DEVARTISANS.COM/ABOUT)

PRIVACY POLICY

(HTTP://DEVARTISANS.COM/PRIVACY)

ShareFACEBOOK

(HTTPS://WWW.FACEBOOK.COM/DEVARTISANS)

TWITTER

(HTTPS://TWITTER.COM/DEVARTISANS)GOOGLE

(HTTPS://PLUS.GOOGLE.COM/111720122139625635049/ABOUT)

Other LinksLARAVEL

(HTTP://LARAVEL.COM/)

ANGULARJS

(HTTPS://ANGULARJS.ORG/)
https://angularjs.org/http://laravel.com/https://plus.google.com/111720122139625635049/abouthttps://twitter.com/devartisanshttps://www.facebook.com/devartisanshttp://devartisans.com/privacyhttp://devartisans.com/abouthttp://devartisans.com/contacthttp://devartisans.com/forum

how to use disqus in angularjs

Documents