0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>29 май 2019</li>
2
<ul><li>29 май 2019</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Новые фреймворки для JavaScript появляются раз в полгода, поэтому трудно что-то выбрать. Рассказываем, почему Angular.JS - один из лучших вариантов.</p>
4
</ul><p>Новые фреймворки для JavaScript появляются раз в полгода, поэтому трудно что-то выбрать. Рассказываем, почему Angular.JS - один из лучших вариантов.</p>
5
<p> vlada_maestro / shutterstock</p>
5
<p> vlada_maestro / shutterstock</p>
6
<p>Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.</p>
6
<p>Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.</p>
7
<p><strong>Angular.JS</strong> - это фреймворк для работы с <a>JavaScript</a>, поддерживаемый Google. Он используется для создания одностраничных приложений и позволяет взаимодействовать с DOM (англ. Document Object Model - объектная модель документа).</p>
7
<p><strong>Angular.JS</strong> - это фреймворк для работы с <a>JavaScript</a>, поддерживаемый Google. Он используется для создания одностраничных приложений и позволяет взаимодействовать с DOM (англ. Document Object Model - объектная модель документа).</p>
8
<p>Работает Angular.JS по схеме MVC (<em>англ</em>. Model-View-Controller - модель-вид-контроллер) - она разделяет приложение на три отдельных части, которые можно изменять независимо друг от друга.</p>
8
<p>Работает Angular.JS по схеме MVC (<em>англ</em>. Model-View-Controller - модель-вид-контроллер) - она разделяет приложение на три отдельных части, которые можно изменять независимо друг от друга.</p>
9
<p><strong>Модель</strong></p>
9
<p><strong>Модель</strong></p>
10
<p>Предоставляет информацию и реагирует на команды контроллера.</p>
10
<p>Предоставляет информацию и реагирует на команды контроллера.</p>
11
<p><strong>Вид</strong></p>
11
<p><strong>Вид</strong></p>
12
<p>Отвечает за отображение данных модели и следит за изменениями.</p>
12
<p>Отвечает за отображение данных модели и следит за изменениями.</p>
13
<p><strong>Контроллер</strong></p>
13
<p><strong>Контроллер</strong></p>
14
<p>Реагирует на действия пользователя и оповещает модель о том, что нужно обновиться.</p>
14
<p>Реагирует на действия пользователя и оповещает модель о том, что нужно обновиться.</p>
15
<p>Такая схема позволяет легко работать с фреймворком, быстро писать код и тестировать его.</p>
15
<p>Такая схема позволяет легко работать с фреймворком, быстро писать код и тестировать его.</p>
16
<p>Главное отличие Angular.JS в том, что он позволяет вставить код прямо в HTML. Допустим, нужно, чтобы в определенном месте менялся текст, когда пользователь взаимодействует с полем ввода:</p>
16
<p>Главное отличие Angular.JS в том, что он позволяет вставить код прямо в HTML. Допустим, нужно, чтобы в определенном месте менялся текст, когда пользователь взаимодействует с полем ввода:</p>
17
<p>Вот как это реализуется на чистом JS:</p>
17
<p>Вот как это реализуется на чистом JS:</p>
18
<input type='text' id='TextInput' placeholder='Введите сюда текст'> <br> <span id='TextSpan'></span> <script> var TextInput = document.getElementById('TextInput'); var TextSpan = document.getElementById('TextSpan'); function TextChange() { TextSpan.innerText = TextInput.value; } TextInput.addEventListener('keypress', TextChange); </script><p>На jQuery:</p>
18
<input type='text' id='TextInput' placeholder='Введите сюда текст'> <br> <span id='TextSpan'></span> <script> var TextInput = document.getElementById('TextInput'); var TextSpan = document.getElementById('TextSpan'); function TextChange() { TextSpan.innerText = TextInput.value; } TextInput.addEventListener('keypress', TextChange); </script><p>На jQuery:</p>
19
<input type='text' id='TextInput' placeholder='Введите сюда текст'> <br> <span id='TextSpan'></span> <script> $(document).on('keypress','#TextInput', function () { $('#TextSpan').text($('#TextInput').val()); }); </script><p>В первом случае получается громоздкий код. Более компактно выходит на jQuery, но всё равно не сравнится с тем, как это можно написать на Angular.JS:</p>
19
<input type='text' id='TextInput' placeholder='Введите сюда текст'> <br> <span id='TextSpan'></span> <script> $(document).on('keypress','#TextInput', function () { $('#TextSpan').text($('#TextInput').val()); }); </script><p>В первом случае получается громоздкий код. Более компактно выходит на jQuery, но всё равно не сравнится с тем, как это можно написать на Angular.JS:</p>
20
<div class='wrapper' ng-app> <input type='text' ng-model='SomeText' placeholder='Введите сюда текст'><br> {{SomeText}} </div><p>Всё, что мы сделали, - это указали атрибуты ng-app для контейнера и ng-model для поля ввода. Фреймворк реагировал на каждое изменение модели и записывал вводимые данные в переменную<em>SomeText</em>. После этого менялся текст - там, где стоит шаблонизатор<em>{{НазваниеПеременной}}</em>.</p>
20
<div class='wrapper' ng-app> <input type='text' ng-model='SomeText' placeholder='Введите сюда текст'><br> {{SomeText}} </div><p>Всё, что мы сделали, - это указали атрибуты ng-app для контейнера и ng-model для поля ввода. Фреймворк реагировал на каждое изменение модели и записывал вводимые данные в переменную<em>SomeText</em>. После этого менялся текст - там, где стоит шаблонизатор<em>{{НазваниеПеременной}}</em>.</p>
21
<p>То есть Angular.JS самостоятельно отследил изменение поля ввода, поменял значение переменной и обновил вывод в HTML-коде. Разработчику нужно только указать директивы (об этом ниже). В этом заключается основное отличие фреймворка от других.</p>
21
<p>То есть Angular.JS самостоятельно отследил изменение поля ввода, поменял значение переменной и обновил вывод в HTML-коде. Разработчику нужно только указать директивы (об этом ниже). В этом заключается основное отличие фреймворка от других.</p>
22
<p>Давайте рассмотрим работу Angular.JS еще на одном примере. Допустим, нужно реализовать функцию переключения страниц:</p>
22
<p>Давайте рассмотрим работу Angular.JS еще на одном примере. Допустим, нужно реализовать функцию переключения страниц:</p>
23
<p>Для начала нужно указать HTML-код:</p>
23
<p>Для начала нужно указать HTML-код:</p>
24
<!DOCTYPE html> <html ng-app='AngularApp' ng-controller='AngularController as Page'> <head> <title>{{Page.Title}} | Проект по изучению Angular.JS</title> <script src="/angular.min.js"></script> <script src="/AngularApp.js"></script> <link rel='stylesheet' href='/style.css'> </head> <body> <div class='wrapper'> <header class='header'> <div class='header__content'> <div class='header__logo'>Изучаем Angular.JS</div> <nav class='header__nav'> <div ng-repeat='PageItem in Page.Pages' class='header__button header__button_selected_{{PageItem.IsSelected}}' ng-click="Page.MenuClick(PageItem.Name)"> {{PageItem.Title}} </div> </nav> </div> </header> <main class='main'> <article class='article'> <h2>{{Page.Header}}</h2> {{Page.Text}} </article> </main> </div> </body> </html><p>В первую очередь для тега<em><html></em>указывается атрибут<em>ng-app</em>(такие атрибуты называются директивами) - в нем содержится название приложения. И теперь все, что находится внутри этого тега, относится к AngularApp. Всего в коде можно указать только один такой атрибут.</p>
24
<!DOCTYPE html> <html ng-app='AngularApp' ng-controller='AngularController as Page'> <head> <title>{{Page.Title}} | Проект по изучению Angular.JS</title> <script src="/angular.min.js"></script> <script src="/AngularApp.js"></script> <link rel='stylesheet' href='/style.css'> </head> <body> <div class='wrapper'> <header class='header'> <div class='header__content'> <div class='header__logo'>Изучаем Angular.JS</div> <nav class='header__nav'> <div ng-repeat='PageItem in Page.Pages' class='header__button header__button_selected_{{PageItem.IsSelected}}' ng-click="Page.MenuClick(PageItem.Name)"> {{PageItem.Title}} </div> </nav> </div> </header> <main class='main'> <article class='article'> <h2>{{Page.Header}}</h2> {{Page.Text}} </article> </main> </div> </body> </html><p>В первую очередь для тега<em><html></em>указывается атрибут<em>ng-app</em>(такие атрибуты называются директивами) - в нем содержится название приложения. И теперь все, что находится внутри этого тега, относится к AngularApp. Всего в коде можно указать только один такой атрибут.</p>
25
<p>Дальше была указана директива<em>ng-controller</em>со значением<em>AngularController as Page</em>. Это означает, что созданный контроллер будет работать с объектом Page. Дальше все переменные и методы вызываются с помощью этого объекта. Например, в <em><title></em>будет отображаться поле<em>Page.Title</em>.</p>
25
<p>Дальше была указана директива<em>ng-controller</em>со значением<em>AngularController as Page</em>. Это означает, что созданный контроллер будет работать с объектом Page. Дальше все переменные и методы вызываются с помощью этого объекта. Например, в <em><title></em>будет отображаться поле<em>Page.Title</em>.</p>
26
<p>После этого создаем меню для страницы. Вместо ручного прописывания кнопок для каждой страницы можно написать такой код:</p>
26
<p>После этого создаем меню для страницы. Вместо ручного прописывания кнопок для каждой страницы можно написать такой код:</p>
27
<nav class='header__nav'> <div ng-repeat='PageItem in Page.Pages' class='header__button header__button_selected_{{PageItem.IsSelected}}' ng-click="Page.MenuClick(PageItem.Name)"> {{PageItem.Title}} </div> </nav><p>Тут указана одна кнопка с атрибутом<em>ng-repeat</em>. По сути, это обычный цикл<em>forEach</em>, который перебирает все элементы массива (в данном случае<em>PageItem in Page.Pages</em>). Только вместо того чтобы прописывать этот цикл в JS-коде, достаточно указать директиву.</p>
27
<nav class='header__nav'> <div ng-repeat='PageItem in Page.Pages' class='header__button header__button_selected_{{PageItem.IsSelected}}' ng-click="Page.MenuClick(PageItem.Name)"> {{PageItem.Title}} </div> </nav><p>Тут указана одна кнопка с атрибутом<em>ng-repeat</em>. По сути, это обычный цикл<em>forEach</em>, который перебирает все элементы массива (в данном случае<em>PageItem in Page.Pages</em>). Только вместо того чтобы прописывать этот цикл в JS-коде, достаточно указать директиву.</p>
28
<p>Кнопка получила классы и атрибут<em>ng-click</em>, в котором прописана функция<em>Page.MenuClick ()</em>с именем текущего элемента в качестве аргумента. Вот и сам код контроллера:</p>
28
<p>Кнопка получила классы и атрибут<em>ng-click</em>, в котором прописана функция<em>Page.MenuClick ()</em>с именем текущего элемента в качестве аргумента. Вот и сам код контроллера:</p>
29
angular.module('AngularApp', []).controller('AngularController', function () { //Объявление контроллера приложения var Page = this; //Создание объекта Page.Pages = [ //Данные о страницах { Name: "main", IsSelected: true, Title: "Главная", Header: "Добро пожаловать", Text: "Это главная страница сайта" }, { Name: "blog", IsSelected: false, Title: "Блог", Header: "Блог", Text: "Тут скоро будут статьи об Angular.JS" }, { Name: "about", IsSelected: false, Title: "Информация", Header: "О проекте", Text: "Этот проект создан для того, чтобы научить вас программировать на Angular.JS" }, { Name: "donate", IsSelected: false, Title: "Помочь проекту", Header: "Помочь проекту", Text: "Нашему проекту нужна ваша помощь!" } ]; //Выбор данных о главной странице Page.Title = Page.Pages[0].Title; Page.Header = Page.Pages[0].Header; Page.Text = Page.Pages[0].Text; //Функция переключения страниц Page.MenuClick = function (PageName) { //Имя страницы в качестве атрибута angular.forEach(Page.Pages, function (PageItem) { //Перебор всех страниц PageItem.IsSelected = false; //Отмена выбора if(PageName == PageItem.Name) { //Поиск совпадения по имени страницы и получения данных Page.Title = PageItem.Title; Page.Header = PageItem.Header; Page.Text = PageItem.Text; PageItem.IsSelected = true; } }); }<p>Дальше в HTML-коде создаем тело статьи:</p>
29
angular.module('AngularApp', []).controller('AngularController', function () { //Объявление контроллера приложения var Page = this; //Создание объекта Page.Pages = [ //Данные о страницах { Name: "main", IsSelected: true, Title: "Главная", Header: "Добро пожаловать", Text: "Это главная страница сайта" }, { Name: "blog", IsSelected: false, Title: "Блог", Header: "Блог", Text: "Тут скоро будут статьи об Angular.JS" }, { Name: "about", IsSelected: false, Title: "Информация", Header: "О проекте", Text: "Этот проект создан для того, чтобы научить вас программировать на Angular.JS" }, { Name: "donate", IsSelected: false, Title: "Помочь проекту", Header: "Помочь проекту", Text: "Нашему проекту нужна ваша помощь!" } ]; //Выбор данных о главной странице Page.Title = Page.Pages[0].Title; Page.Header = Page.Pages[0].Header; Page.Text = Page.Pages[0].Text; //Функция переключения страниц Page.MenuClick = function (PageName) { //Имя страницы в качестве атрибута angular.forEach(Page.Pages, function (PageItem) { //Перебор всех страниц PageItem.IsSelected = false; //Отмена выбора if(PageName == PageItem.Name) { //Поиск совпадения по имени страницы и получения данных Page.Title = PageItem.Title; Page.Header = PageItem.Header; Page.Text = PageItem.Text; PageItem.IsSelected = true; } }); }<p>Дальше в HTML-коде создаем тело статьи:</p>
30
<article class='article'> <h2>{{Page.Header}}</h2> {{Page.Text}} </article><p>Получился компактный код, в котором ничего не нужно делать, чтобы реализовать функцию, - просто указать места в HTML-коде, с которыми должен работать фреймворк. В контроллере были только данные о страницах и простой метод их переключения.</p>
30
<article class='article'> <h2>{{Page.Header}}</h2> {{Page.Text}} </article><p>Получился компактный код, в котором ничего не нужно делать, чтобы реализовать функцию, - просто указать места в HTML-коде, с которыми должен работать фреймворк. В контроллере были только данные о страницах и простой метод их переключения.</p>
31
<p>Многие разработчики жалуются, что фреймворк работает медленно из-за того, что приходится постоянно отслеживать все модели, прописанные в коде. Однако на Angular.JS запущены крупные сайты:</p>
31
<p>Многие разработчики жалуются, что фреймворк работает медленно из-за того, что приходится постоянно отслеживать все модели, прописанные в коде. Однако на Angular.JS запущены крупные сайты:</p>
32
<ul><li>видеохостинг YouTube;</li>
32
<ul><li>видеохостинг YouTube;</li>
33
<li>крупнейшая биржа фрилансеров UpWork.com;</li>
33
<li>крупнейшая биржа фрилансеров UpWork.com;</li>
34
<li>веб-версия мессенджера Telegram;</li>
34
<li>веб-версия мессенджера Telegram;</li>
35
<li>биржа фрилансеров freelancer.com;</li>
35
<li>биржа фрилансеров freelancer.com;</li>
36
<li>сайт компании Bosch;</li>
36
<li>сайт компании Bosch;</li>
37
<li>сайт AT& T;</li>
37
<li>сайт AT& T;</li>
38
<li>сайт General Electrics и другие.</li>
38
<li>сайт General Electrics и другие.</li>
39
</ul><p>Фреймворк востребован и среди менее крупных компаний - около<a>2300 вакансий</a>на сайте hh.ru по запросу Angular. Поэтому новичку будет просто найти работу.</p>
39
</ul><p>Фреймворк востребован и среди менее крупных компаний - около<a>2300 вакансий</a>на сайте hh.ru по запросу Angular. Поэтому новичку будет просто найти работу.</p>
40
<p>Несмотря на противоречивое отношение программистов к фреймворку, Angular популярен. На это влияют удобство и очень подробная и понятная документация на официальном сайте Angular.JS.</p>
40
<p>Несмотря на противоречивое отношение программистов к фреймворку, Angular популярен. На это влияют удобство и очень подробная и понятная документация на официальном сайте Angular.JS.</p>
41
<a>Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше</a>
41
<a>Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше</a>