AngularJS is an open source JavaScript MVC framework for web application or web sites.

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

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

https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js

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.

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:

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 angular.module

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:

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

How we will use this Scope:

When we create a controller, there we will be passing $scope as an argument.

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:

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.

DOTNET

Monday, May 28, 2018

What is AngularJS