Introduction to angular js for .net developers

Introduction To
AngularJS
For .Net Developers
Mohd Manzoor Ahmed [MCT]
manzoor_trainer manzoorthetrainer.com

Get The Complete Video Course
Here (https://goo.gl/ZBHEBe)

Today’s Agenda
10:00 AM - 11:15 AM
Welcome Note
Introduction To SPA
Getting Started With AngularJS
Directives, Module and Controller
11:45 AM - 01:30PM
$scope Object
Server Calls Using $http
Filters
Conclusion
11:15 AM - 11:45 AM
Virtus IT
Break

Why Asp.Net SPA?
SPA stands for Single Page Application.
We need user experience similar to a desktop application.
We need to speed up the page loads and navigation for the user.
In short we need responsive Web apps, without constant page reloads.

What is Asp.Net SPA?
Get all necessary code – HTML, JavaScript, and CSS on the initial page load.
Download appropriate features dynamically from server behind the scenes on
response to a user action.
Without reloading the complete page.
One of the best examples of SPA is Gmail.

Client Server
Page Life Cycle - Normal?
Initial Request
HTML Response
Post Back
HTML Response
Get Initial Data
Reloads the page
and
Get More Data

Client Server
Page Life Cycle SPA?
Initial Request
HTML Response
Post Back
HTML Response
Get Initial Data
Updates the page
and
Get More Data

How To Achieve SPA?
It can be achieved with help of Web browser JavaScript frameworks, such as
AngularJS, knockout.js, Ember.js, ExtJS, React, etc

Why AngularJS?
We need a javascript framework that supports Single Page Applications.
We need simple bidirectional data binding.
We need simple client side development and testing process.
We need a framework that support MV*
We need a framework that keeps HTML and JavaScript saperatly.

Get The Complete Video Course Here

What is AngularJS?
AngularJS is a javascript based open-source web application framework mainly
maintained by Google.
Its aims is to simplify both the development and the testing of client-side model–
view–controller (MVC) and model–view–viewmodel (MVVM) architectures.
(MV*).
AngularJS version 1.0 was released in 2012.

Getting Started With AngularJS
1. Start an empty web application.
2. Add AngularJS core using nuget package manager.
3. Add angularjs script file to index.html.
4. Use an expression {{...}}.
5. Using ng-app directive.

Demo
Let’s See First AngularJS App Demo

Directives - Mostly Used
In Short! These are special attributes for HTML
elements.
ng-app
ng-bind
ng-init
ng-show
ng-hide
ng-true-value
ng-options
ng-repeat
ng-click
ng-model
ng-if
ng-controller
For More : https://docs.angularjs.org/api/ng#directive

Demo
Let’s See a Directives Demo

Module
Our application is logically divided into multiple units called as Modules.
Module is a collection of controllers and many other parts of application.
<script type=”text/javascript”>
var app = angular.module('myApp', []);
</script>
View is mapped to the module using ng-app directive.

Assigning Module To The View
<html ng-app=”myApp”>
<head> </head>
<body>
<div>
</div>
</body>
</html>

Controller
In Short! Controller is a javascript function, used to prepare data (Models) to be
rendered on html pages (View).
<script>
app.controller('employeeController', function ($scope) {
…………………………….
});
</script>
View is mapped to the controller using ng-controller directive.

Assigning Controller To The View
<head> </head>
<body>
<div ng-controller=”employeeController”>
</div>
</body>
</html>

AngularJS $scope
$scope is an object which holds the data (Model) and is used to bind data between
html pages (View) and controller.
<script>
$scope.myValue=”Hello MTT”;
});
</script>

Assigning Model To The View
<head> </head>
<body>
<input type=’text’ ng-model=’myValue’/>
</div>
</body>
</html>

Demo
Let’s See a Controller’s Demo

Controller’s Methods
<script>
$scope.myFun=function() { alert (“From Method Call”); };
});
</script>

Calling Method From View
<head> </head>
<body>
{{myFun()}}
<input type=’button’ value=’Click Me!’ ng-click=’myFun()’/>
</div>
</body>

Demo
Let’s See a Controller’s Method Demo

Controller’s Parameterized Methods
<script>
$scope.myFun=function(id) { alert (“From Method Call”+id); };
});
</script>

Calling Method From View
<head> </head>
<body>
{{myFun(5)}}
<input type=’text’ ng-model=’myValue’/>
<input type=’button’ value=’Click Me!’ ng-click=’myFun(myValue)’/>
</div>
</body>
</html>

Demo
Let’s See a Controller’s Method With Param Demo

Making Asp.Net MVC Server Calls Using $http
$http is one of the service provided by AngularJS. It is used to make jQuery based
Ajax calls to the server.
app.controller('employeeController', function ($scope,$http) {
$scope.myValue=””;
$scope.myFun=function() {
$http.get("/Home/GetData/")
.then(function (response) {
$scope.myValue = response.data;
})
.error(function (response) {
$scope.myValue = “Error”+response.data;
});
};

Demo
Let’s see Server Call demo

Filters - Basic
Filters are special functions to format or transform the data using pipe character in an
expression followed by a filter. {{ model | filter }}
lowercase Format a string to lower case.
uppercase Format a string to upper case.
currency Format a number to a currency format.
number Format a number to a string.
date Format a date to a specified format.

Filters - Searching, Sorting And Paging
filter Select a subset of items from an array. - Searching
orderBy Orders an array by an expression. - Sorting
Third party dirPaginate.js - Pagination
Note: For more on pagination https://github.com/michaelbromley/angularUtils

Introduction to angular js for .net developers

More Related Content

What's hot

Viewers also liked

Similar to Introduction to angular js for .net developers

Recently uploaded

Introduction to angular js for .net developers