Angular "2"
Angular
Angular
note: I am not calling it "Angular 2"
Igor Minar
Angular Lead
Angular CLI
A utility that allows developers to create and manage Angular 2 projects
Angular is a platform
Angular is all about components
A component has two parts
A component has two parts
An annotation
A class
Component
The module we will use
Component
The module we will use
Importing component and OnInit from the module
Component
The module we will use
Importing component and OnInit from the module
@Component annotation will be used by the compiler to add functionality - in this case treat this class as a component
Component
The module we will use
Importing component and OnInit from the module
@Component annotation will be used by the compiler to add functionality - in this case treat this class as a component
the name we will use in our HTML to use this component
Component
The module we will use
Importing component and OnInit from the module
@Component annotation will be used by the compiler to add functionality - in this case treat this class as a component
the name we will use in our HTML to use this component
A template for our component
Component
The module we will use
Importing component and OnInit from the module
@Component annotation will be used by the compiler to add functionality - in this case treat this class as a component
the name we will use in our HTML to use this component
A template for our component
The stylesheet(s) for this component
Component
The module we will use
Importing component and OnInit from the module
@Component annotation will be used by the compiler to add functionality - in this case treat this class as a component
the name we will use in our HTML to use this component
A template for our component
The stylesheet(s) for this component
Business logic
Let's code
package.json
systemjs.config.js
tsconfig.json
Will contain all the dependencies needed for the app
Dynamic module loader
Will transpile TypeScript into valid JavaScript
Demo
What are components?
High Level
Basic component function
C1
C2
User
C3
C4