ngulargithub.com/mgechevtwitter.com/mgechevblog.mgechev.comIntegrated Development Platform
View Slide
agenda
What isAngular
Mobile• Web apps• Ionic• NativeScript
Desktop• Web apps• Electron
core(zones, di, abstractions, etc.)
core(zones, di, abstractions, etc.)animations
compilercore(zones, di, abstractions, etc.)animations
httpcompilercore(zones, di, abstractions, etc.)animations
forms httpcompilercore(zones, di, abstractions, etc.)animations
forms httpcompilercore(zones, di, abstractions, etc.)routeranimations
forms httpcompilercore(zones, di, abstractions, etc.)routeri18nanimations
forms httpcompilercore(zones, di, abstractions, etc.)routerngUpgradei18nanimations
PWAforms httpcompilercore(zones, di, abstractions, etc.)routerngUpgradei18nanimations
UniversalPWAforms httpcompilercore(zones, di, abstractions, etc.)routerngUpgradei18nanimations
componentsUniversalPWAforms httpcompilercore(zones, di, abstractions, etc.)routerngUpgradei18nanimations
CLI componentsUniversalPWAforms httpcompilercore(zones, di, abstractions, etc.)routerngUpgradei18nanimations
languageservicesCLI componentsUniversalPWAforms httpcompilercore(zones, di, abstractions, etc.)routerngUpgradei18nanimations
angularfire2languageservicesCLI componentsUniversalPWAforms httpcompilercore(zones, di, abstractions, etc.)routeri18nngUpgradeanimations
angular-cli
$ npm i -g @angular/cli$ ng new hello-world
$ cd hello-world$ ng serve
Angular Core
Core• Components• Ultrafast Change Detection• More abstractions as you need them
@Component({selector: 'hello-world',template: 'Hello, {{user.name}}!'})class HelloWorldComponent {getData() {fetch('https://example.com/data.json').then(response => response.json()).then(data => this.user = data);}}Hello world in Angular
Compiler
“Compiles your templates toJavaScript instructions”
template.htmlHowdy! Here’s a list:FirstSecond
compiled.jselementStart(0, "section");text(1, " Howdy! Here's a list: ");elementStart(2, "ul");elementStart(3, "li");text(4, "First");elementEnd();elementStart(5, "li");text(6, "Second");elementEnd();elementEnd();elementEnd();
compiled.jse(0, "section");t(1, " Howdy! Here's a list: ");e(2, "ul");e(3, "li");t(4, "First");n();e(5, "li");t(6, "Second");n();n();n();
compiled.jse(0,"section"),t(1,"Howdy! Here's a list:"),e(2,"ul"),e(3,"li"),t(4,"First"),n(),e(5,"li"),t(6,"Second"),n(),n(),n();
Developmentexperience
Typical JavaScript experience
Angular is…• Built with TypeScript• Compile-time type checking• Great IDE/text editors support• Analyzable templates
Type-checking and IntelliSense intemplates
codelyzer
“codelyzer is a project which aimsto enforce common style and verifycorrectness of your program”
Client Server
Client ServerGET /GET *loop
Client ServerGET /GET *loopRunning JavaScript
Client ServerGET /GET *loopGET *loop
server-side rendering
Client ServerGET /
Client ServerGET /Running JavaScript
❤ Angular Community ❤
ngAtlanta"ngIndia#Angular NL$ng-conf"ngVikings%Angular Day&Angular inDepth'ngDenver"NG-MY(ng-japan)NG-DE*ng-SriLanka+AngularConnect,ngSpain-NGRome&NGHonduras.ngTaiwan/ngTalks'NG-BE0ngBolivia1AngularMix"ngPoland2AngularUP3ngChina4
Thank you!github.com/mgechevtwitter.com/mgechevblog.mgechev.com