AngularJS Recipe: Part 1

Introduction

AngularJS is a JavaScript structural framework for dynamic web apps. It can be used in a HTML page with a <script> tag. AngularJS extends HTML attributes with Directives and binds data to HTML with Expressions.

To use AngularJs you need to add the following reference to your application.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

Now we will learn AngularJS step-by-step.

How AngularJS Extend HTML?

When we read about AngularJS we hear many times that AbgularJS extends HTML. It uses ng-directives to extend HTML.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="">
<p>Enter Your Name:
<input type="text" ng-model="Name">
</p>
<p ng-bind="Name"></p>
</div>
</form>
</body>
</html>

Here ng-app declares that the application will run under the AngularJS framework.
The ng-model directive binds the value of the input field to the application variable name.
The ng-bind directive binds the innerHTML of the <p> element to the application variable name.

ng-init directive for initializing AngularJS application variables

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="">
<div ng-app="" ng-init="Name='Priyanka Mathur'">
<p>Your Name is:
<span ng-bind="Name"></span>
</p>
</div>
</div>
</form>
</body>
</html>

AngularJS Expressions Double braces

{{ expression }} is used to write AngularJS expressions.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="">
<p>Expression In AngularJS: {{ 10 + 10 }}</p>
</div>
</form>
</body>
</html>

AngularJS Applications with AngularJS Architecture

AngularJS modules define AngularJS applications.
AngularJS controllers control AngularJS applications.
The ng-app directive defines the application, the ng-controller directive defines the controller.
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
2. <!DOCTYPE html>
3. <html
4. xmlns="http://www.w3.org/1999/xhtml">
5. <head runat="server">
6. <title></title>
7. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
8. <script>
9. var app = angular.module('myApp', []);
10. app.controller('myCtrl', function ($scope) {
11. $scope.Name = "Rahul Saxena";
12. $scope.Email = "[email protected]";
13. $scope.Address = "Noida, India";
14. });
15. </script>
16. </head>
17. <body>
18. <form id="form1" runat="server">
19. <div ng-app="myApp" ng-controller="myCtrl">
20. Name:<input type="text" ng-model="Name">
21. <br><br>
22. Email:<input type="text" ng-model="Email">
23. <br><br>
24. Address:<input type="text" ng-model="Address">
25. <br><br>
26. <b> Employee Information:</b> {{Name + " " + Email + " " +Address}}
27. </div>
28. </form>
29. </body>
30. </html>

Use Number in AngularJS

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="" ng-init="Product=5;Cost=20">
<p>
<b>Total Cost Of your Order:</b> {{ Product * Cost }}
</p>
</div>
</form>
</body>
</html>

When initializing and using take care of case because AngularJS is case sensitive.

Using Object in AngularJS

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="" ng-init="employee={Name:'Rahul Saxena',City:'Noida'}">
<p>
<b>Employee Information</b> {{ employee.Name + " - " + employee.City}}
</p>
</div>
</form>
</body>
</html>

Arrays in AngularJS

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="" ng-init="Employee=['Priya Mathur','Rahul Saxena','Sara Sinha']">
<p>Employee at position 0: {{ Employee[0] }}</p>
<p>Employee at position 1: {{ Employee[1] }}</p>
<p>Employee at position 2: {{ Employee[2] }}</p>
</div>
</form>
</body>
</html>

Perform Data Binding in AngularJS

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="" ng-init="product=1;cost=5">
Product Quantity:<input type="number" ng-model="product">
<br />
<br />
Product Cost:<input type="number" ng-model="cost">
<br />
<br />
Total Cost: {{ product * cost }}
</div>
</form>
</body>
</html>

Repeat in AngularJS

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="" ng-init="Employees=['Rahul','Shiva','Ram','Poonam']">
<ul>
<li ng-repeat="x in Employees">{{ x }}</li>
</ul>
</div>
</form>
</body>
</html>

Controller with Method In AngularJS

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function ($scope) {
$scope.Name = "Rahul Saxena";
$scope.Email = "[email protected]";
$scope.Address = "Noida";
$scope.EMP_Info = function () {
return $scope.Name + " " + $scope.Email + " " + $scope.Address;
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myApp" ng-controller="personCtrl">
Name:<input type="text" ng-model="Name">
<br>
<br />
Email:<input type="text" ng-model="Email">
<br>
<br>
Address:<input type="text" ng-model="Address">
<br>
<br>
<b>Employee Information :</b> {{EMP_Info()}}
</div>
</form>
</body>
</html>

The next part will come with more. Continued.

16 Comments

Join the conversation! Your thoughts help the community grow.

Rahul Kumar Saxena11y ago
Thanks Upendra Pratap Shahi...
Upendra Pratap Shahi11y ago
nice and very easy article sir...
Rahul Kumar Saxena11y ago
Thanks Nemilidinne Ashokreddy
Rahul Kumar Saxena11y ago
Thanks Venkat Kumar
Nemilidinne Ashokreddy11y ago
Nice article and good examples thanks Rahul Saxena
Venkat Kumar11y ago
nice
Rahul Kumar Saxena11y ago
Thanks Shantha Kumar T...
Shantha Kumar T11y ago
great
Rahul Kumar Saxena11y ago
Thanks Gowtham Rajamanickam...
Gowtham Rajamanickam11y ago
good one
Rahul Kumar Saxena11y ago
Thanks Nitin Tyagi...
Nitin11y ago
yet again excellent work Rahul Saxena bro :)
Rahul Kumar Saxena11y ago
Thanks Santhakumar Munuswamy...
Santhakumar Munuswamy11y ago
Thanks for nice article
Rahul Kumar Saxena11y ago
Thanks Shridhar Sharma
Shridhar Sharma11y ago
I just have this recipe.It was yumm. Thanks for sharing.