O documento é um workshop sobre Angular 2, ministrado por Alexandre Marreiros, que aborda conceitos fundamentais como tipos de dados em JavaScript, a arquitetura do Angular, e a construção de componentes. O conteúdo enfatiza a importância do Angular como um framework moderno para desenvolvimento web, destacando suas características dinâmicas e modularidade. Além disso, o documento destaca que é propriedade intelectual da Innovagency e não pode ser alterado sem autorização.

1. Nome do Documento / Cliente / 13.03.17 / 11ISCTE FISTA’ 17 – Angular WorkShop
ANGULAR 2 Dive
WORKSHOP FISTA 2017
Alexandre Marreiros

2. Nome do Documento / Cliente / 13.03.17 / 22ISCTE FISTA’ 17 – Angular WorkShop
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@innovagency.com
www.innovagency.com
Digitalmindignition.com

3. Nome do Documento / Cliente / 13.03.17 / 33ISCTE FISTA’ 17 – Angular WorkShop
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.
STATE OF THE ART

4. Nome do Documento / Cliente / 13.03.17 / 44ISCTE FISTA’ 17 – Angular WorkShop
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.

5. Nome do Documento / Cliente / 13.03.17 / 55ISCTE FISTA’ 17 – Angular WorkShop
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.

6. Nome do Documento / Cliente / 13.03.17 / 66ISCTE FISTA’ 17 – Angular WorkShop
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.

7. Nome do Documento / Cliente / 13.03.17 / 77ISCTE FISTA’ 17 – Angular WorkShop
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.

8. Nome do Documento / Cliente / 13.03.17 / 88ISCTE FISTA’ 17 – Angular WorkShop
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.

9. Nome do Documento / Cliente / 13.03.17 / 99ISCTE FISTA’ 17 – Angular WorkShop
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.
Requirements

10. Nome do Documento / Cliente / 13.03.17 / 1010ISCTE FISTA’ 17 – Angular WorkShop
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.
REQUIREMENTS TO LEARN ANGULAR
Understand JavaScript nuclear concepts and principles

11. Nome do Documento / Cliente / 13.03.17 / 1111ISCTE FISTA’ 17 – Angular WorkShop
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.
JavaScript
Data types and data strutures
In JavaScript, there are 6 primitive data types, a primitive (primitive value, primitive data type) is data that is not an object and has no methods.
Primitives:
Null
In computer science, a null value represents a reference that points, generally intentionally, to a nonexistent or invalid object or address.
Undefined
A primitive value automatically assigned to variables that have just been declared or to formal arguments for which there are no actual
arguments.
Number
In JavaScript, Number is a numeric data type in the double-precision 64-bit floating point
String
In any computer programming language, a string is a sequence of characters used to represent text.
Object
Object refers to a data structure containing data and instructions for working with the data.

12. Nome do Documento / Cliente / 13.03.17 / 1212ISCTE FISTA’ 17 – Angular WorkShop
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.
JavaScript
Language
Is a function oriented language that is read by the browser javascript virtual machine in real time
Has as basic concept off interatio with the user the DOM tree that is the object representation off the HTML elements of a page
Is not object oriented but allow the usage off the object concept
var user = {
"first_name" : "Julien",
"last_name" : "Renaux"
}
console.log("My name is " + user["first_name"] + " " + user["last_name"]); // My name is Julien Renaux

13. Nome do Documento / Cliente / 13.03.17 / 1313ISCTE FISTA’ 17 – Angular WorkShop
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.
JavaScript
JavaScript Study Reference
https://developer.mozilla.org/en-US/docs/Web/JavaScript

14. Nome do Documento / Cliente / 13.03.17 / 1414ISCTE FISTA’ 17 – Angular WorkShop
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 2.0

15. Nome do Documento / Cliente / 13.03.17 / 1515ISCTE FISTA’ 17 – Angular WorkShop
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 is a full modern webframework, that enable us to
build core apps over Web Stack”
John Papa

16. Nome do Documento / Cliente / 13.03.17 / 1616ISCTE FISTA’ 17 – Angular WorkShop
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.
“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 Alliance

17. Nome do Documento / Cliente / 13.03.17 / 1717ISCTE FISTA’ 17 – Angular WorkShop
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

18. Nome do Documento / Cliente / 13.03.17 / 1818ISCTE FISTA’ 17 – Angular WorkShop
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.
Language
Angular language support technologies
ES5 ES6 TypeScript Dart
No Compile
Compiled
JavaScript
based

19. Nome do Documento / Cliente / 13.03.17 / 1919ISCTE FISTA’ 17 – Angular WorkShop
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.
Language
Angular language support technologies
ES5 ES6 TypeScript
No Types Support Types Support

20. Nome do Documento / Cliente / 13.03.17 / 2020ISCTE FISTA’ 17 – Angular WorkShop
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.

21. Nome do Documento / Cliente / 13.03.17 / 2121ISCTE FISTA’ 17 – Angular WorkShop
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.
TypeScript
• Strong Type
• IDE Support
• Syntax checking
• PreCompiled

22. Nome do Documento / Cliente / 13.03.17 / 2222ISCTE FISTA’ 17 – Angular WorkShop
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.
https://www.typescriptlang.or

23. Nome do Documento / Cliente / 13.03.17 / 2323ISCTE FISTA’ 17 – Angular WorkShop
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 Popular feacure
Fast Friendly
Modern

24. Nome do Documento / Cliente / 13.03.17 / 2424ISCTE FISTA’ 17 – Angular WorkShop
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 differents to traditional Web Scripting
Initial Loads
Change Detection
Rendering

25. Nome do Documento / Cliente / 13.03.17 / 2525ISCTE FISTA’ 17 – Angular WorkShop
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

26. Nome do Documento / Cliente / 13.03.17 / 2626ISCTE FISTA’ 17 – Angular WorkShop
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

27. Nome do Documento / Cliente / 13.03.17 / 2727ISCTE FISTA’ 17 – Angular WorkShop
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.

28. Nome do Documento / Cliente / 13.03.17 / 2828ISCTE FISTA’ 17 – Angular WorkShop
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>’
})

29. Nome do Documento / Cliente / 13.03.17 / 2929ISCTE FISTA’ 17 – Angular WorkShop
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

30. Nome do Documento / Cliente / 13.03.17 / 3030ISCTE FISTA’ 17 – Angular WorkShop
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
• Noe 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

31. Nome do Documento / Cliente / 13.03.17 / 3131ISCTE FISTA’ 17 – Angular WorkShop
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.
Component Architecture
Angular Component inside out:
-A component controls a patch of screen called a view.
-A template is a form of HTML that tells Angular how to render
the component.
-Metadata tells Angular how to process a class.

32. Nome do Documento / Cliente / 13.03.17 / 3232ISCTE FISTA’ 17 – Angular WorkShop
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.
Component Architecture
export class HeroListComponent implements OnInit {
heroes: Hero[];
selectedHero: Hero;
constructor(private service: HeroService) { }
ngOnInit() {
this.heroes = this.service.getHeroes();
}
selectHero(hero: Hero) { this.selectedHero = hero; }
}

33. Nome do Documento / Cliente / 13.03.17 / 3333ISCTE FISTA’ 17 – Angular WorkShop
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.
Component Architecture
<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
<li *ngFor="let hero of heroes" (click)="selectHero(hero)">
{{hero.name}}
</li>
</ul>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-
detail>

34. Nome do Documento / Cliente / 13.03.17 / 3434ISCTE FISTA’ 17 – Angular WorkShop
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.
Component Architecture
@Component({
moduleId: module.id,
selector: 'hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

35. Nome do Documento / Cliente / 13.03.17 / 3535ISCTE FISTA’ 17 – Angular WorkShop
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 Component Wrapup

36. Nome do Documento / Cliente / 13.03.17 / 3636ISCTE FISTA’ 17 – Angular WorkShop

37. Nome do Documento / Cliente / 13.03.17 / 3737ISCTE FISTA’ 17 – Angular WorkShop