Angular js
Download as pptx, pdf2 likes898 views
- 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.
![«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/85/Angular-js-12-320.jpg)
More Related Content
What's hot (20)
Similar to Angular js (20)
More from Mauro Servienti (20)
Recently uploaded (20)
Angular js
- 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. Mauro Servienti CTO @ Mastreeno, Ltd (Dublin) [email protected] @mauroservienti //milestone.topics.it (English Blog) RavenDB trainer NServiceBus trainer/support Microsoft MVP – Visual C#
- 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. Resources • Slides on SlideShare: //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
- 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 after me No SEO
- 11. AngularJS foundation Application, Modules, Controllers & Views, Services
- 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. «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. «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. «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: 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. 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 -> 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. demo Falling in love with TypeScript
- 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. 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 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. Asp.Net WebAPI as backend 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. demo Let’s get serious :-)
- 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. 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 is in the details Amazing features
- 32. demo Fire! Fire! Fire! :-)
- 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. «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. I’m done, thank you very much! …and do not shoot to the pianist ;-)