Build your website with angularjs and web apis
-
Upload
chalermpon-areepong -
Category
Technology
-
view
1.594 -
download
2
description
Transcript of Build your website with angularjs and web apis
![Page 1: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/1.jpg)
Create Web App with
and Web APIZZ BC#9 SKILLS UPDATE V2
CHALERMPON AREEPONG (NINE)
ASP.NET & MVC DEVELOPERS THAILAND GROUP
![Page 2: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/2.jpg)
Agenda
Introduce
AngularJS Overview
Directive
Controller
Module
Filter
Service
Web APIs
Final Demo
![Page 3: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/3.jpg)
INTRODUCE
![Page 4: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/4.jpg)
Evolutions of ASP.NET Web Form
ASP.NET 1.0, 1.1
use server script tag, HTML, CSS, JavaScript
ASP.NET 2.0
Code-Behind (C#, VB, etc.) very popular.
ASP.NET Ajax Extension 1.0
ASP.NET 3.5
Integrated ASP.NET Ajax Library 3.5 in .NET Framework
ASP.NET 3.5 SP1 introduce ASP.NET MVC 1.0
![Page 5: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/5.jpg)
Click Add Item Row to Table and
Save DataREQUIREMENT
![Page 6: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/6.jpg)
Web Form Way
Asp.net Page
Click Add Postback
Process with C#/VB code behind
Binding markup control
Response
Loop to finish
Click Save Postback
Response HTML
![Page 7: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/7.jpg)
MVC @Html Helper Way
HTML
Click Add Form Get/Post
Process C#/VB Controller
cshtml, vbhtml + Razor + @Html Helper
Response
Loop until finish
Click Save form Get/Post
Response HTML
![Page 8: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/8.jpg)
JQuery + Ajax Way
Html
Click Add call JavaScript template
Add table row to table
Click Save -> Ajax get/post to Web Server
Response json
![Page 9: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/9.jpg)
AngularJS Way
HTML + Angular directive
Click Add -> Angular Controller
Click Save Get/Post to Web Server
Response JSON
![Page 10: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/10.jpg)
Demo
![Page 11: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/11.jpg)
OVERVIEW ANGULARJS
![Page 12: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/12.jpg)
Quick Start
Reference AngularJS script to Html page
<script src="scripts/angular.min.js"></script>
Declare directive ng-app to root of application scope in DOM
<html ng-app="myApp">
![Page 13: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/13.jpg)
Quick Start
Use ng-init to declare and initial the model and values
<body ng-init=" model = { name = '', age = 0 } ">
Use ng-model to bind value of model with specific html input
<input type="text" ng-model="model.name"/>
<input type="number" ng-model="model.age"/>
![Page 14: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/14.jpg)
Quick Start
Use {{ }} to display value from model property or function
<p> Name : {{model.name}}, Age : {{model.age}} </p>
![Page 15: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/15.jpg)
How to handle values change in
JQuery
This for tracking 1 property change
Too much code
![Page 16: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/16.jpg)
Introduce AngularJS
HTML Enhanced for Web Apps!
MVC Yes
MVVM Close to
![Page 17: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/17.jpg)
Controller
Is a JavaScript Object or Function
Always include $scope parameter
Contains JavaScript Models (POJO) and Functions
Working with ng-controller directive
<div ng-controller="DemoFirstCtrl"></div>
function DemoFirstCtrl($scope) {
$scope.model = { name : '', age : 0 };
}
![Page 18: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/18.jpg)
$scope
Scope as Data-Model
The glue between application controller and the view
Both controllers and directives have reference to the scope, but not
to each other.
![Page 19: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/19.jpg)
Module
Bootstrapped Application
Package all code(controller, filter, directive. Service) in module
Unit Testing
![Page 20: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/20.jpg)
Demo Controller
![Page 21: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/21.jpg)
Filters
Format value to display
Use for filter value
Allow to create custom filter
![Page 22: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/22.jpg)
Demo Filter
![Page 23: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/23.jpg)
Directives
Kinds of Directive
E - Element name: <my-directive></my-directive>
A - Attribute: <div my-directive="exp"> </div>
C - Class: <div class="my-directive: exp;"></div>
M - Comment: <!-- directive: my-directive exp -->
More Built-in Directives
Allow to create custom directive
![Page 24: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/24.jpg)
Demo Directive
![Page 25: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/25.jpg)
Service
$window window object
$location window.location object
$http $http(), get(), post(), put(), delete(), head(), jsonp()
$animate animation module
Etc…..
![Page 26: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/26.jpg)
Demo Service
![Page 27: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/27.jpg)
Dependency Injection
No present
![Page 28: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/28.jpg)
Unit Test
No present
![Page 29: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/29.jpg)
ASP.NET WEB APIs 2.0
What’s new!
Attribute Routing
CORS
OWIN
IHttpActionResult
OData
![Page 30: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/30.jpg)
Final Demo
![Page 31: Build your website with angularjs and web apis](https://reader034.fdocuments.net/reader034/viewer/2022042814/55498cf6b4c905b96a8b518b/html5/thumbnails/31.jpg)
Summary
http://www.angularjs.org
http://ngmodules.org/
http://egghead.io/
http://www.asp.net/web-api