AngularJS Hello world example. Основы AngularJS: модуль, контроллер, выражения

AngularJS Hello world example. Основы AngularJS. Подключение и настройка фреймворка. Понятия приложения, модуля, контроллера и выражений в AngularJS.

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Используемые технологии и библиотеки
  • Spring MVC 4.2.4.Release
  • AngularJS 1.5.0
  • IntelliJ IDEA 15.0.2

1. Описание задачи

Познакомиться с фреймворком AngularJS — написать простую Hello World jsp страницу с использованием возможностей AngularJS. Подключить angular.js, ознакомиться с понятиями контроллера (ng-controller), приложения (ng-app), модуля (angular.module). Рассмотреть применение выражений (expressions).

2. Структура проекта

angularExprStructure

В веб ресурсах добавлен пакет resources\angularjs с js файлами angular. Рассматриваемые в статье понятия написаны в пакете view\angularjs (expressions.jsp). angularindex.jsp — содержание доступных тем по AngularJS.

3. Описание AngularJS

  • AngularJS на 100% написанный на JavaScript client side фреймворк
  • Это бесплатный open source проект
  • AngularJS можно запускать как на мобильных так и на стационарный устройствах
  • Использует концепцию MVC (models, views, controllers)
  • Предоставляет удобный для сопровождения и юнит тестирования код
  • Использует Dependency Injection (DI) принцип для внедрения зависимостей компонентов
  • Расширяет HTML DOM модель с помощью добавления атрибутов к HTML тэгам
  • Позволяет создавать пользовательские интерфейсы с широкими возможностями
  • Официально поддерживается компанией Google
  • Использует квадратные скобки с префиксом ng (отсылка к Angular)
3.1 Архитектура AngularJS

angular-js-architecture

3.1.1. Модуль AngularJS

Приложение Angular состоит из модулей. В модуль могут входить другие модули. Таким образом вы можете считать модуль контейнером для различных частей вашего приложения. Каждый модуль состоит из сервисов, контроллеров, директив, провайдеров и шаблонов.

  • angular.module — глобальное определение модуля. Все модули, которые должны быть доступны в приложении должны регистрироваться с помощью этого механизма.
  • applicationName — имя модуля.
  • [ ] — здесь перечисляются зависимости для этого модуля (например сторонние библиотеки).
  • ng-app=’applicationName’ — когда HTML документ будет загружаться, то на этом месте будет запущен модуль с именем applicationName и далее будет вызван фильтр с именем greet. В результате увидим надпись Hello, World!.

Сообщество AngularJS рекомендует разбивать приложение на модули по следующему принципу:

  • Модуль для каждой функции (в смысле части бизнес логики приложения, а не имени функции JS кода).
  • Модуль для каждого повторно используемого компонента (особенно для директив и фильтров).
  • Модуль для уровня приложения, который содержит зависимости для вышестоящих модулей и включает код инициализации.
3.1.2. Контроллер AngularJS

Контроллер — компонент, который используется для осуществления взаимодействия между сервисами. Сервис — компонент, который используется для связи частей приложения (например сервис для доступа к данным и т.д.). В Angular контроллеры определяются с помощью конструктора JavaScript, в который передается сервис $scope.

Здесь мы задали контроллер для модуля myApp с именем GreetingController с помощью метода controller(). Далее с помощью внедрения зависимостей (Dependency Injection) определили свойство greeting с значением Preved, medved!.

Контроллер присоединяется к DOM с помощью директивы ng-controller.

Контроллеры необходимо использовать для:

  • Инициализации объекта $scope.
  • Добавления поведения к объекту $scope.

Контроллер не следует использовать для:

  • Манипуляцией DOM. Контроллеры должны содержать только бизнес логику. В ангуляре есть директивы и связывание данных для манипуляции с DOM.
  • Ввода данных — для этого есть отдельные элементы для управления формами.
  • Фильтрации вывода — для этого есть фильтры AngularJS.
  • Открытие доступа к участкам кода или состоянием между контроллерами — для этого используются сервисы Angular.
  • Управлением жизненным циклом других компонентов (например для создания экземпляра сервиса).
3.1.3. $scope

Scope — объект, который ссылается на модель приложения. Этот объект является контекстом для выполнения выражений или обработки событий. Scope объекты имеют иерархию. Обычно, когда вы создаете приложение, то вам необходимо установить начальное состояние для объекта AngularJS $scope. В предыдущем примере установка состояния для $scope осуществлялась путем присоединения свойства greetings к объекту $scope ($scope.greeting = ‘…’). Объект $scope — определяет область видимости для каких-либо свойств.

concepts-scope

В общем к характеристикам объектов $scope относят:

  • Scope объекты предоставляют доступ к $watch для наблюдения за изменениями модели.
  • Предоставляют доступ к $apply для распространения изменений в модели сквозь систему к представлению из области действия Angular приложения (контроллеров, сервисов, обработчиков событий).
  • Объекты scope могут иметь вложенные объекты для ограничения доступа к свойствам компонентов приложения. Child scope — наследуют свойства родительского объекта, а isolated scope — нет.
  • Scope предоставляет контекст для выполнения выражений. Например выражение {{username}} не будет иметь смысла до тех пор, пока он не будет привязан к определенной области видимости ($scope.username=’MyName’).

4. Подключение фреймворка AngularJS

4.1 Настройки Spring MVC

Т.к. фреймворк рассматривается в контексте Spring MVC приложения, то необходимо отметить, что для подключения AngularJS в существующий проект никаких дополнительных зависимостей в pom.xml или настроек в конфигурацию spring вносить не нужно.

4.2 Подключение angular.js

Для того, чтобы начать работать с AngularJS в нашем Spring MVC приложении необходимо добавить JavaScript файлы Angular. Для подключения фреймворка была добавлена следующая запись в <head> </head> нашего приложения (напомню, что приложение использует шаблонный код для header, который добавляется на каждую страницу.) Шаблон header для всего раздела по Angular использует файл — angular-template.tag в пакете tags.

Теперь при загрузке страницы будет подгружаться angular.min.js файл. Скачать его можно на официальном сайте Angularjs.org. Это всё, что необходимо для начала использования AngularJS на нашей jsp странице.

5. AngularJS код

Вначале мы задаем модуль с именем application. Это имя потом используется для определения области действия этого модуля (связывания с DOM) с помощью директивы ng-app. Далее создаем контроллер myController в котором задаем несколько свойств (framework, links, someFucntion()). Эти свойства затем вызываются с помощью конструкции {{ }}. Эта запись используется в AngularJS для определения выражений.

Так же в примере демонстрируются выражения сложения, конкатенации строк и т.д.. Все они подписаны и тривиальны для понимания.

6. Запуск приложения

angularExpessions

 

Исходные коды

MVC_AngularJS_Html5 full project — полный проект Spring MVC + AngularJS + Bootstrap + HTML5.

19. AngularJS Expressions — код для этой части

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Share Button
14
8340 Total Views 1 Views Today

Добавить комментарий