AngularJS Single Page Applications
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
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 ;-)
Related Documents
