Introduction to Angular

@yourtwitter Introduction to Angular Minko Gechev twitter.com/mgechev github.com/mgechev blog.mgechev.com

twitter.com/mgechev

@mgechev

@mgechev 2,000+ Projects at Google

@mgechev 1,500,000+ Angular Developers Worldwide

@mgechev With an Outstanding Community ♥

@mgechev Annual Angular Conferences

ngAtlanta ngIndia Angular NL ng-conf ngVikings Angular Day Angular in
Depth ngDenver NG-MY ng-japan NG-DE ng-SriLanka Angular Connect ngSpain NGRome NG Honduras ngTaiwan ngTalks NG-BE ngBolivia AngularMix ngPoland AngularUP ngChina

@mgechev Over 780 Angular Meetups Worldwide

@mgechev Framework

@mgechev Framework CLI Components

@mgechev Framework CLI Components I18n Language service Router Animations Forms
PWA HTTP More!

@mgechev Angular is a platform for making web developers productive

@yourtwitter @mgechev Developing apps with Angular • Scaffold a project
with the CLI • Use Angular framework & TypeScript • Composition of components

@mgechev Why TypeScript?

@yourtwitter @mgechev TypeScript provides • Great DX (Development Experience) •
Reduces the bugs in our programs • Is well maintained and feature rich

twitter.com/mgechev >15% of bugs detectable at build time

twitter.com/mgechev

@mgechev How do I get started?

@yourtwitter $ npm i -g @angular/cli $ ng new my-app
$ ng serve Create a new project

@mgechev “Hello, world!” in Angular

@yourtwitter @Component({ selector: 'my-cmp', template: `Hello, world!` }) export class
MyComponent {}

twitter.com/mgechev

@yourtwitter @Component({ selector: 'my-cmp', template: `Hello, {{name}}!` }) export class
MyComponent { @Input() name: string; }

@yourtwitter @Component({ selector: 'app-root', template: '<my-cmp name="KulKul"> </my-cmp>' }) export
class AppComponent {}

@yourtwitter @Component({ selector: 'app-root', template: '<my-cmp [name]="name"> </my-cmp>' }) export
class AppComponent { name = 'KulKul'; }

@yourtwitter @Component({ selector: 'my-cmp', template: `Hello, {{name}}!` }) export class
MyComponent { @Input() name: string; } @Component({ selector: 'app-root', template: '<my-cmp name="KulKul"> </my-cmp>' }) export class AppComponent {}

@mgechev AppComponent MyComponent name

twitter.com/mgechev

@yourtwitter $ ng add @angular/material Add material design support

@mgechev

twitter.com/mgechev

@mgechev Backend integrations

twitter.com/mgechev

@mgechev Deployment

@yourtwitter $ ng add @angular/fire $ ng deploy Deploy a
project

@mgechev Partnering with

Angular Version Number 9.1.11

Angular Version Number X.Y.Z major minor patch

@mgechev Release schedule Two major releases a year

@mgechev How do you update?

@mgechev 2,000+ Projects at Google

@yourtwitter $ ng update @angular/core @angular/cli Update an existing project

twitter.com/mgechev

@mgechev Framework

@mgechev Framework CLI Components

@mgechev Framework CLI Components I18n Language service Router Animations Forms
PWA HTTP More!

@mgechev

@mgechev Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com Survey: mgv.io/talk

Introduction to Angular

Introduction to Angular

More Decks by Minko Gechev

Other Decks in Programming

Featured

Transcript