Create Web App with
and Web API
ZZ BC#9 SKILLS UPDATE V2
CHALERMPON AREEPONG (NINE)
ASP.NET & MVC DEVELOPERS THAILAND GROU...
Agenda


Introduce



AngularJS Overview


Directive



Controller



Module



Filter



Service



Web APIs



...
INTRODUCE
Evolutions of ASP.NET Web Form


ASP.NET 1.0, 1.1




use server script tag, HTML, CSS, JavaScript

ASP.NET 2.0




...
Click Add Item Row to Table and
Save Data
REQUIREMENT
Web Form Way


Asp.net Page



Click Add  Postback



Process with C#/VB code behind



Binding markup control



Re...
MVC @Html Helper Way


HTML



Click Add  Form Get/Post



Process C#/VB Controller



cshtml, vbhtml + Razor + @Html...
JQuery + Ajax Way


Html



Click Add  call JavaScript template



Add table row to table



Click Save -> Ajax get/p...
AngularJS Way


HTML + Angular directive



Click Add -> Angular Controller



Click Save  Get/Post to Web Server



...
Demo
OVERVIEW ANGULARJS
Quick Start


Reference AngularJS script to Html page

<script src="scripts/angular.min.js"></script>


Declare directiv...
Quick Start


Use ng-init to declare and initial the model and values

<body ng-init=" model = { name = '', age = 0 } ">
...
Quick Start


Use {{ }} to display value from model property or function

<p> Name : {{model.name}}, Age : {{model.age}} ...
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)...
$scope


Scope as Data-Model



The glue between application controller and the view



Both controllers and directives...
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="...
Demo Directive
Service


$window  window object



$location  window.location object



$http  $http(), get(), post(), put(), delet...
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
Upcoming SlideShare
Loading in …5
×

Build your website with angularjs and web apis

2,047 views

Published on

Zubzib Black Coffee #9 Skills Update v2
https://www.facebook.com/events/178407509027964/

Published in: Technology
  • Be the first to comment

Build your website with angularjs and web apis

  1. 1. Create Web App with and Web API ZZ BC#9 SKILLS UPDATE V2 CHALERMPON AREEPONG (NINE) ASP.NET & MVC DEVELOPERS THAILAND GROUP
  2. 2. Agenda  Introduce  AngularJS Overview  Directive  Controller  Module  Filter  Service  Web APIs  Final Demo
  3. 3. INTRODUCE
  4. 4. 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
  5. 5. Click Add Item Row to Table and Save Data REQUIREMENT
  6. 6. 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
  7. 7. 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
  8. 8. JQuery + Ajax Way  Html  Click Add  call JavaScript template  Add table row to table  Click Save -> Ajax get/post to Web Server  Response json
  9. 9. AngularJS Way  HTML + Angular directive  Click Add -> Angular Controller  Click Save  Get/Post to Web Server  Response JSON
  10. 10. Demo
  11. 11. OVERVIEW ANGULARJS
  12. 12. 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">
  13. 13. 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"/>
  14. 14. Quick Start  Use {{ }} to display value from model property or function <p> Name : {{model.name}}, Age : {{model.age}} </p>
  15. 15. How to handle values change in JQuery  This for tracking 1 property change  Too much code
  16. 16. Introduce AngularJS  HTML Enhanced for Web Apps!  MVC  Yes  MVVM  Close to
  17. 17. 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 }; }
  18. 18. $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.
  19. 19. Module  Bootstrapped Application  Package all code(controller, filter, directive. Service) in module  Unit Testing
  20. 20. Demo Controller
  21. 21. Filters  Format value to display  Use for filter value  Allow to create custom filter
  22. 22. Demo Filter
  23. 23. 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
  24. 24. Demo Directive
  25. 25. Service  $window  window object  $location  window.location object  $http  $http(), get(), post(), put(), delete(), head(), jsonp()  $animate  animation module  Etc…..
  26. 26. Demo Service
  27. 27. Dependency Injection  No present
  28. 28. Unit Test  No present
  29. 29. ASP.NET WEB APIs 2.0  What’s new!  Attribute Routing  CORS  OWIN  IHttpActionResult  OData
  30. 30. Final Demo
  31. 31. Summary  http://www.angularjs.org  http://ngmodules.org/  http://egghead.io/  http://www.asp.net/web-api

×