Angular js
Upcoming SlideShare
Loading in...5
×
 

Angular js

on

  • 199 views

 

Statistics

Views

Total Views
199
Views on SlideShare
199
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Angular js Angular js Presentation Transcript

    • AngularJS Single Page Applications
    • 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
    • Mauro Servienti CTO @ Mastreeno, Ltd (Dublin) mauro@mastreeno.com @mauroservienti //milestone.topics.it (English Blog) RavenDB trainer NServiceBus trainer/support Microsoft MVP – Visual C#
    • 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;
    • 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
    • Introduction to AngularJS
    • 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;
    • 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;
    • Warning… No SEO repeat after me No SEO
    • demo A first look…
    • AngularJS foundation Application, Modules, Controllers & Views, Services
    • «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” );
    • «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;
    • «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
    • «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;
    • MVVM + MVC + $scope == AngularJS View Controller $scope (ViewBag) $scope 2 way data-binding
    • $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)
    • 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
    • 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
    • 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.
    • demo Falling in love with TypeScript
    • «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;
    • 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
    • «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
    • Asp.Net WebAPI as backend But not only that :-)
    • Demo structure RavenDB Backend Services Queue (MSMQ) Web Api Host AngularJS Application http / ajax http / requests SignalR read Our focus
    • demo Let’s get serious :-)
    • «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;
    • Regex support Named «views» & multiple «views» per state Named parameters $stateProvider
    • $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:
    • real power is in the details Amazing features
    • demo Fire! Fire! Fire! :-)
    • «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 } }}
    • «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;
    • I’m done, thank you very much! …and do not shoot to the pianist ;-)