Your SlideShare is downloading. ×
Build your website with angularjs and web apis
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Build your website with angularjs and web apis

1,552
views

Published on

Zubzib Black Coffee #9 Skills Update v2 …

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

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,552
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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