Go SPA with AngularJS – Part 1: Simple comment form

In this article i will show you first look at AngularJS by create an simple Comment box Application.

To knowing what is AngularJS, let’s take a look at wiki:

AngularJS is an open-source web application framework, maintained by Google and community, that assists with creating single-page applications, one-page web applications that only require HTML, CSS, and JavaScript on the client side. Its goal is to augment web applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

And SPA?

Please, this is a Technote 😀
SPA a.k.a Single-Page Application, is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application. Every actions completely in a single page without a page reload.

Okay, let’s rock!

First, we need to embed AngularJS in our app:

Then a HTML code for our comment form, very simple:

As you see above, the btn_add() function will trigged if user click the Post comment button.

The li tag with attribute ng-repeat=”comnt in comment” means we’ll extract all comment to comnt then parse the comment to {{ comnt }}

And this is the heart of app, the AngularJS code:

When user click button, we’ll add the comment text in $scope.comment by .push method then reset the textarea comment with $scope.txtcomment = “”;

When user click the X button next the comment, we’ll remove comment by splice the $scope.comment

$scope.comment.splice($index, 1);

And this is our work 🙂