Build your website with angularjs and web apis
•
2 j'aime•2,109 vues
Zubzib Black Coffee #9 Skills Update v2 https://www.facebook.com/events/178407509027964/
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Build your website with angularjs and web apis
Similaire à Build your website with angularjs and web apis (20)
Plus de Chalermpon Areepong
Plus de Chalermpon Areepong (8)
Dernier
Dernier (20)
Build your website with angularjs and web apis
- 1. Create Web App with and Web API ZZ BC#9 SKILLS UPDATE V2 CHALERMPON AREEPONG (NINE) ASP.NET & MVC DEVELOPERS THAILAND GROUP
- 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
- 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
- 29. ASP.NET WEB APIs 2.0 What’s new! Attribute Routing CORS OWIN IHttpActionResult OData
- 30. Final Demo