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
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
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!
Angular on cross platforms
By Seiji Ralph Villafranca
