Build your website with angularjs and web apis
•
2 gefällt mir•2,109 views
Zubzib Black Coffee #9 Skills Update v2 https://www.facebook.com/events/178407509027964/
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Build your website with angularjs and web apis
Ähnlich wie Build your website with angularjs and web apis (20)
Mehr von Chalermpon Areepong
Mehr von Chalermpon Areepong (8)
Kürzlich hochgeladen
Kürzlich hochgeladen (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