introduction to angular js for .net developers
Post on 22-Jan-2017
1.474 Views
Preview:
TRANSCRIPT
Introduction To AngularJS
For .Net Developers Mohd Manzoor Ahmed [MCT]
manzoor_trainer manzoorthetrainer.com
Get The Complete Video Course Here (https://goo.gl/ZBHEBe)
Thanks
Today’s Agenda10:00 AM - 11:15 AM
Welcome NoteIntroduction To SPAGetting Started With AngularJSDirectives, Module and Controller
11:45 AM - 01:30PM$scope ObjectServer Calls Using $httpFiltersConclusion
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.
DemoLet’s See First AngularJS App Demo
Directives - Mostly UsedIn Short! These are special attributes for HTML elements.
ng-app
ng-bind
ng-init
ng-show
ng-hide
ng-true-value
ng-false-value
ng-options
ng-repeat
ng-click
ng-model
ng-if
ng-controller
ng-view
For More : https://docs.angularjs.org/api/ng#directive
DemoLet’s See a Directives Demo
Get The Complete Video Course Here
ModuleOur 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>
ControllerIn Short! Controller is a javascript function, used to prepare data
(Models) to be rendered on html pages (View).<script>
var app = angular.module('myApp', []);app.controller('employeeController', function ($scope) {
…………………………….});
</script>
View is mapped to the controller using ng-controller directive.
Assigning Controller To The View<html ng-app=”myApp”>
<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>
var app = angular.module('myApp', []);app.controller('employeeController', function ($scope) {
$scope.myValue=”Hello MTT”;
});</script>
Assigning Model To The View<html ng-app=”myApp”>
<head> </head><body>
<div ng-controller=”employeeController”><input type=’text’ ng-model=’myValue’/>
</div></body></html>
DemoLet’s See a Controller’s Demo
Controller’s Methods <script>
var app = angular.module('myApp', []);app.controller('employeeController', function ($scope) {
$scope.myValue=”Hello MTT”;$scope.myFun=function() { alert (“From Method Call”); };});
</script>
Calling Method From View<html ng-app=”myApp”>
<head> </head><body>
<div ng-controller=”employeeController”>{{myFun()}}<input type=’button’ value=’Click Me!’ ng-
click=’myFun()’/></div>
</body></html>
Get The Complete Video Course Here
DemoLet’s See a Controller’s Method Demo
Controller’s Parameterized Methods <script>
var app = angular.module('myApp', []);app.controller('employeeController', function ($scope) {
$scope.myValue=”Hello MTT”;$scope.myFun=function(id) { alert (“From Method Call”+id); };});
</script>
Calling Method From View<html ng-app=”myApp”>
<head> </head><body>
<div ng-controller=”employeeController”>{{myFun(5)}}<input type=’text’ ng-model=’myValue’/><input type=’button’ value=’Click Me!’ ng-
click=’myFun(myValue)’/></div>
</body></html>
DemoLet’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; });};
});
DemoLet’s see Server Call demo
Filters - BasicFilters 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.
json Format an object to a JSON string.
Filters - Searching, Sorting And Pagingfilter 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
DemoLet’s see filters demo
Thanks
Get The Complete Video Course Here
top related