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" %>
  3. <!DOCTYPE html>
  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>
  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>
  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>
  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. }
  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.