Post
Ask Question

Creating A Comment Box Using Angular 1.0.7

I'm creating a simple Comment Box web application using Angular 1.0.7.
 
Introduction to AangularJS
 
AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag. AngularJS extends HTML attributes using Directives and binds the data to the HTML using Expressions.
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>  
AngularJS extends HTML 
  • AngularJS extends HTML with ng-directives.
  • The ng-app directive defines an AngularJS application.
  • The ng-model directive binds the value of HTML controls (input, select, textarea) to the application data.
  • The ng-bind directive binds the application data to the HTML View.
Let's focus on our Comment Box project.

Angular

Follow the below steps to create this project.
 
Step 1   

Add a new web form to your project.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Comments.aspx.cs" Inherits="CommentBox.Comments" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <div>  
  12.       
  13.     </div>  
  14.     </form>  
  15. </body>  
  16. </html>  
Step 2

Add Angular.js and bootstrap cdn links in the head section.
  1. <head runat="server">    
  2.     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  
  3.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>  
  4. </head>  
Step 3

Define the ng-app directive in the <body> tag.
  1. <body ng-app>  
  2.       
  3. </body>  
Step 4

Define HTML tag in Body section.
  1. <div class="container">  
  2.            <h1>Comment   
  3.            </h1>  
  4.            <hr />  
  5.            <div class="form-group" >  
  6.                <form ng-controller="commentControler">  
  7.                    <textarea class="form-control" rows="5" placeholder="Your Comment Please....."  ng-model="CommentText"></textarea>  
  8.                    <br />  
  9.                    <button class="btn btn-success pull-right" ng-click="addComment()">Comment.</button>  
  10.                    <br />  
  11.                    <hr />  
  12.                    <ul class="list-group" >  
  13.                        <li class="list-group-item" ng-repeat="cmt in commentArray">{{cmt}}  
  14.                            <a href="" ng-click="romoveComment($comText);" ><span class="glyphicon glyphicon-trash" style="float:right"> </span></a>  
  15.                        </li>  
  16.                    </ul>  
  17.                </form>  
  18.            </div>  
  19.        </div>  
Step 5

Define Angular functions inside the <script> tag. 
  1. <script>  
  2.   
  3.         function commentControler($scope) {  
  4.             $scope.commentArray = [];  //Main Object hare I'm adding all Comment informations
  5.             $scope.addComment = function () {  // Comment Button click Event
  6.                 if($scope.CommentText!=null)  
  7.                 {  
  8.                     $scope.commentArray.push($scope.CommentText);  
  9.                     $scope.CommentText = "";  
  10.                 }  
  11.             }  
  12.             $scope.romoveComment = function ($comText) {  // Delete button click Event
  13.                 $scope.commentArray.splice($comText,1);  
  14.             }  
  15.   
  16.         }  
  17.     </script>  

Note - When you make a Controller in AngularJS, you pass the $scope object as an argument.

Uses of AngularJS Scope
  • The scope is the binding part between the HTML (View) and the JavaScript (Controller).
  • Scope is an object with the available properties and methods.
  • Scope is available for both, the View and the Controller.
I hope it's helpful.


Similar Articles