Angular JS Basics: May 2015

Saturday, 30 May 2015

Multiple Controllers

Hi. Today, let me show you all how we can use multiple controllers in single Angular JS app. Only two files - i.e., HTML and JavaScript files are required.

main.html :-
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
</head>

<body ng-app="mainApp">
<div ng-controller="firstController">
<h2>Model managed by the first controller</h2>
<strong>First name:</strong> {{firstName}}<br />
<strong>Last name:</strong> <span ng-bind="lastName"></span><br />
<strong>Full name:</strong> {{getFullName()}}<br />
<br />
<label>Set the first name: <input type="text" ng-model="firstName"/></label><br />
<label>Set the last name: <input type="text" ng-model="lastName"/></label>
</div>
<div ng-controller="secondController">
<h2>Model managed by the second controller</h2>
<strong>First name:</strong> {{firstName}}<br />
<strong>Middle name:</strong> {{middleName}}<br />
<strong>Last name:</strong> <span ng-bind="lastName"></span><br />
<strong>Full name:</strong> {{getFullName()}}<br />
<br />
<label>Set the first name: <input type="text" ng-model="firstName"/></label><br />
<label>Set the middle name: <input type="text" ng-model="middleName"/></label><br />
<label>Set the last name: <input type="text" ng-model="lastName"/></label>
</div>
</body>
</html>

script.js :-

var mainApp = angular.module("mainApp", [ ]);
mainApp.controller("firstController", function ($scope)
{
$scope.firstName = "Anik";
$scope.lastName = "Acharjee";
$scope.getFullName = function ()
{
return $scope.firstName + " " + $scope.lastName;
};
});

mainApp.controller("secondController",function ($scope)
{
$scope.firstName = "Rahul";
$scope.middleName = "Kumar";
$scope.lastName = "Singh";
$scope.getFullName = function ()
{
return $scope.firstName + " " + $scope.middleName + " " + $scope.lastName;
};

});

Screenshot:-

Explanation:-

Here, two separate controllers are used - "first controller" and "second controller". Two separate controllers are performing, completely separate work. ng-bind is used to bind the data.

Monday, 25 May 2015

Use of $scope

Scope is a special JavaScript object which plays the role of joining controller with the views. Scope contains the model data. In controllers, model data is accessed via $scope object.

main.html:-

<html>

<head>

<title>Angular JS Forms</title>

</head>

<body>

<h2>AngularJS Scope Application</h2>

<p>{{message}} <br/> {{type}} </p>

<p>{{message}} <br/> {{type}} </p>

</div>

<p>{{message}} <br/> {{type}} </p>

</div>

</body>

</html>

app.js:-

var mainApp = angular.module("mainApp", []);

controller.js:-

mainApp.controller("shapeController", function($scope) {

$scope.message = "In shape controller";

$scope.type = "Shape";

});

mainApp.controller("circleController", function($scope) {

$scope.message = "In circle controller";

});

mainApp.controller("squareController", function($scope) {

$scope.message = "In square controller";

$scope.type = "Square";

});

Screenshot:

Explanation:-

Here, "$scope" is passed as first argument to controller during its constructor definition.

"$scope.message" and "$scope.type" are the models which are to be used in the HTML page. I have set values to models which will be reflected in the application module whose controller is "shapeController". I can define functions as well in $scope.

The feature of scope - Scope are controllers specific. If we defines nested controllers then child controller will inherit the scope of its parent controller.

Use of $http

Angular JS provides $http control which works as a service to read data from the server. Server can make a database call to get the records. Angular JS needs data in JSON format. Once data is ready, $http can be used to get the data from server.

I will explain it with a small example:-

data.txt:-

[

{

"Name" : "Anik Acharjee",

"RollNo" : 101,

"Percentage" : "80%"

{

"Name" : "Rahul Rajput",

"RollNo" : 201,

"Percentage" : "70%"

{

"Name" : "Ram Sharma",

"RollNo" : 301,

"Percentage" : "75%"

{

"Name" : "Sachin Gupta",

"RollNo" : 401,

"Percentage" : "77%"

}

]

main.html:-

<html>

<head>

<title>Angular JS Includes</title>

<style>

table, th , td {

border: 1px solid grey;

border-collapse: collapse;

padding: 5px;

}

table tr:nth-child(odd) {

background-color: #f2f2f2;

}

table tr:nth-child(even) {

background-color: #ffffff;

}

</style>

</head>

<body>

<h2>AngularJS $http Application</h2>

<table>

<tr>

<th>Percentage</th>

</tr>

<td>{{ student.Name }}</td>

<td>{{ student.RollNo }}</td>

<td>{{ student.Percentage }}</td>

</tr>

</table>

</div>

</body>

</html>

app.js:-

var mainApp = angular.module("mainApp", []);

controller.js:-

var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function($scope,$http) {

var url="data.txt";

$http.get(url).success( function(response) {

$scope.students = response;

});

});

Screenshot:-

Explanation:-

Here, data.txt contains all the student records. "$http" service makes an ajax call and set response to its property students. "students" model can be used to draw tables in the html.

Sunday, 24 May 2015

Concept of Views

Today, lets know about Angular JS Views.

Angular JS supports Single Page Application via multiple views on a single page. To do this Angular JS has provided "ng-view" and "ng-template" directives and "$routeProvider" services.

ng-view tag simply creates a place holder where a corresponding view (html or ng-template view) can be placed based on the configuration.

ng-template directive is used to create an html view using script tag. It contains "id" attribute which is used by $routeProvider to map a view with a controller.

$routeProvider is the key service which set the configuration of urls, map them with the

corresponding html page or ng-template, and attach a controller with the same.

Let me show you a small example.

main.html:-

<html>

<head>

<title>Angular JS Views</title>

</head>

<body>

<h2>AngularJS Sample Application</h2>

<p><a href="#addStudent">Add Student</a></p>

<p><a href="#viewStudents">View Students</a></p>

<h2> Add Student </h2>

</script>

<h2> View Students </h2>

</script>

</div>

</body>

</html>

addstudent.js:-

mainApp.controller('AddStudentController', function($scope) {

$scope.message = "This page will be used to display add student form";

});

viewstudent.js:-

mainApp.controller('ViewStudentsController', function($scope) {

$scope.message = "This page will be used to display all the students";

});

app.js:-

var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.config(['$routeProvider',

function($routeProvider) {

$routeProvider.

when('/addStudent', {

templateUrl: 'addStudent.htm',

controller: 'AddStudentController'

}).

when('/viewStudents', {

templateUrl: 'viewStudents.htm',

controller: 'ViewStudentsController'

}).

otherwise({

redirectTo: '/addStudent'

});

}]);

Screenshots:-

Explanation:-

$routeProvider is defined as a function under config of mainApp module using key as "$routeProvider".

$routeProvider, when defines a url "/addStudent" which then is mapped to "addStudent.htm". addStudent.htm should be present in the same path as main html page. If html page is not defined then "ng-template" to be used with id="addStudent.htm". I have used ng-template.

"otherwise" is used to set the default view. "controller" is used to set the corresponding controller for the view.

Friday, 22 May 2015

Use of ng-include directive

In Angular JS, we can embed HTML pages within a HTML page using ng-include directives. Please refer this example.

includes.html:-
<html>
<head>
<title>Angular JS Includes</title>
<script src="angular.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
<div ng-include="'main.html'"></div>
<div ng-include="'subjects.html'"></div>
</div>
<script src="app.js"></script>
<script src="controller.js"></script>
</body>
</html>

main.html:-
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Name: </td><td>{{student.fullName()}}</td></tr>
<tr><td>Fees: </td><td>{{student.fees}}</td></tr>
</table>

subjects.html:-
<p>Subjects:</p>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat="subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>

controller.js:-
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Anik",
lastName: "Acharjee",
fees:1500,
subjects:[
{name:'Physics',marks:75},
{name:'Chemistry',marks:70},
{name:'Math',marks:74},
{name:'English',marks:79},
{name:'Computer Science',marks:73}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});

app.js:-
var mainApp = angular.module("mainApp", []);

Screenshot:-

Explanation:-

By using "ng-include" directive in the includes.html file, I have included two html files in it, i.e., main.html & subjects.html.

Wednesday, 20 May 2015

Form Validation

Today, lets know how to create a simple validation form using Angular JS.

As usual, I will elaborate it using an example.

validation.html:-

<html>

<head>

<title>Angular JS Validation Form</title>

<style>

table, th , td {

border: 1px solid grey;

border-collapse: collapse;

padding: 5px;

}

table tr:nth-child(odd) {

background-color: #f2f2f2;

}

table tr:nth-child(even) {

background-color: #ffffff;

}

</style>

</head>

<body>

<h2>AngularJS Validation Application</h2>

<tr><td>Enter first name:</td><td><input name="firstname" type="text" ng-model="firstName" required>

<span ng-show="studentForm.firstname.$error.required">First Name is required.</span>

</span>

</td></tr>

<tr><td>Enter last name: </td><td><input name="lastname" type="text" ng-model="lastName" required>

<span ng-show="studentForm.lastname.$error.required">Last Name is required.</span>

</span>

</td></tr>

<tr><td>Enter Mob. No: </td><td><input name="mob" type="text" ng-pattern="/^\d{0,10}(\.\d{1,9})?$/" ng-model="mob" required ng-maxlength="10">

<span ng-show="studentForm.mob.$error.required">Mobile No. is required.</span>

</span>

</td></tr>

<tr><td>Email: </td><td><input name="email" type="email" ng-model="email" length="100" required>

<span ng-show="studentForm.email.$error.required">Email is required.</span>

<span ng-show="studentForm.email.$error.email">Invalid email address.</span>

</span>

</td></tr>

<tr><td><button ng-click="reset()">Reset</button></td><td><button

ng-disabled="studentForm.firstname.$dirty && studentForm.firstname.$invalid ||

studentForm.lastname.$dirty && studentForm.lastname.$invalid ||

studentForm.mob.$dirty && studentForm.mob.$invalid"

studentForm.email.$dirty && studentForm.email.$invalid"

ng-click="submit()">Submit</button></td></tr>

</table>

</form>

</div>

</script>

</body>

</html>

app.js:-
var mainApp = angular.module("mainApp", []);

validation.js:-
mainApp.controller('studentController', function($scope) {
$scope.reset = function(){
$scope.firstName = "Anik";
$scope.lastName = "Acharjee";
$scope.email = "anikacharjee@gmail.com";
$scope.mob = "9958644437";
}
$scope.reset();
});

Screenshots:-

Explanation:-

In the above example, "ng-click" is used to handle Angular JS on button/link click. "$dirty" and "$invalid" flags are used to do the validations in seamless way. "novalidate" is used with a form declaration to disable any browser specific validation. "ng-show" is used to display any errors in the page. "ng-pattern" directive is used to check the mobile number pattern.

Three files has been used :- "app.js", which is an Application Module, used to initialize an application with controller(s). "validation.js", which is a Controller Module, used to define the controller and "validation.html", which is a simple html file, where all the above js files are included along with the html code of lines.

In "Enter Mob. No." field, we can enter only 10 digits(not more than that). We cannot enter letters also in that field. In "Email" field, we can only enter a VALID email id.

Tuesday, 19 May 2015

HTML DOM

Today, let me discuss about HTML DOM(Document Object Model) in Angular JS.

To hide any item/button in Angular JS, various directives are available.Simply,we need to declare the directives, to hide/show the buttons.

It can be explained further with the suitable example.

ng.html:-
<html>
<head>
<title>AngularJS HTML DOM</title>
</head>
<body>
<h2>AngularJS NG Directives</h2>
<div ng-app="">
<table border="0">
<tr>
<td><input type="checkbox" ng-model="enableDisableButton">Disable Button</td>
<td><button ng-disabled="enableDisableButton">Click Me!</button></td>
</tr>
<tr>
<td><input type="checkbox" ng‐model="showHide1">Show Button</td>
<td><button ng-show="showHide1">Click Me!</button></td>
</tr>
<tr>
<td><input type="checkbox" ng-model="showHide2">Hide Button</td>
<td><button ng-hide="showHide2">Click Me!</button></td>
</tr>
<tr>
<td><p>Total click: {{clickCounter}}</p></td>
<td><button ng-click="clickCounter = clickCounter + 1">Click Me!</button></td>
</tr>
</table>
</div>
<script src="angular.min.js"></script>
</body>
</html>

Screenshots:-

Explanation:-

Here, in the above example, "ng-disabled" directive has been used to disable the button, once it is clicked. "ng-show" directive can be used to show/display the button on the screen. "ng-hide" directive is used to hide the button in the screen, which can be used based upon the requirement. "ng-click" directive can be used to use the click functionality of a button(or any link) in the page. Here, it is used to check the number of clicks in the specific button.

Monday, 18 May 2015

Use of Table

Lets develop a simple Table in Angular JS, using CSS Style Sheet.

A small example to illustrate it.

Table.html:-
<html>
<head>
<title>Angular JS Table</title>
<script src="angular.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Table Creation Using CSS</h2>
<div ng-app="mainApp" ng-controller="studentController">
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Name: </td><td>{{student.fullName()}}</td></tr>
<tr><td>Subject:</td><td>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat="subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>
</td></tr>
<tr><td>Fees:</td><td>{{student.fees}}</td></tr>
</table>
</div>
<script src="Table.js"> </script>
</body>
</html>

Table.js:-
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Anik",
lastName: "Acharjee",
fees:15000,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'Computer',marks:75},
{name:'English',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});

Screenshot:-

Explanation:-

A simple table is created using CSS Style Sheet, where few text-boxes are used. In this text-boxes, details like First Name, Last Name etc are entered. In "Student" column, ng-repeat is used to retrieve the name and mark of a particular subject, which have been initialized before.

Sunday, 17 May 2015

Using other filters

Let know about Filters in Angular JS.

It will be easy to elaborate with an example.

Filters.html:-
<html>
<head>
<title>Angular JS Filters</title>
<script src="angular.min.js"></script>
</head>
<body>
<h2>AngularJS Filters Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Enter fees: </td><td><input type="text" ng-model="student.fees"></td></tr>
<tr><td>Enter subject: </td><td><input type="text" ng-model="subjectName"></td></tr>
</table>
<br/>
<table border="0">
<tr><td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td></tr>
<tr><td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td></tr>
<tr><td>fees: </td><td>{{student.fees | currency}}</td></tr>
<tr><td>Subject:</td><td>
<ul>
<li ng-repeat="subject in student.subjects | filter: subjectName |orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
</td></tr>
</table>
</div>
<script src="Filters.js"> </script>
</body>
</html>

Filters.js:-
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});

Screenshots:-

Explanation:-

Here, various filters is used, that are available in Angular JS.

I have added uppercase filter, lowercase filter, currency filter, filter filter (to display only the required value, i.e, subjectName), orderby filter to an expression using pipe character.

Controllers

Hi. Today, I am going to discuss about Controllers in Angular JS.

Let me explain you with an example.

Controller.html:-
<html>
<head>
<title>Angular JS Controller</title>
<script src="angular.min.js"></script>
</head>
<body>
<h2>Application On Angular JS Controller</h2>
<div ng-app="mainApp" ng-controller="studentController">
Enter first name: <input type="text" ng-model="student.firstName"><br><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
</div>
<script src="Controller.js"> </script>
</body>
</html>

Controller.js:-
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Anik",
lastName: "Acharjee",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});

Screenshot:-

Explanation:-

Here, $scope refers to application which is to use the studentController object. $scope.student is property of studentController object.

firstName and lastName are two properties of $scope.student object and passed the default values to them. fullName is the function of $scope.student object whose task is to return the combined name.

In fullName function we're getting the student object and then return the combined

name. ng-model is used to indicate studentController's student property.

Whatever we type in first name and last name input boxes, you can see the full name getting updated automatically.

Wednesday, 13 May 2015

Expressions

Hi. Today, I am going to teach you about the Expressions in Angular JS.

"Expressions" are mainly used to bind application data to html. Expressions are written inside double braces like {{ expression}}. Expressions behaves in same way as "ng-bind directives". Angular JS application expressions are pure JavaScript expressions and outputs the data where they are used.

Let me elaborate it with the help of an example.

Expres.html:-

<html>

<title>AngularJS Expressions</title>

<body>

<h1>Expressions In Angular JS</h1>

<p>Hello {{student.firstname + " " + student.lastname}}!</p>

<p>Expense on Books : {{cost * quantity}} Rs</p>

<p>Roll No: {{student.rollno}}</p>

<p>Marks(Math): {{marks[3]}}</p>

</div>

</body>

</html>

Screenshot:-

Explanation:-

In ng-init attribute under div tag, variables like quantity, cost etc., have been initialized.

Here, "student.firstname" means it will display Mahesh, which have been declared in the code. Similarly, "cost * quantity", will display the product of variable's value.

"marks[3]", is nothing but an array which have been used in the code. It will display the "third(3th)" value from the array, starting from 0.

Tuesday, 12 May 2015

NOTE in Angular JS

Hi, today I will show you how to create a NOTE in Angular JS.

1.html:-

<!DOCTYPE html>

<html>

<head>

</head>

<p>

<button ng-click="clear()">Clear</button>

</p>

<p>Number of characters left: <span ng-bind="left()"></span></p>

</body>

</html>

2.js:-

var app = angular.module("myNoteApp", []);

3.js:-

app.controller("myNoteCtrl", function($scope) {

$scope.message = "";

$scope.left = function() {return 100 - $scope.message.length;};

$scope.clear = function() {$scope.message = "";};

$scope.save = function() {alert("Note Saved");};

});

Screenshot :-

Explanation:-

When you will run the "1.html" file in the browser, it will look like this.

You can write/type till 100 words, more than that, it won't allow/accept. When you will click on the "Save" button, it will show the Save message on the screen.

When you will click on the "Clear" button, it will clear/erase whatever you have typed till now.

Sunday, 10 May 2015

Interaction with HTML

In this example, it will give us a clear scenario of how Angular JS interacts with HTML tags.

Welcome.html:-
<!doctype html>
<html>
<head>
<script src="angular.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Web Programming!</h2>
</div>
<script src="Welcome.js"></script>
</body>
</html>

Welcome.js -
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "Everyone";
});

It is good programming practice to write the JavaScript Code in a separate file.

Screenshot:-

Explanation:-

To include Angular JS in the HTML file, we need to use "<script>" tag. Here, "angular.js" file is saved in the same folder where the HTML file is saved.

We need to tell what part of the HTML contains the Angular JS app. This done by adding the "ng-app"attribute to the root HTML element of the Angular JS app. You can either add it to html element or body element.

The "ng-controller" tells Angular JS what controller to use with the view. "helloTo.title" tells Angular JS to write the "model" value named "helloTo.title" to the HTML.

The code written in "Welcome.js" registers a controller function named "HelloController" in the angular module named "myapp". The controller function is registered in angular via the "angular.module(...).controller(...)" function call.

The "$scope" parameter passed to the controller function is the model. The controller function adds a "helloTo" JavaScript object, and in that object it adds a title field.

Saturday, 9 May 2015

Use of Filter

Sharing another app in Angular JS - It is used to filter the details, written in the code.

filter.html:-
<!DOCTYPE html>
<html ng-app>
<head>
<title>Using Angular JS </title>
</head>

<body ng-init="customers=[{name:'John Smith',city:'Phoenix'},{name:'John Roy',city:'New York'},{name:'John Black',city:'Washington'}]">
Name : <br/> <input type="text" ng-model="name" /> <br/>
<ul>
<li ng-repeat="cust in customers | filter:name | orderBy:'city'"> {{ cust.name | uppercase}} . {{ cust.city }} </li>
</ul>
<script src="lib/angular/angular.js"></script>
</body>
</html>

Now, you will understand, how the code works with the help of the screen-shots -

Initially, it will look like that, when you will run the code.

It will sort based upon the data written in the code.

Explanation:-

Here, in the above example, Angular directive called "ng-init" has been declared in the "body" tag, assigned with few names & cities. All these names & cities are mentioned under the "customers" variable. "ng-model" directive has been included as one of the property in the "Name" text box. "ng-repeat" directive is used to repeat the data of all the values, declared in "customers" variable. Here, various filters like filter by name, order by city(orderBy) has been used. Even "uppercase" filter is also been used.

First Small App

Let me share my first small app in Angular JS.

binding_name.html:-
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Two way data binding</title>
</head>
<body ng-init="name='Anik'">
<input type="text" ng-model="name"/>
<div><h1>Hello, {{name}}</div>
<script src="lib/angular/angular.js"></script>
</body>
</html>

Now, let me show you the screen-shot -

Initially, "Anik" is written in the code, but if you erase the name & type other name, then it will be displayed in the browser.

Explanation:-

It is one of the example of Data-Binding. Here, "ng-init" directive is used, declared with a name called Anik. This directive is mainly used to define a value initially. "ng-model" directive is used as a property in the text box. Now, we just need to define that ng-model within the curly braces. Then, the value of that "ng-model" will be shown within the curly braces, similar to the above example. Here, "name" is the value of the "ng-model", so when we define this "name" within the curly braces, then whatever we type in the text box, that will appear in the screen under the "<h1>" tag.

Introduction

Hi,Friends. I,Anik Acharjee,currently learning on Angular JS, would like to share my work on it. I love to code on other Web Technologies, like HTML 5, CSS, BootStrap, JavaScript etc.