5.1) App Screen 2 (UI + Backend integration)
In this I have integrated my UI with backend to add article in the database. Adding like to an article and commenting on that for this I have used DataService which I have explained in my previous blog.
I have a controller named AddArticle.js which takes data from form and sends it to the DataService and DateService interacts with hasura API.
And I have a view addArticle.html which performs it work on frontend
In this way I achieved adding article to the database. Here are some screen shots.
Now comes showing articles on screen and provide buttons to add like and comment.
For this purpose I have used Directives of angularJs and make an controller CommentController for performing artilcle liking and commenting on each article for this controller is embedded in articleInfo.html so that it is available to each article anywhere in the frontend.
In this articleInfo.html view is associated with CommentController which performs all tasks related to the article by getting article_id from info.article_id for example when anyone presses like button it triggers ng-click=”dep.addLikes(info.article_id)” event which sends article id and and we get user_id from AuthService and then we make json query and send it to the DataService which interacts with hasura Data API and article_id and user_id gets added in article_like table. If these values already present in data then it voilates unique property and returns 400 bad requests which means user has already liked it and show appropriate message.
And for showing comments of article I have made an directive named commentInfo.js and template for that commentInfo.html
When anyone presses on comment button then event ng-click=”dep.fetchComment(info.article_id)” is triggered which fetches comments from database using CommentController and then Using DataService which then returns JSON data which get stored in array dep.comments and then this array is passed in ng-repeat in article info and at a time one comment object is passed to commentInfo to display comment.
Here is the code snippet of comment controller
This comment controller is the main controller for each article like comments no of likes and no of comments posting a comment, liking a article and displaying who have liked particular article or all comments for a particular article.
Now comes the home screen which displays all article in order of latest published article for that I have made an view chome.html and AllArticle2 controller.
Here is the code snippet of both:
Inside chome.html
<div infinite-scroll='all.nextPage()' infinite-scroll-disabled="all.busy" infinite-scroll-distance='4'>
<div ng-repeat="article in all.articles | filter:searchTitle">
<article-Info info="article"></article-Info>
</div>
</div>I have used ng-infinite-scroll.js which has function infinite-scroll which gets triggered whenever you reach to the bottem of page and loads more article.
Whenever user reaches bottem of page function “all.nextPage()” inside AllArticle2 controller get executed which loads 5 more articles from database and strores them in an array named all.article and then ng-repeat displays them by passing an object of article inside custom html element <article-Info> which is our directive articleInfo.html which displays each property of article object. In this way I have to define one template for all articles and use it like an html element inside our html.
Next I displayed articles by their category wise and trending and popular type for that I made view for each type and associated one controller for each of them.
Like for category Technology I made view technology.html
<div ng-controller="TechnologyController"><div infinite-scroll='all.nextPage()' infinite-scroll-disabled="all.busy" infinite-scroll-distance='4'>
<div ng-repeat="article in all.articles | filter:searchTitle">
<article-Info info="article"></article-Info>
</div>
</div>
<div ng-show="all.busy"><img src="img/loading.gif" class="img img-responsive"></div>
<div ng-show="all.end">No More Articles Present for Technology </div><div ng-show="all.error_condition">{{all.error}} </div>
</div>
And Technology controller for this like this:
In this way I achieved adding article to database, displaying articles by category wise and enabled liking and commenting and seeing who have liked particular article and seeing all comments particular article.
Here are some screenshots of my app:
In my next week task I would discuss about showing Activity of a user on this app like which article published, on which commented and which articles user has liked.
Thanks for reading a very long article.