Presentation at Log.change TypeScript event https://www.eventbrite.pt/e/bilhetes-changelog-35939053677

1. @alexmarreiros amarreiros@gmail.com Digitalmindignition.wordpress.com

2. Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
ABOUT
ALEXANDRE MARREIROS
• WINDOWS PLATFORM DEVELOPMENT MICROSOFT
MVP
• MICROSOFT WINDOWS DEVCAMP TRAINER
• WINDOWS INSIDER
• CTO @ INNOVAGENCY
• SOFTWARE DEV/ARCH AS INDEPENDENT
• TECHNICAL TRAINER AND SPEAKER AS
INDEPENDENT
• TEACHER @ EDIT
CONTACTS
@ALEXMARREIROS
AMARREIROS@GMAIL.COM
DIGITALMINDIGNITION.WORDPRESS.COM

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript

4. https://www.typescriptlang.org/

6. The term “single-page application” (or SPA) is
usually used to describe applications that
were built for the web. These applications are
accessed via a web browser like other
websites, but offer more dynamic interactions
resembling native mobile and desktop apps.

7. While building SPAs is trendy and considered a modern
development practice, it’s important to be aware of its cons,
including:
 The browser does most of the heavy lifting, which means
performance can be a problem — especially on less capable
mobile devices.
 Careful thought must be put into search engine
optimization (SEO) so your content can be discoverable by
search engines and social media websites that provide a link
preview.

8. Controller View
Angular Code
Return
RequestRouting via
Browser
Request
Routing via
SPA Request

9. “Angular is a full modern webframework, that enable us to build core apps over
Web Stack”
John Papa
“You write Angular applications by composing HTML templates with
Angularized markup, writing component classes to manage those templates,
adding application logic in services, and boxing components and services
in modules.”
Angular aliance

11. Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
WHAT IS
ANGULAR
• DYNAMIC
• RICH
• BROWSER LOADED
• MODULAR ORIENTED
• BASE PLATFORM FOR WEB DEVELOPMENT
• APP DEVELOPMENT ENABLER
• SPA ORIENTED
• API ORIENTED
• DESIGNED FOR BROWSER AND MOBILE
• TESTABLE
• NOT DOM LOADING DEPENDENT

12. Angular Directive / Templating / Modulation
<ul>
<li *ngFor="#object of
createRange(10)">Something</li>
</ul>

13. Dart
No Compile
Compiled
JavaScript
based

14. Dart
No Compile
Compiled
JavaScript
based
ES5 ES6 TypeScript

17. Core Modules Costum Modules
SPA Entry Point
Modules

18. Template
Component
< HTML >
Metadata
(Component)
Component
Event BindingData Binding

19. Directives
{ }

20. Services Services Services
Business
Logic
Local
Storage
(database or
cookie)
WebService
Integration

21. Directives
{ }
Services
Dependency injection

22. Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
ANGULAR GENERAL ARCHITECTURE

23. Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
ANGULAR MODULES
IMPORT { NGMODULE } FROM '@ANGULAR/CORE';
IMPORT { BROWSERMODULE } FROM '@ANGULAR/PLATFORM-BROWSER';
@NGMODULE({
IMPORTS: [ BROWSERMODULE ],
PROVIDERS: [ LOGGER ],
DECLARATIONS: [ APPCOMPONENT ],
EXPORTS: [ APPCOMPONENT ],
BOOTSTRAP: [ APPCOMPONENT ]
})
EXPORT CLASS APPMODULE { }
NgModule is a decorator function with the
following properties:
declarations - the view classes that belong to this
module. Angular has three kinds of view classes:
components, directives, and pipes.
exports - the subset of declarations that should
be visible and usable in the component templates
of other modules.
imports - other modules whose exported classes
are needed by component templates declared in
this module.
providers - creators of services that this module
contributes to the global collection of services;
they become accessible in all parts of the app.
bootstrap - the main application view, called the
root component, that hosts all other app views.
Only the root module should set this bootstrap
property.

24. Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
ANGULAR ARE BUILD USING A COMPONENT APPROACH
Angular are build using a components approach.
A Angular Component is a combination of:
A HTML Template
A class that controls all the behaviour of a portion of
the screen
Example off a declaration off a component
@Componet({
selector: ‘my-app’,
template: ‘<h1> Hi Angular </h1>’
})

25. Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
ANGULAR ARE BUILD USING A COMPONENT APPROACH
@Componet({
selector: ‘my-app’,
template: ‘<h1> Hi Angular </h1>’
})
@Component is ued to define the metadata object of a new component in Angular
- The selector indicates the place where the component should be displayed
- The template defines the way the componnt will work if you want to spare the logic off the component
from the render you can use templateurl as a way to point to a html file

26. Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
ANGULAR IN ACTION
Let’s take a look in to Angular in action
Install node JS and grant that you have the right versions of
node and npm
Node –v >= v3.x.x.
Npn –v >= v4.x.x
• Node power client development with a set off powerfull
tools
• Npn work as a way to quick install JavaScript Libraries
1
2
Go to
https://angular.io/docs/ts/latest/guide/learning-
angular.html
Lets start by quickstarting the initial project

27. Tools

30. Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
CONTACTS
@ALEXMARREIROS
AMARREIROS@GMAIL.COM
DIGITALMINDIGNITION.WORDPRESS.COM