AngularJS

Сентябрь 7, 2022

Содержание

2. Архитектура приложения Angular Module Template Component metadata Directive metadata Event binding Property binding Injector Service
3. Module *.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports:
4. export class AppComponent { title = ‘app works!’; } import { Component} from '@angular/core'; @Component({ selector:
5. Template *.component.html Hero List Pick a hero from the list {{hero.name}}
6. [(ng-model)] = “property” Data binding {{hero.name}} Two-way data binding DOM Component {{value}} [property] = “value” (event)
7. Directive import { Component} from '@angular/core'; @Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: [‘./app.component.css’] }) app/.*component.html (structural)
8. @Injectable export class CourseService { constructor(private backend: BackendService) { } getCourses() { return this.backend.getAll(Hero); } }
9. Архитектура приложения index.html App Component Course List Component Course Component Course Details Component Course Service
10. 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
11. 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
12. 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
13. Задание По задаче из backlog’а сделать: Список необходимых компонент Описать назначение компонент Нарисовать эскиз шаблона для
15. Скачать презентацию

Слайд 2

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

Слайд 3

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

Слайд 4

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

Слайд 5

Template
.component.html
Hero List

Pick a hero from the list*

heroes" (click)="selectHero(hero)">
{{hero.name}}

Слайд 6

[(ng-model)] = “property”
Data binding
{{hero.name}}

Two-way data binding

DOM
Component
{{value}}
[property] = “value”
(event)

= ”handler”

Слайд 7

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

(structural)

Слайд 8

@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) { } }

Слайд 9

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

Слайд 10

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

Слайд 11

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

Слайд 12

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

Слайд 13

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

для компонентов