Downloaded 12 times
![«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” );](https://image.slidesharecdn.com/angularjs-140518033819-phpapp01/75/Angular-js-12-2048.jpg)
Uploaded byMauro Servienti
Angular js
- The document discusses AngularJS and single page applications. It provides an introduction and overview of key AngularJS concepts including modules, controllers, views, services, dependency injection, and filters. - Code samples and demos are referenced to illustrate concepts in more depth. Challenges with SEO and the benefits of TypeScript for adding type safety to JavaScript are also mentioned.
Angular js
- 1.
- 2. Side note: just1 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. Mauro Servienti CTO @Mastreeno, Ltd (Dublin) mauro@mastreeno.com @mauroservienti //milestone.topics.it (English Blog) RavenDB trainer NServiceBus trainer/support Microsoft MVP – Visual C#
- 4. Background • I’m mainlya 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. Resources • Slides onSlideShare: //slideshare.net/mauroservienti • Samples on GitHub: //github.com/mauroservienti • Repository: Conferences • Branches: • 2014/DDDSouthWest • Full-Stack-Sample • Directives on GitHub: //github.com/RadicalFx • Repository: radical-directives
- 6.
- 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. 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. Warning… No SEO repeat afterme No SEO
- 10.
- 11. AngularJS foundation Application, Modules,Controllers & Views, Services
- 12. «modules» • Can becompared 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. «application» • It isa 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. «There can beonly 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. «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. MVVM + MVC+ $scope == AngularJS View Controller $scope (ViewBag) $scope 2 way data-binding
- 17. $scope inheritance: becareful • 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. 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. 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. TypeScript -> safeJavaScript • 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. demo Falling in lovewith TypeScript
- 22. «dependency injection» • Isuppose you noticed that functions and «constructors» (such as controllers constructors) can declare/have dependencies: • Even on stuff not owned by AngularJS;
- 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. «unfortunately» it isonly 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. Asp.Net WebAPI asbackend But not only that :-)
- 26. Demo structure RavenDB Backend Services Queue (MSMQ) Web Api Host AngularJS Application http/ ajax http / requests SignalR read Our focus
- 27.
- 28. «services» • We havealready introduced the concept of services (singleton components): • In order to register one we can use the factory method on the module;
- 29. Regex support Named «views»& multiple «views» per state Named parameters $stateProvider
- 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. real power isin the details Amazing features
- 32.
- 33. «filters» • In thesecond 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. «directives» • Have younoticed, 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. I’m done, thankyou very much! …and do not shoot to the pianist ;-)