Angular Owin Katana TypeScript
Download as PPTX, PDF3 likes1,590 views
This document discusses Angular, TypeScript, and Katana. It provides an overview of these technologies including what OWIN and Project Katana are, how to decouple the client and server, and demos of using Angular, TypeScript, and Reactive Extensions with ASP.NET. It also summarizes what Angular, TypeScript, and Reactive Extensions are and how they can be used together to build single page applications.
Angular Owin Katana TypeScript
- 1. Angular, TypeScript and Katana Twin Cities Code Camp October 4th 2014 Justin Wendlandt [email protected] @jwendl http://www.jwendl.net/
- 2. Keywords and Terms Katana
- 3. ASP.NET vNext • Who to follow for more information Scott Guthrie, Scott Hanselman, Damian Edwards and David Fowler. Channel 9 Videos
- 4. What is OWIN? • Decouple server and application No more System.Web – YAY! • Decouple client and server • Open standards • Stimulate open source Eco System • Windows Internet of Things? Embedded Devices? Application Framework OWIN Middleware Server Host
- 5. What is Project Katana? • OWIN implementation for IIS • A few hooks into System.Web • A few hooks into System.Net.HttpListener
- 7. What About the Server? • Web API vs. MVC • Business Logic • Data Access Layer • No Code Changes at all (Unless you use Cache) (Unless you use Session) (Unless you use System.Web)
- 8. Decoupling the Client • Do you SPA? • Do you run server-side? • Do you go Hybrid?
- 9. Using the Hybrid Approach • ASP.NET MVC • TypeScript • Reactive Extensions For Ajax For Updating DOM (using jQuery)
- 10. Using the SPA Approach • ASP.NET Web API • TypeScript • Angular • Reactive Extensions For Ajax
- 11. What is Angular? • It’s HTML Enhanced for Web Apps • Single Page Application Framework
- 12. Angular – Routing • Root page never navigates • Clicked links “Navigate” Then data bind
- 13. Angular – $scope • Scope delivers model to DOM and controller • $scope is NOT the model itself • Should contain multiple models
- 14. Angular – Dependency Injection • Resolves instance of object for you • Helps decouple services and providers
- 15. Angular – Two-Way Data Binding • No code to handle the binding, ng-model does it for you • Based on $scope • Can contain filters for read-bindings
- 16. Angular Demo – HotTowel
- 17. Reactive Extensions for JavaScript • Uses promises – Awesome! • Can handle events as well • Throttle Input if need be • Perfect for anything asynchronous
- 18. The Reactive Manifesto • Respond in timely manner • Consistent Quality of Service Responsive • Stay responsive in the face of failure • Allows for recovery Resilient • Stay responsive under varying workload • No central bottlenecks Elastic • Relies on Asynchronous Messages • Ensure Loose Coupling Message Driven
- 19. Why Should I Always use RxJS? • Event-Driven • Avoids Nasty Nested Callbacks • Resembles .NET Fluent API • Perfect Fit for $Ajax calls that an Angular App would need
- 21. What is TypeScript? • It’s not JavaScript • It’s not C# • Interfaces are model prototypes • Modules are a separation layer
- 22. Interfaces vs. .d.ts Files • TypeScript Interfaces Describes a model – var dog: Animal = { … } Ensuring a model passed into a function – function Bark (animal: Dog) { … } • TypeLite Takes .NET models and turns them into TypeScript Interfaces • TypeScript .d.ts files Third Party Applications _refs.ts • DefinitelyTyped project on GitHub
- 23. Web Essentials • Preview Window • Drag n’ Drop • Native _refs.ts support
- 25. References • Videos http://channel9.msdn.com/Event s/Speakers/Damian-Edwards http://channel9.msdn.com/Event s/Speakers/david-fowler • TypeScript http://www.typescriptlang.org/ • Angular JS https://angularjs.org/ • HotTowel / HotTowel TypeScript https://github.com/johnpapa/HotT owel-Angular https://github.com/johnnyreilly/Ho tTowel-Angular-TypeScript • RxJS http://reactive-extensions. github.io/RxJS/ http://www.slideshare.net/mattpo dwysocki/cascadiajs-dont-cross-the- streams
- 26. Questions??? • http://www.jwendl.net/ • Twitter: @jwendl • [email protected] • http://speakr.cc/ • http://github.com/jwendl/