Embed Size (px)
Citation preview
Zyllem@Angular 2
AngularJS 2
@trungk18Front-end Developer@Zyllem
05/01/2023 Zyllem@Angular 2
Agenda
• Single Page Application (SPA)• What and Why Angular?• Angular 2.• Its concept• Github Demo App• Q&A
05/01/2023 Zyllem@Angular 2
Single Page Application?
05/01/2023 Zyllem@Angular 2
Traditional Application
JS begin parsing and executing to initialize date time picker, modal, etc.
05/01/2023 Zyllem@Angular 2
Single Page Application
AngularJS start parsing, downloading template, stylesheet, etc. and doing compiler on the browser
05/01/2023 Zyllem@Angular 2
Angular
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.
05/01/2023 Zyllem@Angular 2
Why Angular?
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
05/01/2023 Zyllem@Angular 2
Angular 1 Controller
05/01/2023 Zyllem@Angular 2
Angular 2 Component
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
05/01/2023
Angular 2 Concepts
Zyllem@Angular 2
05/01/2023
Component
Zyllem@Angular 2
LeftCmp CenterCmp MapCmp
TopCmp
05/01/2023
Boostrapping/Loading Application
Zyllem@Angular 2
Index.htmlSystemjs.config.js
main.ts
app.module.ts
app.component.ts
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.
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.
05/01/2023 Zyllem@Angular 2
Demo
https://plnkr.co/edit/0saDy43dTPpPBl100R0p?p=preview
05/01/2023 Zyllem@Angular 2
Q&A
