Embed Size (px)
DESCRIPTION
Zubzib Black Coffee #9 Skills Update v2 https://www.facebook.com/events/178407509027964/
Citation preview
Create Web App with
and Web APIZZ BC#9 SKILLS UPDATE V2
CHALERMPON AREEPONG (NINE)
ASP.NET & MVC DEVELOPERS THAILAND GROUP
Agenda
Introduce
AngularJS Overview
Directive
Controller
Module
Filter
Service
Web APIs
Final Demo
INTRODUCE
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
Click Add Item Row to Table and
Save DataREQUIREMENT
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
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
JQuery + Ajax Way
Html
Click Add call JavaScript template
Add table row to table
Click Save -> Ajax get/post to Web Server
Response json
AngularJS Way
HTML + Angular directive
Click Add -> Angular Controller
Click Save Get/Post to Web Server
Response JSON
Demo
OVERVIEW ANGULARJS
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">
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"/>
Quick Start
Use {{ }} to display value from model property or function
<p> Name : {{model.name}}, Age : {{model.age}} </p>
How to handle values change in
JQuery
This for tracking 1 property change
Too much code
Introduce AngularJS
HTML Enhanced for Web Apps!
MVC Yes
MVVM Close to
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 };
}
$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.
Module
Bootstrapped Application
Package all code(controller, filter, directive. Service) in module
Unit Testing
Demo Controller
Filters
Format value to display
Use for filter value
Allow to create custom filter
Demo Filter
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
Demo Directive
Service
$window window object
$location window.location object
$http $http(), get(), post(), put(), delete(), head(), jsonp()
$animate animation module
Etc…..
Demo Service
Dependency Injection
No present
Unit Test
No present
ASP.NET WEB APIs 2.0
What’s new!
Attribute Routing
CORS
OWIN
IHttpActionResult
OData
Final Demo
Summary
http://www.angularjs.org
http://ngmodules.org/
http://egghead.io/
http://www.asp.net/web-api
