Введение в AngularJS

AngularJS - это …

AngularJS - JavaScript фреймворк используемый для создания многофункциональных и расширяемых веб-приложений. Angular взаимодействует с простым JavaScript и HTML, и Вам не нужны какие либо другие зависимости. Также Angular не зависим от CSS, т.е. Вы можете использовать любые технологии стилизации своего приложения на Angular.

Почему Angular?

  • Статическое хранение данных - нет необходимости создавать базу данных т.к. вся информация будет хранится в отдельном файле формата .json, с которым будет взаимодействовать Angular приложение.
  • Скорость - благодаря простому синтаксису Angular отлично подходит для быстрого создания SPA (Single Page Application) приложений
  • Популярность - Angular обрел большую аудиторию пользователей, и теперь почти каждый работодатель требует знания Angular при поиске кандидата на позицию Frontend-разработчик.
  • Продуманная архитектура - полностью реализованная модель MVC (Model-View-Controller) позволяет разбивать Angular приложения на компоненты отвечающие за определенные действия.

Архитектура Angular

В основном приложения написанные на Angular, состоят из трех компонентов:

Шаблон (Template)

Шаблон - это HTML часть веб-приложения. Написание шаблона аналогично написанию статической HTML разметки за одним исключением, где в шаблоне придется использовать специальный синтаксис для вставки в HTML динамических данных.

Особенность, которая отличает Angular шаблоны от страниц генерируемых сервером заключается в том, что в Angular данные могут быть вставлены, изменены или удалены динамически без перезагрузки страницы.

Область видимости (Scope)

Область видимости наиболее важный компонент в приложениях на Angular. Область видимости - это объект представляющий модель приложения, т.е. указывает границы Angular в HTML документе. Также содержит поля хранения данных, которые предоставляются конечному пользователю через шаблон.

Контроллер (Controller)

Контроллер играет, в приложениях на Angular, вспомогательную роль. Контроллер - функция, которая берет пустой объект области видимости в качестве параметра и добавляет к нему данные и другие функции для представления их пользователю.

Angular в действии

Ниже представлен листинг простейшего приложения на Angular, которое выводит сообщение Hello World.