introduction to angularjs 2
TRANSCRIPT
![Page 1: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/1.jpg)
Zyllem@Angular 2
AngularJS 2
@trungk18Front-end Developer@Zyllem
![Page 2: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/2.jpg)
05/01/2023 Zyllem@Angular 2
Agenda
• Single Page Application (SPA)• What and Why Angular?• Angular 2.• Its concept• Github Demo App• Q&A
![Page 3: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/3.jpg)
05/01/2023 Zyllem@Angular 2
Single Page Application?
![Page 4: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/4.jpg)
05/01/2023 Zyllem@Angular 2
Traditional Application
JS begin parsing and executing to initialize date time picker, modal, etc.
![Page 5: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/5.jpg)
05/01/2023 Zyllem@Angular 2
Single Page Application
AngularJS start parsing, downloading template, stylesheet, etc. and doing compiler on the browser
![Page 6: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/6.jpg)
05/01/2023 Zyllem@Angular 2
Angular
![Page 7: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/7.jpg)
05/01/2023 Zyllem@Angular 2
What is Angular?
• Angular is JavaScript framework.• Building client side application.• Using HTML,CSS and a programing language such as
JavaScript.
![Page 8: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/8.jpg)
05/01/2023 Zyllem@Angular 2
Why Angular?
![Page 9: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/9.jpg)
05/01/2023 Zyllem@Angular 2
Why Angular 2?
• Performance. • Component Based-UI. No more concept of controllers • Goodbye $scope • Modern – using new features – classes, object with
support of ES6 / TypeScript
![Page 10: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/10.jpg)
05/01/2023 Zyllem@Angular 2
Angular 1 Controller
![Page 11: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/11.jpg)
05/01/2023 Zyllem@Angular 2
Angular 2 Component
![Page 12: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/12.jpg)
05/01/2023
Component
Zyllem@Angular 2
• View layout• Created with
HTML• Includes
binding and directive
• Code supporting the view
• Created with TypeScript
• Includes• Property - data• Method - logic
• Extra data• Defines
with decorator
![Page 13: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/13.jpg)
05/01/2023
Angular 2 Concepts
Zyllem@Angular 2
![Page 14: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/14.jpg)
05/01/2023
Component
Zyllem@Angular 2
LeftCmp CenterCmp MapCmp
TopCmp
![Page 15: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/15.jpg)
05/01/2023
Boostrapping/Loading Application
Zyllem@Angular 2
Index.htmlSystemjs.config.js
main.ts
app.module.ts
app.component.ts
![Page 16: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/16.jpg)
05/01/2023
Available Language
Zyllem@Angular 2
• ES5(EcmaScript 5) – Run in the browser.• ES6(EcmaScript 2015) – Lots of new features (classes,
let, arrow) • TypeScript – Superset of JavaScript, Strong typing, IDE• Dart.
![Page 17: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/17.jpg)
05/01/2023
TypeScript
Zyllem@Angular 2
• Open source language.• Superset of JavaScript.• Transpiles to plain JavaScript.• Strongly typed.• .ts Extension.• Class-Based object orientation.
![Page 18: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/18.jpg)
05/01/2023 Zyllem@Angular 2
Demo
https://plnkr.co/edit/0saDy43dTPpPBl100R0p?p=preview
![Page 19: Introduction to AngularJS 2](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58819ba71a28ab0d358b796b/html5/thumbnails/19.jpg)
05/01/2023 Zyllem@Angular 2
Q&A