Angular js


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Angular js

  1. 1. AngularJS Single Page Applications
  2. 2. Side note: just 1 hour…and I am Italian :-) • We have a tons of things to say; • We have a tons of slides (ok, my fault :-P); • We have huge and complex demos; • My English is the worst thing you’ll ever hear :-) • If you, guys, can delay questions, leaving them for the break, it will be much easier :-) • Especially for me :-P
  3. 3. Mauro Servienti CTO @ Mastreeno, Ltd (Dublin) @mauroservienti // (English Blog) RavenDB trainer NServiceBus trainer/support Microsoft MVP – Visual C#
  4. 4. Background • I’m mainly a developer and not a manager despite the CTO title; • I started with web development 15 years ago, with notepad and a lot of imagination; • Then I moved to back-end services, enterprise applications and desktop software built with Windows Forms and my beloved WPF; • And finally 2 years ago, due to a project requirement, I jumped back to the not so beloved JavaScript development :-) • I hate and love JavaScript at the same time;
  5. 5. Resources • Slides on SlideShare: // • Samples on GitHub: // • Repository: Conferences • Branches: • 2014/DDDSouthWest • Full-Stack-Sample • Directives on GitHub: // • Repository: radical-directives
  6. 6. Introduction to AngularJS
  7. 7. Web Application -> Single Page Application (SPA) • No more “web apps” in the traditional term of web apps (post back based); • The browser is simply a container whose role is to host the app, nothing else; • Exactly what we have had with Silverlight unless it has been Silverlighted; • The SPA is a first class citizen application, especially giving a look at where HTML5, and browsers capabilities such as LocalStorage or WebSockets, is driving us;
  8. 8. Save Our Souls • The Hash hidden power: • http://localhost/myApplication/#/Foo/Bar • Html(5) custom attributes: • data-ng-* (ng is the angular reserved name) • By convention all AngularJS components are prefixed with «$»: • $window, $http, $scope, $resource, etc… • $window??? Why not window from the browser DOM? • Testability! Everything in AngularJS is thought with test and mock in mind;
  9. 9. Warning… No SEO repeat after me No SEO
  10. 10. demo A first look…
  11. 11. AngularJS foundation Application, Modules, Controllers & Views, Services
  12. 12. «modules» • Can be compared to assemblies or namespaces in a .NET world; • It is not required to define/create modules: it is a good practice; • Useful to organize our codebase, required if we need to create a really modular application, where each module can be seen as a plugin; //creates new module var module = angular.module( “my.module”, [ … ] ); //grab a reference to an existing module var module = angular.module( “my.module” );
  13. 13. «application» • It is a module: so we have at least 1 module; • Represents the application (pretty obvious); • Can be compared to the «main» entry point of a C# Program; • The important thing is that its startup process is a «2 phase startup process» • Configuration phase: each module can setup its own configuration independently; • Run phase: each module is started and knows that can rely on other modules to be already configured (but not necessarily started); • Each module has a 2 phase startup process, Application is the first one that AngularJS invokes;
  14. 14. «There can be only one» (cit.) • Not really: at least one per page • One single page can host multiple apps; I do not see why at the moment but we can; • One web app can host multiple AngularJS app: generally by «bounded context» • (but in the end it is up to us) http request Web Server <html> pagebrowserAngularJS App http response
  15. 15. «controllers» & «views» • As Controllers and Views in MVC with support for 2-way data-binding as in MVVM via a special “ViewBag” called $scope; • A View is not required to have a controller: PartialView; • A design rule of thumb, a must: a controller cannot manipulate the DOM (period): • You’ll never try to highjack the HTML in a controller action in Asp.Net MVC so do not use jQuery here to achieve the same; • Testing we’ll become a nightmare;
  16. 16. MVVM + MVC + $scope == AngularJS View Controller $scope (ViewBag) $scope 2 way data-binding
  17. 17. $scope inheritance: be careful • The parent $scope is “inherited” by child(ren) $scope(s); • Inherited means that from the child point of view the rule “is a” equals to true, but due to the way “inheritance” works in JavaScript you can face really cool/strange behaviors; $scope.firstName = ‘bla bla…’; //basically dangerous $scope.model = { firstName: ‘bla bla…’ } Main content (ctrl + view + $scope) Content (ctrl + view + $scope)Menu (ctrl + view + $scope)
  18. 18. Services: the «router» • We have «services», in the singleton concept of «service»; • The first you’ll face will be the $routeProvider; • I love the $stateProvider plugin (made by the team): a powerful routing engine that replaces the default routing service; • The role of a routing engine is to match URIs to states/routes/views
  19. 19. Services: the «router» • We have «services», in the singleton concept of «service»; • The first you’ll face will be the $routeProvider; • I love the $stateProvider plugin (made by the team): a powerful routing engine that replaces the default routing service; • The role of a routing engine is to match URIs to states/routes/views
  20. 20. TypeScript -> safe JavaScript • Pros: • “Compile”* time checks; • Less prone to errors, the “compiler”* tells us that firstName and FirstName are not the same thing; • Our TypeScript code is currently > 90% the same as the ECMA 6 specification; • The TypeScript compiler writes JavaScript for us; • Cons: • More code to write only to benefit of some TypeScript functionalities; • If you are experienced with JavaScript in the long term you don’t see so many benefits; (pure personal opinion) * it not complied in the sense of compiled :-), “generated” should be the term.
  21. 21. demo Falling in love with TypeScript
  22. 22. «dependency injection» • I suppose you noticed that functions and «constructors» (such as controllers constructors) can declare/have dependencies: • Even on stuff not owned by AngularJS;
  23. 23. Dependency Injection: the «$injector» • AngularJS has a built-in dependency injection engine that we are implicitly configuring: “controller” registers a transient instance “constant”, “factory” or “service” registers a singleton instance
  24. 24. «unfortunately» it is only JavaScript • DI can only be based on the «name» of the component and not on the type or on the interface; • AngularJS still allows us to implement cool patterns such as decorator or chain of responsibility; • “$inject” is there to survive to the minification process; Guarantees that AngularJS knows what we want even if the minification process has changed variables names
  25. 25. Asp.Net WebAPI as backend But not only that :-)
  26. 26. Demo structure RavenDB Backend Services Queue (MSMQ) Web Api Host AngularJS Application http / ajax http / requests SignalR read Our focus
  27. 27. demo Let’s get serious :-)
  28. 28. «services» • We have already introduced the concept of services (singleton components): • In order to register one we can use the factory method on the module;
  29. 29. Regex support Named «views» & multiple «views» per state Named parameters $stateProvider
  30. 30. $rootScope / $scope -> $broadcast • The $rootScope is a special $scope, managed by Angular itself, whose lifetime is bound to the application one: It is singleton, it is something like the Asp.Net HttpApplicationState; • Since we have «UI Composition» everywhere: Various pieces of the application composed by AngularJS does not know each other (and this is a good thing); • But there should be some way to allow communication: • …and on the other side:
  31. 31. real power is in the details Amazing features
  32. 32. demo Fire! Fire! Fire! :-)
  33. 33. «filters» • In the second sample we saw: ng-repeat=‘d in data’ a «foreach» loop that iterates over the data array; • from a C# perspective really similar to Linq; we can create our own “extension methods”: ng-repeat=‘d in data | myFilter: { /* filter config */ }’ • For a Xaml developers they can be considered as «converters»; • Can be chained as we like in any binding expression; • {{data | fA | fB: 10 | fC: { ‘a’: ‘hi, there’, ‘b’: 2 } }}
  34. 34. «directives» • Have you noticed, if you had time, a code duplication? • In the header there is the pending command list and in the page too; • The role of a directive is to allow us to build reusable, visual, components via composition: UserControls :-) • A directive hides the dust under the carpet: here we do DOM manipulation; • It is composed of: • A «controller»; • An optional template (it is a view); • A «link» function whose role is to glue things manipulating the DOM and attach DOM events; • Lots of other cool stuff out of our scope;
  35. 35. I’m done, thank you very much! …and do not shoot to the pianist ;-)