AngularJS basics & theory
Download as PPT, PDF2 likes40,193 views
Краткий обзор фрэймворка AngularJS: что это такое и зачем все эти сложности. И сложности ли это вообще. Презентация подготовлена по материалам прошедшего 19 ноября витебского фронтенд-митапа: http://devowl.org/
Ad
More Related Content
What's hot (19)
Viewers also liked (20)
Ad
Similar to AngularJS basics & theory (20)
Ad
AngularJS basics & theory
- 1. Getting familiar with AngularJS by Paul Seleznev
- 2. План презентации В двух словах о SPA(Single page application) Основные особенности AngularJS MVC в AngulaJS Что такое модуль в Angular и как с ним работать Общее представление о директивах в AngularJS Создание пользовательских директив Фильтры Services
- 3. Что такое SPA? это веб-приложение, которое выполняется непосредственно на стороне клиента в Web-браузере обычно написанное на комбинации из HTML, JavaScript и CSS by wikipedia.com
- 4. Что такое AngularJS? JavaScript-фреймворк с открытым исходным кодом, разрабатываемым Google Angular JS адаптирует и расширяет традиционный HTML, чтобы обеспечить двустороннюю привязку данных для динамического контента, что позволяет автоматически синхронизировать модель и представление Ключевые особенности: - Директивы и фильтры - Двунаправленное связывание данных(моделей) - Вид, контроллер, $scope - Модули и роутинг
- 6. Какие цели преследовались при разработки? Отделение DOM-манипуляции от логики приложения для улучшения тестируемости кода. Отношение к тестированию как к важной части разработки. Сложность тестирования напрямую зависит от структурированности кода. Разделение клиентской и серверной стороны, что позволяет вести разработку параллельно. Проведение разработчика через весь путь создания приложения: от проектирования пользовательского интерфейса, через написание бизнес-логики, к тестированию.
- 7. result Подключение библиотеки Определение блока за который отвечает контроллер в HTML коде(body tag) Обход массива пользователей, который был добавлен ранее в $scope(li елемент используется как шаблон для каждой итерации) Определение контроллера в тэге script. Во все контроллеры инжектиться $scope(ViewModel) $scope виден для всего блока в HTM L коде, за который отвечает этот контроллер
- 9. Th es am e Контроллер, модель и $scope Контроллер можно создать двумя способами: - как функцию имя которой будет именем контроллера - вызовом метода controller у созданного модуля
- 10. Модули в AngularJS Преимущества лей спользования моду и Более описательный код Легче unit-тестирование Third-party код легче подключать модулями Параллельная загрузка модулей Объявить модуль с по мощью медота module обьект а angular Указать в html коде ка кой блок будет работать с этим модулем
- 11. Советы по созданию модулей Модуль для сервисов Модуль для директив Модуль для фильтров Модуль уровня приложения, зависящий от все вышеперечисленных
- 12. Что такое директивы в AngularJS? С помощью директив можно добавлять новое поведение существующим HTML элементам Основная работа с манипуляцией DOM-ом происходит в существующих или создаваемых вами директивах Angular нахожит директивы в аттрибутах, именах тегов, комментариях(HTML) или названиях классов
- 13. Создание пользовательских директив Как и контроллеры или сервисы, директивы регистрируются в модуле(вызовом метода directive) Первый аргумент - это имя создаваемой директивы в camelCase. Второй - фабрика, создающая объект с настройками директивы Фабрика вызывается только один раз для директивы HTML код директив может быть как inline, так и находиться в отдельном шаблоне
- 15. Фильтры Фильтры изменяют значения выражений отображаемые пользователю Могут вызываться из контроллеров, view или сервисов Имеют следующий синтаксис - {{ name | <filterName> }} Фильтры могут применяться на результаты предыдущих фильтров(chaining) В контроллеры или сервису фильры передаются так же как и все остальное в Angular - через DI Фильтры создаются для отдельных модулей с помощью метода filter.
- 16. AngularJS сервисы AngularJS сервисы - это синглтоны. Для использования сервисов используется Dependency Injection Сервисы могут использоваться практически везде(контроллеры, другие сервисы, директивы и фильтры)
- 17. Создаваемый сервис должен быть частью модуля Сервис можно создать как с помощью Module API(возовом метода factory модуля), так и с помощью сервиса $provide в angularJS практически все это сервисы(если не директивы :)) - доступ к window сделан так же через $window сервис inline injection