AngularJS - Javascript библиотека

Июль 26, 2022

Главная
Информатика
AngularJS - Javascript библиотека

Содержание

2. Еще раз про прототипы, или как библиотеки оборачивают объекты Как js-библиотеки оборачивает своими функциями объекты ???
3. Одностраничное приложение (single page application - SPA) https://ru.wikipedia.org/wiki/Одностраничное_приложение SPA – это веб-приложение, размещенное на одной странице,
4. Императивный подход в программирование и декларативный Императивный подход – состоит в описании того как достигнуть требуемый
5. AngularJS попытка внести в JS декларативные элементы AngularJS – Javascript библиотека, и как любая JS-библиотека не
6. Директивы – основа AngularJS http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js Директива ng-app – определяет тег в рамках которого будет «крутится» Angular
7. Связка данных (data binding) ??? ng-init – директива задающая стартовые значения для модели.
8. Связка данных (data binding) ???
9. Связка данных (data binding) ColorPicker c тонкой настройкой без единой строчки JS-кода.
10. Связка данных (data binding) ColorPicker c тонкой настройкой без единой строчки JS-кода.
11. Model-view-controller (MVC, «модель-представление-контроллер», «модель-вид-контроллер»). Основная цель применения этой концепции состоит в отделении бизнес-логики (модели) от её
12. Вывод данных (директива ng-repeat) Возьмите шаблон с: http://js.courses.dp.ua/files/angular/ex03_clear.html ??? A
13. Вывод данных (директива ng-repeat) Директива ng-repeat позволяет многократно повторить вывод фрагмента разметки, вставляя в неё данные
14. http://js.courses.dp.ua/files/angular/get_phones_json.php Асинхронная загрузка и вывод данных $http – объект для выполнения ajax запросов. ??? B
15. Фильтрация данных ??? C Директива filter позволяет фильтровать выводимы данные, по каким-либо правилам.
16. Фильтрация данных Директива filter позволяет фильтровать выводимы данные, по каким-либо правилам.
17. Сортировка данных Директива orderBy позволяет указать критерий сортировки. ??? D
18. Сортировка данных Директива orderBy позволяет указать критерий сортировки. И порядок сортировки можно динамически менять. Добавьте следующие
19. Сортировка данных Директива orderBy позволяет указать критерий сортировки. И порядок сортировки можно динамически менять. Добавьте следующую
20. Сортировка данных (полный код) ??? E
21. Сортировка данных Директива orderBy позволяет указать критерий сортировки. И порядок сортировки можно динамически менять.
22. Помощь при валидации данных Директива ng-show – показывает либо скрывает элемент в заивисмости от значения данных
23. Помощь при валидации данных http://www.w3schools.com/angular/angular_validation.asp AngularJS добавляет к полям формы следующие свойства типа boolean: $untouched –
24. По мнению google лучший способ освоить AngularJS пройти обучалку https://docs.angularjs.org/tutorial
26. Скачать презентацию

Слайд 2

Еще раз про прототипы, или как библиотеки оборачивают объекты
Как js-библиотеки оборачивает

своими функциями объекты

???

Слайд 3

Одностраничное приложение (single page application - SPA)
https://ru.wikipedia.org/wiki/Одностраничное_приложение
SPA – это веб-приложение, размещенное

на одной странице, которая для обеспечения работы загружает все JS и CSS файлы вместе с загрузкой самой страницы (или по ходу работы AJAX-ом).

Gmail
типичный пример SPA

Слайд 4

Императивный подход в программирование и декларативный
Императивный подход – состоит в описании

того как достигнуть требуемый результат, т.е. необходимо написать последовательность действий, выполнив которую будет получен результат. JavaScript – императивный язык.

Декларативный подход – состоит в описании того что необходимо получить, оставив порядок выполнения и способ достижения результата «на усмотрение» компьютера. HTML&CSS – представители декларативного подхода.

Слайд 5

AngularJS
попытка внести в JS декларативные элементы
AngularJS – Javascript библиотека,

и как любая JS-библиотека не привносит ничего такого, чего нельзя написать на чистом JS, но как и все библиотеки направлена на уменьшение объема кода который пишет разработчик.

https://angularjs.org/

v.1

v.2 Beta

Слайд 6

Директивы – основа AngularJS
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
Директива ng-app – определяет тег в рамках которого

будет «крутится» Angular приложение.

Директива ng-model – определяет имя под которым будет доступного значение из поля ввода (модель).

{{x}} – директива вставляет данные из модели в тело документа.

???

Слайд 7

Связка данных (data binding)
???
ng-init – директива задающая стартовые значения для модели.

Слайд 8

Связка данных (data binding)
???

Слайд 9

Связка данных (data binding)
ColorPicker c тонкой настройкой без единой строчки JS-кода.

Слайд 10

Связка данных (data binding)
ColorPicker c тонкой настройкой без единой строчки JS-кода.

Слайд 11

Model-view-controller (MVC, «модель-представление-контроллер», «модель-вид-контроллер»).
Основная цель применения этой концепции состоит в отделении бизнес-логики

(модели) от её визуализации (представления, вида).

Слайд 12

Вывод данных (директива ng-repeat)
Возьмите шаблон с: http://js.courses.dp.ua/files/angular/ex03_clear.html
???
A

Слайд 13

Вывод данных (директива ng-repeat)
Директива ng-repeat позволяет многократно повторить вывод фрагмента разметки,

вставляя в неё данные из указанного массива.

Слайд 14

http://js.courses.dp.ua/files/angular/get_phones_json.php
Асинхронная загрузка и вывод данных
$http – объект для выполнения ajax запросов.
???
B

Слайд 15

Фильтрация данных
???
C
Директива filter позволяет фильтровать выводимы данные, по каким-либо правилам.

Слайд 16

Фильтрация данных
Директива filter позволяет фильтровать выводимы данные, по каким-либо правилам.

Слайд 17

Сортировка данных
Директива orderBy позволяет указать критерий сортировки.
???
D

Слайд 18

Сортировка данных
Директива orderBy позволяет указать критерий сортировки. И порядок сортировки можно

динамически менять.

Добавьте следующие стили:

Добавьте следующий код в контроллер:

???

Слайд 19

Сортировка данных
Директива orderBy позволяет указать критерий сортировки. И порядок сортировки можно

динамически менять.

Добавьте следующую разметку в документ:

???

Слайд 20

Сортировка данных (полный код)
???
E

Слайд 21

Сортировка данных
Директива orderBy позволяет указать критерий сортировки. И порядок сортировки можно

динамически менять.

Слайд 22

Помощь при валидации данных
Директива ng-show – показывает либо скрывает элемент в

заивисмости от значения данных в модели. ng-disable – выключает либо включает элемент ввода в заивисмости от значения данных в модели.

Слайд 23

Помощь при валидации данных
http://www.w3schools.com/angular/angular_validation.asp
AngularJS добавляет к полям формы следующие свойства типа

boolean:

$untouched – поле еще не получало фокус;
$touched – поле минимум 1 раз получало фокус;
$pristine – поле не было изменено (в нём может быть значение по умолчанию);
$dirty – поле было изменено по сравнению с версией по умолчанию;
$invalid – содержимое поля не проходит валидацию;
$valid – содержимое поля проходит валидацию.

Слайд 24

AngularJS - Javascript библиотека

Содержание

Еще раз про прототипы, или как библиотеки оборачивают объектыКак js-библиотеки оборачивает

Одностраничное приложение (single page application - SPA)https://ru.wikipedia.org/wiki/Одностраничное_приложениеSPA – это веб-приложение, размещенное

Императивный подход в программирование и декларативныйИмперативный подход – состоит в описании

AngularJS попытка внести в JS декларативные элементыAngularJS – Javascript библиотека,

Директивы – основа AngularJShttp://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.jsДиректива ng-app – определяет тег в рамках которого

Связка данных (data binding)???ng-init – директива задающая стартовые значения для модели.

Связка данных (data binding)???

Связка данных (data binding)ColorPicker c тонкой настройкой без единой строчки JS-кода.

Связка данных (data binding)ColorPicker c тонкой настройкой без единой строчки JS-кода.

Model-view-controller (MVC, «модель-представление-контроллер», «модель-вид-контроллер»).Основная цель применения этой концепции состоит в отделении бизнес-логики

Вывод данных (директива ng-repeat)Возьмите шаблон с: http://js.courses.dp.ua/files/angular/ex03_clear.html???A

Вывод данных (директива ng-repeat)Директива ng-repeat позволяет многократно повторить вывод фрагмента разметки,

http://js.courses.dp.ua/files/angular/get_phones_json.phpАсинхронная загрузка и вывод данных$http – объект для выполнения ajax запросов.???B

Фильтрация данных???CДиректива filter позволяет фильтровать выводимы данные, по каким-либо правилам.

Фильтрация данныхДиректива filter позволяет фильтровать выводимы данные, по каким-либо правилам.

Сортировка данныхДиректива orderBy позволяет указать критерий сортировки.???D

Сортировка данныхДиректива orderBy позволяет указать критерий сортировки. И порядок сортировки можно

Сортировка данныхДиректива orderBy позволяет указать критерий сортировки. И порядок сортировки можно

Сортировка данных (полный код)???E

Сортировка данныхДиректива orderBy позволяет указать критерий сортировки. И порядок сортировки можно

Помощь при валидации данныхДиректива ng-show – показывает либо скрывает элемент в

Помощь при валидации данныхhttp://www.w3schools.com/angular/angular_validation.aspAngularJS добавляет к полям формы следующие свойства типа

По мнению google лучший способ освоить AngularJS пройти обучалкуhttps://docs.angularjs.org/tutorial

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

Еще раз про прототипы, или как библиотеки оборачивают объекты
Как js-библиотеки оборачивает

Одностраничное приложение (single page application - SPA)
https://ru.wikipedia.org/wiki/Одностраничное_приложение
SPA – это веб-приложение, размещенное

Императивный подход в программирование и декларативный
Императивный подход – состоит в описании

AngularJS
попытка внести в JS декларативные элементы
AngularJS – Javascript библиотека,

Директивы – основа AngularJS
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
Директива ng-app – определяет тег в рамках которого

Связка данных (data binding)
???
ng-init – директива задающая стартовые значения для модели.

Связка данных (data binding)
???

Связка данных (data binding)
ColorPicker c тонкой настройкой без единой строчки JS-кода.

Связка данных (data binding)
ColorPicker c тонкой настройкой без единой строчки JS-кода.

Model-view-controller (MVC, «модель-представление-контроллер», «модель-вид-контроллер»).
Основная цель применения этой концепции состоит в отделении бизнес-логики

Вывод данных (директива ng-repeat)
Возьмите шаблон с: http://js.courses.dp.ua/files/angular/ex03_clear.html
???
A

Вывод данных (директива ng-repeat)
Директива ng-repeat позволяет многократно повторить вывод фрагмента разметки,

http://js.courses.dp.ua/files/angular/get_phones_json.php
Асинхронная загрузка и вывод данных
$http – объект для выполнения ajax запросов.
???
B

Фильтрация данных
???
C
Директива filter позволяет фильтровать выводимы данные, по каким-либо правилам.

Фильтрация данных
Директива filter позволяет фильтровать выводимы данные, по каким-либо правилам.

Сортировка данных
Директива orderBy позволяет указать критерий сортировки.
???
D

Сортировка данных
Директива orderBy позволяет указать критерий сортировки. И порядок сортировки можно

Сортировка данных
Директива orderBy позволяет указать критерий сортировки. И порядок сортировки можно

Сортировка данных (полный код)
???
E

Сортировка данных
Директива orderBy позволяет указать критерий сортировки. И порядок сортировки можно

Помощь при валидации данных
Директива ng-show – показывает либо скрывает элемент в

Помощь при валидации данных
http://www.w3schools.com/angular/angular_validation.asp
AngularJS добавляет к полям формы следующие свойства типа

По мнению google лучший способ освоить AngularJS пройти обучалку
https://docs.angularjs.org/tutorial