Angular

on cross platforms

github.com/SeijiV13

seijivillafranca.com

fb.com/seiji.villafranca

Seiji Villafranca

github.com/SeijiV13

Senior Developer, Wypoon Technologies Netherlands

Microsoft MVP

Auth0 Ambassador

Community Lead, AngularPH,

Author

seijivillafranca.com

Talks

What we will know today

Basics and fundamentals of Angular

Creating Angular using Angular CLI

Cloud Deployment

Cross Platform Deployment

What the hell is Angular?

Front End Framework

Single Page Application

Typescript Based

Component Based

Just some History

2010: Angular JS was born

meant for internal projects for faster development

released as an open source project for frontend web applications

Ionic supported AngularJS for Mobile

2014 - 2015: The Great Rewrite

AngularJS is left with JavaScript advancements

Switched into a totally new pattern (from Controllers to Component Based)

Angular 2+

2018 - Present

The Basics

let's learn angular first

Prerequisites

npm install –g @angular/cli

https://nodejs.org/en/

Check npm verision

npm -v

ng --version

Good to go?

Install Angular CLI

Install Node JS

ng new <project-name>

Create your Angular Project

Angular

Module

Component

Service

Collection of Components, Services, Directives, and also Modules

Can be imported into multiple Modules

A piece of code that defines the view with custom behaviors

Cannot be imported into multiple modules

Lets think of this one as a customized HTML Element with customized attributes

Used to communicate with endpoints

Used by components by dependency injection

Can also be injected by services

Module

Component

Service

@NgModule

@Component

@Injectable

Using Angular Decorators @

@NgModule({
	declarations: [
		…components, 
        directives
	],
	imports: [
		… modules
	],
	providers: [
		…services
	]
})
export class CoreModule {
}

@Component({
	selector: "app-root",
	templateUrl: "./app.component.html",
	styleUrls: ["./app.component.scss"]
})
export class AppComponent 
 implements OnInit {


}

@Injectable({ providedIn: "root" })
export class AwesomeService {
}

Angular

Module

Component

Service

ng generate module <module-name>

ng generate component <component-name>

ng generate service <service-name>

Shortcut: ng g m <module-name>

Shortcut: ng g c <component-name>

Shortcut: ng g s <service-name>

@NgModule

@Component

@Injectable

Flow

Component Life cycle hooks

Metadatas

Configuration for the component

selector: Tag name for the component

templateUrl : Path for the html file

styleUrls: Path/s for the CSS file

We use the selector to use components

Component Rendering

How does components communicate?

Component Interaction

@Input and @Output Property

Component Interaction

@Input decorator allows parent to pass data to child

parent.component.html

<child-component-two [chocolates]=“chocolates”/>
<button (click)=“sendChocolate()”/>

child.component.ts

parent.component.html

@Input() chocolates: number;

@Input and @Output Property

Component Interaction

@Output decorator allows child to pass to parent

parent.component.html

<child-component-two 
(emitChocolates)=“getSentChocolates()” 
[chocolates]=“chocolates”/>

child.component.ts

parent.component.html

@Input() chocolates: number;
@Output() emitChocolates:  new EventEmitter();

Component Interaction

Other Ways for Components to communicate

Services

Subjects

State Management

Routing

Configuring routes

Routing is also a module

Configured as a JSON data

Routing

Configuring routes

Pages are components

Does not retrieve the pages from server (Single Page Application)

Transferring from one route removes the component from DOM

Is angular only for web?

Angular on cross platforms

Open source UI toolkit for building native and web apps using HTML CSS and JavaScript

Can be integrated with Angular, React and Vue

Ionic doesn’t use native components at all and renders everything in HTML and CSS

open source framework to build truly native mobile app

directly communicates with the Native APIs, injects IOS and Android APIs into Javascript Virtual Machines

NativeScript UI is stored in XML files with CSS styling, logic stays on Typescript/JavScript files

website with all the benefits of an app

web application that can be “installed” on your system. It works offline when you don't have an internet connection

Service Workers!

Build you PWA app for Microsoft store and play store!

open source framework for building desktop applications

Can also be integrated with

Angular, React and Vuew

Built with Chromium and Node.js so you can build your app with HTML, CSS, and JavaScript.

What to else to learn?

other Angular features (directives, pipes, forms, subject etc.)

firebase authentications

ionic, nativescript, electorn etc.

https://www.facebook.com/groups/1133816916630570

AngularPH

https://www.facebook.com/Angular-PH-113942453649977

Group

Facebook Page

Website

https://angularph.org

Hey I'm a Mentor!

github.com/SeijiV13

seijivillafranca.com

fb.com/seiji.villafranca

Thank you

and happy coding!