- 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.
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
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;
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;
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.
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
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;
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:
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 ;-)