The "Angular JS" website uses social comment plugins, as well as the pits encountered during the process

is currently developing its own website, technically using angular js + Express js + Mongo DB. Because the site will have articles published, so need to have a comment function. Comments can also be developed on their own, but because of the social review plug-in many now, so there is no need to spend more energy, the use of professional is good.

　　

1. What is a social review plugin? What are the common plugins?

The social review plugin, which refers to the use of a third-party comment box on your own web page without having to develop comments on your own, will be stored on a third-party server . In the use of the plug-in to the official website registration, after registration to obtain the implementation of the function of the JS code, and in the future can be on the official web site to manage their own comments.

Implementation of the principle, is generally a plug-in Web site to provide you with a section of JS code, you can insert into the page that needs to comment.

The currently used comment plugins are:

　　A. Disqus

Official website: https://disqus.com/

This should be the oldest, the most used third-party comment plugin in foreign countries. The advantage is the old professional, through the JS code can be found that many of the functions of the Web site should be reference to it. But the shortcomings are equally obvious , is the domestic website use, access to the speed of personal feeling often bad, loading some slow. In addition to the domestic social networking site support is not good, only support facebook,twitter, etc., do not support Weibo, etc., which inconvenience visitors ' comments.

and i18n support for Chinese is not good, the site provides the Chinese version of the option (it is dependent on the contributions of netizens to provide multi-lingual version), but I tried to find that it does not work.

So considering the above shortcomings, I gave up on it.

　　

　　B. Say more

Official website: http://duoshuo.com/

It and the words should be domestic use more comment plugin. The advantage is that it is easy to use and supports the login of domestic social network accounts such as Weibo. But the disadvantage is that the use of the process I feel it is a lot of bugs, at the same time in its website discussion version, you can see that the question of the netizen many are also very active. For example, I found a serious problem, there are some netizens, it is sometimes necessary to manually refresh the page again to display the comment box . This problem was later solved by using its dynamic loading method.

After comparison, comparison, I finally chose to say more.

　　

　　C. There are statements

Official website: http://www.uyan.cc/

And much like, I didn't use it because I found that it would throw JavaScript error when used, causing the comment box to not be displayed. So many debugging did not solve the problem, I chose to give up.

2. How to use the comment plugin correctly in angular JS?

　　Here I have another requirement, that is, each article can be commented on separate, that is, each article to show their own comments, comments can not be strung, or are displayed the same. for this feature, in fact each plug-in will provide threads thread concept, this function refers to different thread ID page load different comments .

Take the example of multiple words.

Here is the use of multi-plug dynamic loading mode, standard code can be found on the official website: http://dev.duoshuo.com/docs/50b344447f32d30066000147.

In standard code, there is a common JavaScript method, and if I have multiple pages, then this code needs to be duplicated multiple times. But in Angular JS is not necessary,Angular JS provides directive, that is , the function of custom tags, you can define a directive, in each page reference.

Directive.js

1Myapp.directive ("comment",function() {2     return {3Restrict: ' A ',4Linkfunction(scope) {5             //get the variable from controller6             vararticle_id =scope.article_id;7             8             varData_thread_key = ' Article_ ' +article_id;9             varData_url = ' Article_ ' +article_id;Ten             varData_author_key = ' http://blogtest.com/#!/article.html/' +article_id; One              A             //dynamic load the Duoshuo comment box -             varel = document.createelement (' div ');//the DIV does not need to be set class= "Ds-thread" -El.setattribute (' Data-thread-key ', data_thread_key);//Required Parameters theEl.setattribute (' Data-url ', data_url);//Required Parameters -El.setattribute (' Data-author-key ', data_author_key);//Optional Parameters - Duoshuo. Embedthread (EL); -JQuery (' #comment-box '). Append (EL); +         } -     }; +});

Here I use the article ID of each article to do the thread ID of the comment plugin, to ensure that each article comments are separated. Another advantage of using directive is that the JS method in the directive can access the scope variable in the controller, and if you are dynamically acquiring the article in the controller like me, it is convenient to get the article ID in directive.

　

Page.html

1 2 <div comment></div>

Two lines of code are sufficient in an HTML page. Comment refers to our custom Directive plugin.

　　

From this you can see the effect of the comment plugin as follows:

　　

3. Summary

In the process of using and selecting various comment plugins, I walked a lot of pits. Summarized as follows:

1. Different plug-in product quality is different, need to test to find and choose, some well-known products but for you, the effect is very poor, of course, you may have problems.

2. Different plug-ins different comments on different pages support different, some support good, some support is not good. Like Disqus, and more to say support is better.

3. Angular JS and plug-in combinations may also have pits when used. In the problem-solving process, you can also deepen the understanding of angular JS.

Hope to be of help to you. Thank you.

　　

I have made my own small website open source, the complete code can be found in: Https://github.com/kevinsong1990/nodejs-blog

-Kevin Song

August 2, 2015

The "Angular JS" website uses social comment plugins, as well as the pits encountered during the process