xgrommx's blog

Просто о сложном.

Введение в AngularJS

| Comments

В современно мире программирование существует множество прекрасных и интересный технологий и web также не отстает от новшеств. Javascript уже не тот которого мы знали раньше, он имеет огромную инфраструктуру и давно уже может более чем просто оперировать DOM. По мере того, как стали создаваться сложные RIA, стало намного труднее писать код фронтенда даже используя замечательную библиотеку jQuery.

На помощь пришли многие библиотеки, которые позволяли работать на стороне фронтенда используя довольно известные патерны MVC, MVVM. Из таких фреймворков особо известны: BackboneJS, EmberJS, AngularJS. Также известны такие библиотеки как KnockoutJS, которые позволяют изпользовать декларативный баиндинг. Из всех вышесказанных именно AngularJS является быстроразвивающимся и довольно молодым и модным инструментом. С его помощью можно с легкостью строить прекраснейшие богатые веб приложения, работать с бекендом, создавать анимацию, HTML5 routing и многие другие полезные функции, которые позволят создавать полноценные SPA приложения.

В данной статье мы рассмотрим основные возможности AngularJS, в последствии создадим приложение, которое будет просто сохранять данные локально (возможность использования бекенда мы рассмотрим позже).

Первым делом мы идем и скачиваем скрипт. Для этого переходим по адресу angularjs.org

Скачавши библиотеку создадим каталог с названием start-with-angularjs. Создадим файл index.html с таким содержимым

index.html
1
2
3
4
5
6
7
8
9
10

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Start with AngularJS</title>
</head>
<body>

</body>
</html>

Также создадим новый каталог js и положим туда скрипт с AngularJS, который мы только что скачали. Одновременно создадим новый javascript файл с именем main.js и изменим наш index.html так

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Start with AngularJS</title>

    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

</head>
<body>

</body>
</html>

Давайте теперь дадим жизнь нашему первому приложению с помощью AngularJS. Для этого добавим в html новый кастомный аттрибут ng-app. Этот аттрибут дает знать AngularJS, что это приложение.

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!doctype html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Start with AngularJS</title>

    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

</head>
<body>

</body>
</html>

Следом, добавим новый тег для ввода текста и ниже span.

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!doctype html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Start with AngularJS</title>

    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

</head>
<body>
    <input type="text">
    <span></span>
</body>
</html>

Для того чтобы связать наш элемент ввода с AngularJS нам нужно добавить еще один кастомный аттрибут к этому элементу - ng-model. Он дает возможность декларативной связки представления с контроллером, о чем мы поговорим позже. Также привяжем нашу модель к span, для того чтобы видеть реальные измения.

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!doctype html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Start with AngularJS</title>

    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

</head>
<body>
    <input type="text" ng-model="message">
    <span>{{ message }}</span>
</body>
</html>

Двойные фигурные скобки есть особый синтаксис шаблонизатора AngularJS для привязки данных (довольно похоже на HandlebarsJS). Сейчас когда мы откроем наше приложение в браузере и введем что-то в наше поле для ввода, то мы сможем увидеть как сообщение динамически меняется в span.

Вы скажете, какая-то магия творится :)

Но тут особо нет ничего магического, что тут происходит и как мы разберем позже.

До новых встреч.

Comments