Angular js

AngularJSSingle 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)

[email protected]@mauroservienti

//milestone.topics.it (English Blog)

RavenDB trainerNServiceBus 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 SEOrepeat after me

No SEO

demoA first look…

AngularJS foundationApplication, 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 modulevar module = angular.module( “my.module”, [ … ] );

//grab a reference to an existing modulevar 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

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.

demoFalling 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 backendBut not only that :-)

Demo structure

RavenDB

BackendServices

Queue(MSMQ)

Web ApiHost

AngularJSApplication

http / ajax

http / requests

SignalRread

Our focus

demoLet’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 detailsAmazing features

demoFire! 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 ;-)

Angular js

Technology

Transcript of Angular js