Angular: Getting Started
INTRODUCTION
Deborah Kurata
CONSULTANT | SPEAKER | AUTHOR | MVP | GDE
@deborahkurata | blogs.msmvps.com/deborahk/
Angular Is …
A JavaScript framework
For building client-side applications
Using HTML, CSS and JavaScript
Why Angular?
Expressive Powerful Modular Built-in
HTML Data By Design Back-End
Binding Integration
Why a New Angular?
Built for Modern Simplified Enhances
API Productivity
Speed
Module
Overview Anatomy of an Angular Application
Getting the Most from This Course
Sample Application
Course Outline
Anatomy of an Angular Application
Application
= Component
+ Component
+ Component …
Services
Component
Class
= + +
Properties
Component Template Metadata
Methods
Angular Modules
Root Feature
Angular Module Angular Module
Component Component
Component Component
Component Component
Component Component
Prerequisites
Required Helpful Not Required
• JavaScript • Object-oriented • Prior knowledge of
• HTML programming Angular
• CSS (OOP) concepts • Prior knowledge of
• C++, C#, Java, … TypeScript
Thoughts? Comments? Questions?
@deborahkurata
Blog Post
http://blogs.msmvps.com/deborahk/angular-2-getting-started-problem-solver/
Checklist
Review module concepts
Code along assistance
Revisit as you build
GitHub Repository
https://github.com/DeborahK/Angular-GettingStarted
Demo
Sample Application in Action
Sample Application Architecture
Welcome
Component
App Product List
index.html
Component Component
Star
Component
Product Detail
Product Data Component
Service
First Things First
Introduction to Components
Course Templates, Interpolation, and Directives
Outline Data Binding & Pipes
More on Components
Building Nested Components
Services and Dependency Injection
Retrieving Data Using Http
Navigation and Routing
Angular Modules
Building, Testing and Deploying with the CLI