AngularJS — обзор JS-фрэймворка от Google

28 января 2014
Сергей Лучко, JavaScript Senior Developer

AngularJS — весьма молодой JS-фрэймворк, разработанный компанией Google. Он отлично подходит для разработки одностраничных веб-приложений и предоставляет возможность расширения привычного всем HTML.

Рассмотрим простейший пример подключения его на странице сайта.

[whitecode]<!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> </head> <body> <div> <label>Your Name:</label> <input type="text" ng-model="name" placeholder="Enter a your name here"> <hr> <h1>Hello {{ name }}!</h1> </div> </body> </html>[/whitecode]

Здесь директива ng-app указывает, в какой области документа должен быть активирован фрэймворк. В данном примере — на всем документе.

В head’e документа подключим сам скрипт Angular’a. Еще хочу отметить, что для людей, привыкших делать приятный интерфейс на своем сайте, знакомых с Twitter Bootstrap, для Angular'a есть 2 варианта Bootstrap'а:
AngularStrap
Angular UI Bootstrap

Можете подключать более подходящий по набору компонентов. Они оба заточены под AngularJS.

Посредством двойных фигурных скобок можно обращаться к переменным в контроллере. Также в них можно производить простейшие действия, скажем, вышеприведенный пример мог выводить приветствие и при помощи конкатенации строк:

[whitecode]<h1>{{ 'Hello ' + name + '!' }}</h1>[/whitecode]

Ну, или, скажем, добавив какой-нибудь фильтр, например, чтобы ваше имя было написано заглавными буквами:

[whitecode]<h1>Hello {{ name | uppercase }}!</h1>[/whitecode]

Можно привязывать данные контроллера к элементам формы через модель. Например, при помощи директивы ng-model к модели можно привязать поле ввода, таким образом, после изменения значения в поле ввода, будет меняться значение переменной в модели.

[whitecode]<input ng-model="name"> <h1>Hello {{ name }}!</h1>[/whitecode]

прадлагаю рассмотреть еще несколько фильтров:

[whitecode]<!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> </head> <body> <div ng-init="people=[{firstName: 'John', lastName: 'Qwerty'}, {firstName: 'Bob', lastName: 'Unknown'}];"> <h2>Today is: {{ '2013-07-16' | date:'fullDate' }}</h2> Search: <input ng-model="query"> <hr> <ul class="people"> <li ng-repeat="person in people | filter:query"> <span class="first-name">{{ person.firstName }}</span> <span class="last-name">{{ person.lastName }}</span> </li> </ul> </div> </body> </html>[/whitecode]

Директива ng-init инициализирует переменную people, присваивая ей массив из 2х объектов.

Затем в заголовке <h2> выводим отформатированную дату. Полный перечень вариантов форматов даты и времени можно найти здесь.

После чего уже известным образом привязываем к модели строку поиска.

При помощи директивы ng-repeat перебираем массив с объектами, добавляя в DOM для каждого из них элемент <li>, с подставленными данными. При этом применим фильтр по строке, которую вводим.

В этой статье я хотел сделать краткий обзор этого фрэймворка, дать общее представление. Я уже начал писать серию статей о реализации одностраничного приложения на Angular JS. Они скоро появятся на этом блоге. Оригинал этой статьи можно прочитать здесь: http://best-web-creation.com/articles/view/id/angular-js-framework-by-google.