AngularJS презентация

Архитектура приложения Angular
Module
Template
Component
metadata
Directive
metadata
Event binding
Property binding
Injector
Service

Module
*.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
decorator
service
main view

export class AppComponent {
title = ‘app works!’;
}
import { Component} from '@angular/core';
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
Component & Metadata
*.component.ts
Component
metadata

Template
*.component.html
Hero List
Pick a hero from the list {{hero.name}}

[(ng-model)] = “property”
Data binding
{{hero.name}}
Two-way data binding
DOM
Component
{{value}}
[property] = “value”
(event) = ”handler”

Directive
import { Component} from '@angular/core';
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
app/.*component.html (structural)
hero of heroes">

@Injectable
export class CourseService {
constructor(private backend: BackendService) { }
getCourses() {
return this.backend.getAll(Hero); }
}
Service
Dependency injection
@Component({
providers: [CourseService]
})
export class CourseComponent{
constructor(private courseService: CourseService) { }
}

Архитектура приложения
index.html
App Component
Course List Component
Course Component
Course Details Component
Course Service

Templates Flow
app.module.ts
course.module.ts
course-list.component.ts
course-details.component.ts
app-course-details
app-course-list
course-list.component.html
app.component.ts
course-details.component.html
course.component.ts
app-course
app-root
course.component.html
app.component.html
course.service.ts

Data Flow
app.module.ts
course.module.ts
course-list.component.ts
course-details.component.ts
app-course-details
app-course-list
app.component.ts
course-details.component.html
course.component.ts
app-course
app-root
course.component.html
app.component.html
course.service.ts
course-list.component.html

Events Flow
app.module.ts
course.module.ts
course-list.component.ts
course-details.component.ts
app-course-details
app-course-list
course-list.component.html
app.component.ts
course-details.component.html
app-root
app.component.html
course.service.ts
course.component.ts
app-course
course.component.html

Задание
По задаче из backlog’а сделать:
Список необходимых компонент
Описать назначение компонент
Нарисовать эскиз шаблона для компонентов