Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular #1

Angular #1

Danila Marchenkov

August 03, 2017
Tweet

More Decks by Danila Marchenkov

Other Decks in Programming

Transcript

  1. Почему AngularJS? • AngularJS — MVW-фреймворк • Поддержка Google •

    Stateful/Stateless SPA • Гибкая система зависимостей • Разделение ответственности • Двусторонняя связь данных • Возможность использования сторонних расширений языков HTML & CSS. • Отсутствие необходимости работы с DOM деревом
  2. SPA • Навигация без перезагрузки страницы • Скрипты подгружаются по

    мере необходимости • Данные загружаются асинхронно • Состояние приложения хранится в браузере
  3. MVC • M — Model - локальное хранилище данных. •

    V — View - компоненты, отображение данных. • C — Controller - изменение модели, реакция на изменения и отображение на View.
  4. Ng-app • Одна html-страница: • Один ng-app тэг для приложения

    • Множество ng-controller тэгов • Доступность вложенности • Возможность связи разных контроллеров
  5. ng-app, ng-controller angular.module('myApp', []) .controller('myAppController', function() { this.a = 1;

    this.b = 2; }); <div ng-app=“myApp"> <div ng-controller=“myAppController as ctrl”> I can add: {{ ctrl.a }} + {{ ctrl.b }} = {{ ctrl.a + ctrl.b }} </div> </div>
  6. angular.module('myApp', []) // обьявление myApp модуля .controller(‘myAppController', function() { //

    обьявление myAppController-а this.a = 1; // обьявление переменных контролера this.b = 2; }); <div ng-app=“myApp”> <!-- Входная точка приложения --> <div ng-controller=“myAppController as ctrl"> <!-- Входная точка myAppController-а --> I can add: {{ ctrl.a }} + {{ ctrl.b }} = {{ ctrl.a + ctrl.b }} <!-- Интерполяция переменных контроллера --> </div> </div>
  7. Модульность • Модуль - контейнер. • Проект — древовидная структура

    модулей. • Корневой ‘root’ модуль. • Testability. • Переиспользование модулей.
  8. Разделение логики • controllers • directives • filters • decorators

    • services • factories • providers • configs • static injections • run-blocks
  9. Вложенность модулей angular.module('empress', ['dashboard', ‘entityEditor’, 'analysisView']); • dashboard, entityEditor, analysisView

    - зависимости модуля empress • Гарантия инициализации зависимостей до родителя • Все модули - зависимости основного. • У любой компоненты есть модуль, в котором она объявлена
  10. Практика • https://openweathermap.org/current • Сводка погоды по Спб. • git

    clone https://github.com/angular/angular-seed.git • Один главный модуль • http-сервис • один контроллер