type of angular 2

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

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

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

https://www.typescriptlang.org/

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.

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.

Controller View

Angular Code

Return

RequestRouting via BrowserRequest

Routing via SPA Request

“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

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

Angular Directive / Templating / Modulation

<ul>

<li *ngFor="#object of createRange(10)">Something</li>

</ul>

Dart

No Compile

Compiled

JavaScript based

Dart

No Compile

Compiled

JavaScript based

ES5 ES6 TypeScript

Core Modules Costum Modules

SPA Entry Point Modules

TemplateComponent< HTML >

Metadata(Component)

Component

Event BindingData Binding

Directives{ }

Services Services Services

Business Logic

Local Storage(database or cookie)

WebServiceIntegration

Directives{ }

Services

Dependency injection

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

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.

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>’

})

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

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

Tools

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