Build your website with angularjs and web apis

1,884 views
1,744 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,884
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×