AngularJS is an open source JavaScript MVC framework for web application or web sites.
This framework will first check for ng-app directive in a HTML document after the entire document is loaded and if ng-app is found, it bootstraps itself and compiles the HTML template.
Typically ng-app directives should be placed at the root of an HTML document e.g. <html> or <body> tag, so that it can control the entire DOM hierarchy. However, you can place it in any DOM element.
The AngularJS framework will only process the DOM elements and its child elements where the ng-app directive is applied.
Example:
Basic Example to Add two numbers
In the below example everything under the div tag is managed under angular.
Features of Angular Js
- It is a powerful JavaScript based development framework to create RICH Internet Application (RIA).
- It provides developers options to write client side application (using JavaScript) in a clean MVC (Model View Controller) way.
- Application written in AngularJS is cross-browser ,It automatically handles JavaScript code suitable for each browser.
- It is open source, completely free.
- It is licensed under the Apache License version 2.0.
Miško Hevery, a Google employee, started to work with AngularJS in 2009.
and now officially supported by Google.
AngularJS Features
- MVC – The framework is built on the famous concept of MVC (Model-View-Controller). This is a design pattern used in all modern day web applications. This pattern is based on splitting the business logic layer, the data layer, and presentation layer into separate sections. The division into different sections is done so that each one could be managed more easily.
- Data Model Binding – You don't need to write special code to bind data to the HTML controls. This can be done by Angular by just adding a few snippets of code.
- Very less Code – When carrying out DOM manipulation a lot of JavaScript was required to be written to design any application. But with angular you will be writing very less amount of code.
4 UnitTest : The designers at Google not only developed Angular but also developed a testing framework called "Karma" which helps in designing unit tests for AngularJS applications.
5 It provides routing features.
6 The AngularJS framework uses Plain Old JavaScript Objects(POJO), it doesn’t need the getter or setter functions.
Two way Data Binding:
The first step we need to do is add the javascript function as shown below:
<script src="~/Script/angular.min.js"></script>
AngularJS Architecture
5 It provides routing features.
6 The AngularJS framework uses Plain Old JavaScript Objects(POJO), it doesn’t need the getter or setter functions.
Two way Data Binding:
The first step we need to do is add the javascript function as shown below:
<script src="~/Script/angular.min.js"></script>
AngularJS Architecture
Setup AngularJS
The below things required to set up angular js environment.
- AngularJS Library
- Editor/IDE
- Browser
- Web server
Angular JS Library:
To download angular js we need to go to the below URL
https://angularjs.org/
Click on Download Angular.js below screen gets displayed.
You can also use the below Angular Js Libarary
Editor: Visual Studio
The following editors are also recommended:
Web server:
We can use any web server such as IIS, apache etc., locally for development purpose.
Browser:
You can install any browser of your choice as AngularJS supports cross-browser compatibility. However, it is recommended to use Google Chrome while developing an application.
Setup AngularJS project in Visual Studio:
Open Visual Studio -File->New Project.
Give any name and the Location where you want to Save. Click on Ok Button
In the New ASP.NET Project dialog box, select Empty template and then click OK.
Now, we will install Angular JS Library Using Nuget Packages.
Now, this will add the script folder in your projects as shown below:
AngularJS Directives
ng-app:
This is very important in Angular Application, which is used to indicate starting of an Angular Application to AngularJS HTML compiler ($compile), like a “Main()” function in any compile any of time language like C#, Java or C++ etc.
If we do not use this directive first and directly try to write other directives, it gives an error.
This framework will first check for ng-app directive in a HTML document after the entire document is loaded and if ng-app is found, it bootstraps itself and compiles the HTML template.
Typically ng-app directives should be placed at the root of an HTML document e.g. <html> or <body> tag, so that it can control the entire DOM hierarchy. However, you can place it in any DOM element.
The AngularJS framework will only process the DOM elements and its child elements where the ng-app directive is applied.
Example:
Basic Example to Add two numbers
In the below example everything under the div tag is managed under angular.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app>
10+20={{10+20}}
</div>
</form>
</body>
</html>
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app>
10+20={{10+20}}
</div>
</form>
</body>
</html>
In the below example. everything under the body tag are managed by angular.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
<form id="form1" runat="server">
<div>
10+20={{10+20}}
</div>
<div>
30 +20= {{30+20 }}
</div>
</form>
</body>
</html>
Output:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
<form id="form1" runat="server">
<div>
10+20={{10+20}}
</div>
<div>
30 +20= {{30+20 }}
</div>
</form>
</body>
</html>
Output:
Another Basic Example:
To check whether it is true or false
Using Javascript Object
Using Arrays
Angular Modules and Controllers:
What is Module:
It is container for different parts of your application , i.e controller, services, directories, filters.
Controllers always belong to a module.
It is like a main method in other types of application.
How to create a Module:
using the AngularJS function
Example :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
</form>
</body>
</html>
Note: In the above code, i am passing an empty Array. Module can be depended on other Module. So in the above i am passing as Empty.
What is Controller
It is java script function.And the job of it is to build a model for the view to display.
How to create a controller
ng-controller: It is used to define a controller.
Example :
app.controller("myCtrlName", function($scope) {
$scope.firstName = "Rajakonda";
$scope.lastName = "Uday Kumar";
});
or , we can write the above code also as
<form id="form1" runat="server">
<div ng-app="myApp">...</div>
<script>
var myController = function ($scope) {
$scope.firstName = "Rajakonda";
$scope.lastName = "Uday Kumar"; }
</script>
</form>
What is $scope:
Example:
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.firstName = "Rajakonda";
$scope.lastName = "Uday Kumar";;
});
</script>
</form>
</body>
</html>
Output:
Example:
Now, i am going to create a new javascript File for this example:
Right click on the Project and Select Add-->Add New Item->Select Javascript File and write any Name and Click on Add as shown below:
Now, the newly created java script file will contains the custom javascript code
First add the reference of Angular js in the newly created javascript file
Default.aspx:
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myModule">
<head runat="server" >
<title></title>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-controller="myController">
{{ Message }}
</div>
</form>
</body>
</html>
Output:
Basic example with Angular js and Jquery
AngularJS Example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
</script>
</head>
<body ng-app>
Enter Your Name: <input type="text" ng-model="name" /> <br />
Hello <label ng-bind="name"></label>
</body>
</html>
output:
Using JQuery Example We need to write more lines of code.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
</head>
<body>
Enter Your Name: <input type="text" id="txtName" /> <br />
Hello <label id="lblName"></label>
<script>
$(document).ready( function () {
$('#txtName').keyup(function () {
$('#lblName').text($('#txtName').val());
});
});
</script>
</body>
</html>
Output:
Multiplication of Two Numbers:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Example</title>
<script src="scripts/angular.js"></script>
</head>
<body ng-app >
<h1>Multiplication of Two Number</h1>
Enter Numbers to Multiply:
<input type="text" ng-model="Num1" /> x <input type="text" ng-model="Num2" />
= <span>{{Num1 * Num2}}</span>
</body>
</html>
Output:
Overall Angular Js is good for
Supports Single Page Application.
It is very easy in Unit test.
No need to learn scripting language, as this is javascript code only
Open source JavaScript MVC framework.
Supported by Google
Supports separation of concerns by using MVC design pattern
Built-in attributes (directives) makes HTML dynamic.
To check whether it is true or false
Using Javascript Object
Using Arrays
Angular Modules and Controllers:
What is Module:
It is container for different parts of your application , i.e controller, services, directories, filters.
Controllers always belong to a module.
It is like a main method in other types of application.
How to create a Module:
using the AngularJS function
angular.moduleExample :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
</form>
</body>
</html>
Note: In the above code, i am passing an empty Array. Module can be depended on other Module. So in the above i am passing as Empty.
What is Controller
It is java script function.And the job of it is to build a model for the view to display.
How to create a controller
ng-controller: It is used to define a controller.
Example :
app.controller("myCtrlName", function($scope) {
$scope.firstName = "Rajakonda";
$scope.lastName = "Uday Kumar";
});
or , we can write the above code also as
<form id="form1" runat="server">
<div ng-app="myApp">...</div>
<script>
var myController = function ($scope) {
$scope.firstName = "Rajakonda";
$scope.lastName = "Uday Kumar"; }
</script>
</form>
What is $scope:
The scope is the binding part between the HTML (view) and the JavaScript (controller).
The scope is an object with the available properties and methods.
The scope is available for both the view and the controller.
A context where the model is stored so that controllers, directives and expressions can access it
A context where the model is stored so that controllers, directives and expressions can access it
How we will use this Scope:
When we create a controller, there we will be passing $scope as an argument.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.firstName = "Rajakonda";
$scope.lastName = "Uday Kumar";;
});
</script>
</form>
</body>
</html>
Output:
Now, i am going to create a new javascript File for this example:
Right click on the Project and Select Add-->Add New Item->Select Javascript File and write any Name and Click on Add as shown below:
Now, the newly created java script file will contains the custom javascript code
First add the reference of Angular js in the newly created javascript file
Default.aspx:
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myModule">
<head runat="server" >
<title></title>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-controller="myController">
{{ Message }}
</div>
</form>
</body>
</html>
Output:
Basic example with Angular js and Jquery
AngularJS Example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
</script>
</head>
<body ng-app>
Enter Your Name: <input type="text" ng-model="name" /> <br />
Hello <label ng-bind="name"></label>
</body>
</html>
output:
Using JQuery Example We need to write more lines of code.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
</head>
<body>
Enter Your Name: <input type="text" id="txtName" /> <br />
Hello <label id="lblName"></label>
<script>
$(document).ready( function () {
$('#txtName').keyup(function () {
$('#lblName').text($('#txtName').val());
});
});
</script>
</body>
</html>
Output:
Multiplication of Two Numbers:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Example</title>
<script src="scripts/angular.js"></script>
</head>
<body ng-app >
<h1>Multiplication of Two Number</h1>
Enter Numbers to Multiply:
<input type="text" ng-model="Num1" /> x <input type="text" ng-model="Num2" />
= <span>{{Num1 * Num2}}</span>
</body>
</html>
Output:
Expression:
It is javaScript code which is usually wrapped inside double curly braces such as {{ expression }}. In the above example, {{ Num1 * Num2}} will simply display the product of Num1 and Num2.
AngularJS Scopes:
The Scope is an object that is specified as a binding part between the HTML (view) and the JavaScript (controller). It plays a role of joining controller with the views. It is available for both the view and the controller
Overall Angular Js is good for
Supports Single Page Application.
It is very easy in Unit test.
No need to learn scripting language, as this is javascript code only
Open source JavaScript MVC framework.
Supported by Google
Supports separation of concerns by using MVC design pattern
Built-in attributes (directives) makes HTML dynamic.
