Angular js

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

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

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

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

«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

«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

More Related Content

What's hot

Similar to Angular js

More from Mauro Servienti

Recently uploaded

Angular js