SlideShare a Scribd company logo
Angular2Getting Start
Author:
TU Tran
Skype: tranthanhtu83
Scope
TU Tran
- Understand how the angular app looks.
- Create and navigate between pages
- Get data form remote source and display on UI
Resources
TU Tran
- Sample code: https://github.com/thanhtuit27/angular2_gettingstart
- Angular docs: https://angular.io/
- Visual code: https://code.visualstudio.com
- Slides: http://www.slideshare.net/TuTran10/angular2-getstart-62750184
 Overview
 Config & bootstrap Angular
 Route & component
 Data binding
 Service & REST (Http)
 Common directive & pipes
Angular 2
TU Tran
Overview
TU Tran
Config & bootstrap Angular
TU Tran
Route & Component
TU Tran
Route & Component
TU Tran
Data binding
TU Tran
Service
TU Tran
HTTP
TU Tran
Directive
TU Tran
 Component Directive
 Attribute Directive
 Structural Directive
Component Directive
TU Tran
Attribute Directive
TU Tran
Structural Directive
TU Tran
A Structural directive changes the DOM layout by
adding and removing DOM elements. We've seen
three of the built-in structural directives in other
chapters: ngIf, ngSwitch and ngFor.
TU Tran
Thank You

More Related Content

Similar to Angular2 getstart

Fullstack Part 2 - Angular
Fullstack Part 2 - AngularFullstack Part 2 - Angular
Fullstack Part 2 - Angular
Tu Tran
 
Realizzare Single Page Application con Angular2
Realizzare Single Page Application con Angular2Realizzare Single Page Application con Angular2
Realizzare Single Page Application con Angular2
Michele Aponte
 
Angular 2 Routing
Angular 2   RoutingAngular 2   Routing
Angular 2 Routing
Andres Ciceri
 
Mean stack training-course-content
Mean stack training-course-contentMean stack training-course-content
Mean stack training-course-content
Training Institute
 
Angular 2 release final
Angular 2   release finalAngular 2   release final
Angular 2 release final
Andres Ciceri
 
Single Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with AngularSingle Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with Angular
Sparkhound Inc.
 
Angular 4 fronts
Angular 4 frontsAngular 4 fronts
Angular 4 fronts
badal dubla
 
Angular from Zero to Mastery - Training (Intermediate)
Angular from Zero to Mastery - Training (Intermediate)Angular from Zero to Mastery - Training (Intermediate)
Angular from Zero to Mastery - Training (Intermediate)
Smail LOUNES
 
El viaje de Angular1 a Angular2
El viaje de Angular1 a Angular2El viaje de Angular1 a Angular2
El viaje de Angular1 a Angular2
Antonio de la Torre Fernández
 
Angular js 2.0 beta
Angular js 2.0 betaAngular js 2.0 beta
Angular js 2.0 beta
Nagaraju Sangam
 
Understand routing in angular 2
Understand routing in angular 2Understand routing in angular 2
Understand routing in angular 2
codeandyou forums
 
Angular Framework.pptx
Angular Framework.pptxAngular Framework.pptx
Angular Framework.pptx
varshadixit10
 
Angular 2 - Better or worse
Angular 2 - Better or worseAngular 2 - Better or worse
Angular 2 - Better or worse
Vladimir Georgiev
 
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | EdurekaAngular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
Edureka!
 
Angular Interview Questions in 2023 - Instaily Academy
Angular Interview Questions in 2023 - Instaily AcademyAngular Interview Questions in 2023 - Instaily Academy
Angular Interview Questions in 2023 - Instaily Academy
Instaily Academy
 
Angular 2: core concepts
Angular 2: core conceptsAngular 2: core concepts
Angular 2: core concepts
Codemotion
 
Angular js workshop
Angular js workshopAngular js workshop
Angular js workshop
Rolands Krumbergs
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
Dor Moshe
 
Angular interview questions
Angular interview questionsAngular interview questions
Angular interview questions
Goa App
 
Angular Introduction By Surekha Gadkari
Angular Introduction By Surekha GadkariAngular Introduction By Surekha Gadkari
Angular Introduction By Surekha Gadkari
Surekha Gadkari
 

Similar to Angular2 getstart (20)

Fullstack Part 2 - Angular
Fullstack Part 2 - AngularFullstack Part 2 - Angular
Fullstack Part 2 - Angular
 
Realizzare Single Page Application con Angular2
Realizzare Single Page Application con Angular2Realizzare Single Page Application con Angular2
Realizzare Single Page Application con Angular2
 
Angular 2 Routing
Angular 2   RoutingAngular 2   Routing
Angular 2 Routing
 
Mean stack training-course-content
Mean stack training-course-contentMean stack training-course-content
Mean stack training-course-content
 
Angular 2 release final
Angular 2   release finalAngular 2   release final
Angular 2 release final
 
Single Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with AngularSingle Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with Angular
 
Angular 4 fronts
Angular 4 frontsAngular 4 fronts
Angular 4 fronts
 
Angular from Zero to Mastery - Training (Intermediate)
Angular from Zero to Mastery - Training (Intermediate)Angular from Zero to Mastery - Training (Intermediate)
Angular from Zero to Mastery - Training (Intermediate)
 
El viaje de Angular1 a Angular2
El viaje de Angular1 a Angular2El viaje de Angular1 a Angular2
El viaje de Angular1 a Angular2
 
Angular js 2.0 beta
Angular js 2.0 betaAngular js 2.0 beta
Angular js 2.0 beta
 
Understand routing in angular 2
Understand routing in angular 2Understand routing in angular 2
Understand routing in angular 2
 
Angular Framework.pptx
Angular Framework.pptxAngular Framework.pptx
Angular Framework.pptx
 
Angular 2 - Better or worse
Angular 2 - Better or worseAngular 2 - Better or worse
Angular 2 - Better or worse
 
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | EdurekaAngular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
 
Angular Interview Questions in 2023 - Instaily Academy
Angular Interview Questions in 2023 - Instaily AcademyAngular Interview Questions in 2023 - Instaily Academy
Angular Interview Questions in 2023 - Instaily Academy
 
Angular 2: core concepts
Angular 2: core conceptsAngular 2: core concepts
Angular 2: core concepts
 
Angular js workshop
Angular js workshopAngular js workshop
Angular js workshop
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
 
Angular interview questions
Angular interview questionsAngular interview questions
Angular interview questions
 
Angular Introduction By Surekha Gadkari
Angular Introduction By Surekha GadkariAngular Introduction By Surekha Gadkari
Angular Introduction By Surekha Gadkari
 

Recently uploaded

2024 RoOUG Security model for the cloud.pptx
2024 RoOUG Security model for the cloud.pptx2024 RoOUG Security model for the cloud.pptx
2024 RoOUG Security model for the cloud.pptx
Georgi Kodinov
 
Text-Summarization-of-Breaking-News-Using-Fine-tuning-BART-Model.pptx
Text-Summarization-of-Breaking-News-Using-Fine-tuning-BART-Model.pptxText-Summarization-of-Breaking-News-Using-Fine-tuning-BART-Model.pptx
Text-Summarization-of-Breaking-News-Using-Fine-tuning-BART-Model.pptx
ShamsuddeenMuhammadA
 
Introduction to Pygame (Lecture 7 Python Game Development)
Introduction to Pygame (Lecture 7 Python Game Development)Introduction to Pygame (Lecture 7 Python Game Development)
Introduction to Pygame (Lecture 7 Python Game Development)
abdulrafaychaudhry
 
Orion Context Broker introduction 20240604
Orion Context Broker introduction 20240604Orion Context Broker introduction 20240604
Orion Context Broker introduction 20240604
Fermin Galan
 
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus
 
Cyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdfCyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdf
Cyanic lab
 
Vitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke Java Microservices Resume.pdfVitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke
 
First Steps with Globus Compute Multi-User Endpoints
First Steps with Globus Compute Multi-User EndpointsFirst Steps with Globus Compute Multi-User Endpoints
First Steps with Globus Compute Multi-User Endpoints
Globus
 
Understanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSageUnderstanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSage
Globus
 
Navigating the Metaverse: A Journey into Virtual Evolution"
Navigating the Metaverse: A Journey into Virtual Evolution"Navigating the Metaverse: A Journey into Virtual Evolution"
Navigating the Metaverse: A Journey into Virtual Evolution"
Donna Lenk
 
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
Mind IT Systems
 
Utilocate provides Smarter, Better, Faster, Safer Locate Ticket Management
Utilocate provides Smarter, Better, Faster, Safer Locate Ticket ManagementUtilocate provides Smarter, Better, Faster, Safer Locate Ticket Management
Utilocate provides Smarter, Better, Faster, Safer Locate Ticket Management
Utilocate
 
May Marketo Masterclass, London MUG May 22 2024.pdf
May Marketo Masterclass, London MUG May 22 2024.pdfMay Marketo Masterclass, London MUG May 22 2024.pdf
May Marketo Masterclass, London MUG May 22 2024.pdf
Adele Miller
 
GlobusWorld 2024 Opening Keynote session
GlobusWorld 2024 Opening Keynote sessionGlobusWorld 2024 Opening Keynote session
GlobusWorld 2024 Opening Keynote session
Globus
 
Lecture 1 Introduction to games development
Lecture 1 Introduction to games developmentLecture 1 Introduction to games development
Lecture 1 Introduction to games development
abdulrafaychaudhry
 
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdfDominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
AMB-Review
 
APIs for Browser Automation (MoT Meetup 2024)
APIs for Browser Automation (MoT Meetup 2024)APIs for Browser Automation (MoT Meetup 2024)
APIs for Browser Automation (MoT Meetup 2024)
Boni García
 
Vitthal Shirke Microservices Resume Montevideo
Vitthal Shirke Microservices Resume MontevideoVitthal Shirke Microservices Resume Montevideo
Vitthal Shirke Microservices Resume Montevideo
Vitthal Shirke
 
A Sighting of filterA in Typelevel Rite of Passage
A Sighting of filterA in Typelevel Rite of PassageA Sighting of filterA in Typelevel Rite of Passage
A Sighting of filterA in Typelevel Rite of Passage
Philip Schwarz
 
Large Language Models and the End of Programming
Large Language Models and the End of ProgrammingLarge Language Models and the End of Programming
Large Language Models and the End of Programming
Matt Welsh
 

Recently uploaded (20)

2024 RoOUG Security model for the cloud.pptx
2024 RoOUG Security model for the cloud.pptx2024 RoOUG Security model for the cloud.pptx
2024 RoOUG Security model for the cloud.pptx
 
Text-Summarization-of-Breaking-News-Using-Fine-tuning-BART-Model.pptx
Text-Summarization-of-Breaking-News-Using-Fine-tuning-BART-Model.pptxText-Summarization-of-Breaking-News-Using-Fine-tuning-BART-Model.pptx
Text-Summarization-of-Breaking-News-Using-Fine-tuning-BART-Model.pptx
 
Introduction to Pygame (Lecture 7 Python Game Development)
Introduction to Pygame (Lecture 7 Python Game Development)Introduction to Pygame (Lecture 7 Python Game Development)
Introduction to Pygame (Lecture 7 Python Game Development)
 
Orion Context Broker introduction 20240604
Orion Context Broker introduction 20240604Orion Context Broker introduction 20240604
Orion Context Broker introduction 20240604
 
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024
 
Cyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdfCyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdf
 
Vitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke Java Microservices Resume.pdfVitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke Java Microservices Resume.pdf
 
First Steps with Globus Compute Multi-User Endpoints
First Steps with Globus Compute Multi-User EndpointsFirst Steps with Globus Compute Multi-User Endpoints
First Steps with Globus Compute Multi-User Endpoints
 
Understanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSageUnderstanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSage
 
Navigating the Metaverse: A Journey into Virtual Evolution"
Navigating the Metaverse: A Journey into Virtual Evolution"Navigating the Metaverse: A Journey into Virtual Evolution"
Navigating the Metaverse: A Journey into Virtual Evolution"
 
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
 
Utilocate provides Smarter, Better, Faster, Safer Locate Ticket Management
Utilocate provides Smarter, Better, Faster, Safer Locate Ticket ManagementUtilocate provides Smarter, Better, Faster, Safer Locate Ticket Management
Utilocate provides Smarter, Better, Faster, Safer Locate Ticket Management
 
May Marketo Masterclass, London MUG May 22 2024.pdf
May Marketo Masterclass, London MUG May 22 2024.pdfMay Marketo Masterclass, London MUG May 22 2024.pdf
May Marketo Masterclass, London MUG May 22 2024.pdf
 
GlobusWorld 2024 Opening Keynote session
GlobusWorld 2024 Opening Keynote sessionGlobusWorld 2024 Opening Keynote session
GlobusWorld 2024 Opening Keynote session
 
Lecture 1 Introduction to games development
Lecture 1 Introduction to games developmentLecture 1 Introduction to games development
Lecture 1 Introduction to games development
 
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdfDominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
 
APIs for Browser Automation (MoT Meetup 2024)
APIs for Browser Automation (MoT Meetup 2024)APIs for Browser Automation (MoT Meetup 2024)
APIs for Browser Automation (MoT Meetup 2024)
 
Vitthal Shirke Microservices Resume Montevideo
Vitthal Shirke Microservices Resume MontevideoVitthal Shirke Microservices Resume Montevideo
Vitthal Shirke Microservices Resume Montevideo
 
A Sighting of filterA in Typelevel Rite of Passage
A Sighting of filterA in Typelevel Rite of PassageA Sighting of filterA in Typelevel Rite of Passage
A Sighting of filterA in Typelevel Rite of Passage
 
Large Language Models and the End of Programming
Large Language Models and the End of ProgrammingLarge Language Models and the End of Programming
Large Language Models and the End of Programming
 

Angular2 getstart

Editor's Notes

  1. Route with param
  2. Route with param