Angular
Intro. TypeScript
Angular
- SPA
- Component-based approach
- Runs on desktop and mobile
- Modular
- Testable
![](https://s3.amazonaws.com/media-p.slid.es/uploads/780174/images/5932807/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/780174/images/5932839/pasted-from-clipboard.png)
Building blocks
Modules
Components
Directives
Services
Router
Modules
Module
Components
Directives
Services
Router
Directives
<app-post *ngFor="let post of posts"></app-post>
<button myCoolButton>Click Me!</button>
<p *ngIf="amIAdmin">Woohoo, I'm an admin!</p>
Services
Component
Service
Backend
Router
Router
Feed page
Profile page
Let's get started
ng-cli
npm install -g @angular/cli
ng new my-new-app
cd new my-new-app
ng serve
Generate with ng-cli
![](https://s3.amazonaws.com/media-p.slid.es/uploads/780174/images/5933729/pasted-from-clipboard.png)
TypeScript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/780174/images/6530469/pasted-from-clipboard.png)
- Developed and maintained by Microsoft
- Strict syntactical superset of JavaScript
- Rapidly becoming Standard
- Designed for development of large applications
Pros and cons
- Improves code maintainability and readability
- Awesome documentation for your app
- Static analysis (IDE support + compilation)
- Syntax sugar
- More verbose
- Language configuration
- Separate package
![](https://s3.amazonaws.com/media-p.slid.es/uploads/780174/images/6530575/positive-clipart-pro-con-2.png)
How to start
npm install -g typescript
Compiling code:
tsc fileName.ts
Project should contain:
tsconfig.json
tsLint
Demo
Useful links
Q & A
Angular. Intro. Typescript
By Pavel Razuvalau
Angular. Intro. Typescript
- 760