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

Содержание

1. AngularJS
2. Архитектура приложения Angular Module Template Component metadata Directive metadata Event binding Property binding Injector Service
3. Module *.module.ts import { NgModule }
4. export class AppComponent { title =
5. Template *.component.html Hero List Pick
6. [(ng-model)] = “property” Data binding {{hero.name}}
7. Directive import { Component} from
8. @Injectable export class CourseService { constructor(private
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
11. Data Flow app.module.ts course.module.ts course-list.component.ts course-details.component.ts app-course-details
12. Events Flow app.module.ts course.module.ts course-list.component.ts course-details.component.ts app-course-details
13. Задание По задаче из backlog’а сделать: Список
14. Пример Задача: Список пользователей Компоненты: Список

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

Слайд 1AngularJS

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

Слайд 3Module
*.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

Слайд 4export 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

Слайд 5Template
*.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”

Слайд 7Directive
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

Слайд 10Templates 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

Слайд 11Data 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

Слайд 12Events 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’а сделать:
Список необходимых компонент
Описать назначение компонент
Нарисовать эскиз шаблона

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

Слайд 14Пример
Задача: Список пользователей
Компоненты:

Список пользователей

Отображает список ФИО пользователей, реагирует на нажатие на

пользователя изменением информации в компоненте детализации

Детализация пользователя

Отображает детальную информацию о выбранном из списка пользователе: ФИО, дату регистрации, почту ...

Шаблоны:

Скачать презентацию

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

Содержание

Слайд 1AngularJS

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

Слайд 3Module
*.module.ts

import { NgModule } from '@angular/core'; import { BrowserModule }

Слайд 4export class AppComponent {
title = ‘app works!’;
}
import { Component}

Слайд 5Template
*.component.html

Hero List

Pick a hero from the list

Слайд 6[(ng-model)] = “property”
Data binding
{{hero.name}}

Two-way data binding

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

Слайд 7Directive
import { Component} from '@angular/core'; @Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’,

Слайд 8@Injectable
export class CourseService { constructor(private backend: BackendService) { }
getCourses() {

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

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

Слайд 14Пример
Задача: Список пользователей
Компоненты:

Список пользователей

Отображает список ФИО пользователей, реагирует на нажатие на

Обратная связь

Что такое ThePresentation.ru?

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

Содержание

Слайд 1AngularJS

Слайд 2Архитектура приложения AngularModuleTemplateComponentmetadataDirectivemetadataEvent bindingProperty bindingInjectorService

Слайд 3Module*.module.tsimport { NgModule } from '@angular/core'; import { BrowserModule }

Слайд 4export class AppComponent { title = ‘app works!’;}import { Component}

Слайд 5Template*.component.htmlHero ListPick a hero from the list

Слайд 6[(ng-model)] = “property”Data binding{{hero.name}} Two-way data bindingDOMComponent{{value}}[property] = “value”(event)

Слайд 7Directiveimport { Component} from '@angular/core'; @Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’,

Слайд 8@Injectableexport class CourseService { constructor(private backend: BackendService) { } getCourses() {

Слайд 9Архитектура приложенияindex.htmlApp ComponentCourse List ComponentCourse ComponentCourse Details ComponentCourse Service

Слайд 11Data Flowapp.module.tscourse.module.tscourse-list.component.tscourse-details.component.tsapp-course-detailsapp-course-listapp.component.tscourse-details.component.htmlcourse.component.tsapp-courseapp-rootcourse.component.htmlapp.component.htmlcourse.service.tscourse-list.component.html

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

Слайд 14ПримерЗадача: Список пользователейКомпоненты:Список пользователей Отображает список ФИО пользователей, реагирует на нажатие на

Похожие презентации

Обратная связь

Что такое ThePresentation.ru?

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

Слайд 3Module
*.module.ts

import { NgModule } from '@angular/core'; import { BrowserModule }

Слайд 4export class AppComponent {
title = ‘app works!’;
}
import { Component}

Слайд 5Template
*.component.html

Hero List

Pick a hero from the list

Слайд 6[(ng-model)] = “property”
Data binding
{{hero.name}}

Two-way data binding

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

Слайд 7Directive
import { Component} from '@angular/core'; @Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’,

Слайд 8@Injectable
export class CourseService { constructor(private backend: BackendService) { }
getCourses() {

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

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

Слайд 14Пример
Задача: Список пользователей
Компоненты:

Список пользователей

Отображает список ФИО пользователей, реагирует на нажатие на