Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,053 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

×