Начало работы с AngularJS - Hongkiat

Время от времени возникает новый инструмент, и, как вдруг он появляется, он забывается в забвение. Не AngularJS хоть. Несмотря на то, что он существует с 2009 года с момента его создания Миско Хевери, AngularJS привлекает много внимания в последние пару месяцев.

Люди говорят об этом, разработчики интегрируют его в свои работы, а авторы пишут об этом книги и зарабатывают кучу денег. Итак, что же такое AngularJS и почему вы должны на него прыгать? Это меняет жизнь? Это точно! Позвольте мне рассказать вам, почему.

Замечания: Я настоятельно рекомендую вам освоиться с JavaScript, прежде чем углубляться в AngularJS. Если вы не знакомы с MVC а также DOMЯ предлагаю прочитать о них больше, прежде чем продолжить, иначе вы можете запутаться с большинством терминологий, используемых в этой статье.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Рекомендуемое чтение: обучение программированию: 10 заблуждений, которые не соответствуют действительности

Что такое AngularJS?
AngularJS – это не просто еще одна инфраструктура JavaScript. Конечно, у нас есть Backbone, Ember и самый популярный jQuery, но AngularJS во многом отличается.
Связывание данных и построение для одностраничных приложений (SPA)
Во-первых, AngularJS – это структура привязки данных, специально созданная для SPA. Это означает, что вы можете легко создать приложение без использования других библиотек, поскольку в нем уже есть все, что вам когда-либо понадобится. Он также поддерживает синхронизацию для модели и вида.

Прелесть создания SPA заключается в том, что он имитирует работу с рабочим столом, при которой страница остается неизменной на всем протяжении, при этом меняются только представления вместе с URL-адресом – AngularJS обрабатывает как маршрутизацию, так и представления. Так быстрее и плавнее. Это как если бы вы только что открыли настольное приложение и уже получили все необходимое.

Другое дело, что в отличие от других SPA, история браузера фактически сохраняется. Например, если вы хотите нажать кнопку «Назад», чтобы вернуться к предыдущему виду, AngularJS фактически вернет вас к предыдущему виду. Большинство СПА не работают таким образом.
Реализация Model-View-Controller выполнена правильно
AngularJS прекрасно реализует MVC. В большинстве сред, в которых используется MVC, требуется разделить приложение на модули, а затем написать код, который свяжет их вместе.

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

Таким образом, он обеспечивает простой способ представить анимацию в каждом представлении так же, как это делает jQuery.

Вот хороший пример о том, как AngularJS обрабатывает анимации.

Но это только поверхность AngularJS. Вот еще что он может сделать:

Валидация данных
Внедрение зависимости
Обрабатывать пользовательскую логику
Многоэлементные директивы
Обмен данными между контроллерами
Улучшить HTML
Манипулирование DOM с помощью jQlite (встроенный)
AJAX
Маршрутизация
тестирование
и многое другое ..

Сравнение
Теперь давайте посмотрим, как работает AngularJS, сравнив его с обычными JavaScript и jQuery.
Ванильный JavaScript
Без использования какой-либо библиотеки JavaScript это выглядит так, когда вы отображаете введенные вами данные в режиме реального времени.

Ванильный JavaScript

<body> 

    Имя: <input id="textInput" type="text" /> 
    <br/> 

    Твое имя <span id="name"></span> 

    <script> 
        var textInputElement = document.getElementById('textInput'), 
        nameElement = document.getElementById('name'); 
        textInputElement.addEventListener('keyup',function(){ 
        var text = textInputElement.value; 
        nameElement.innerHTML = text; 
        }); 
    </script> 

</body>

JQuery
С помощью jQuery отображение введенных вами данных становится намного проще, поскольку большая часть вперед и назад обрабатывается jQuery. Таким образом, позволяя вам писать меньше кода.

JQuery

<body> 

Имя: <input id="textInput" type="text"/> 
<br/> 

Твое имя <span id="name"></span> 

<script> 
    $('#textInput').on('keyup',function(){ 
    $('#name').html($('#textInput').val()); 
     }); 
</script> 
</body>

AngularJS
AngularJS берет все на ступеньку выше. Фреймворк не только облегчен, но и способ написания HTML становится проще.

AngularJS

<body>

    Имя: <input type="text" ng-model="name" />
    <br />

    Ваше имя {{name}}
</body>

Как показано выше, красота AngularJS заключается в том, что вы пишете меньше кода, сохраняя целостность своего приложения. В коде мало информации, так как большая часть работы над модулями выполняется AngularJS. Еще одна примечательная вещь – вам не нужно манипулировать контроллерами, чтобы вносить изменения в представление.
Ограничения AngularJS
AngularJS – это не все солнце и радуга. Если вы стремитесь создать приложение, которое выполняет простые вычисления – калькулятор, игра-головоломка, анимация, динамические формы и т. Д. – то AngularJS – это среда, которую вы ищете.

Однако, если вы создаете большое и интенсивное приложение, такое как инструмент управления, вы можете отказаться от AngularJS, поскольку оно не разработано для этого, или, по крайней мере, использовать другие интегрированные среды.

AngularJS создан для быстрого создания прототипов, особенно для универсальных приложений, но бывают случаи, когда вы можете использовать его для создания приложений большего масштаба, но это еще не завоевало популярность.
AngularJS Resources
Изучите основы AngularJS в CodeSchool, Это бесплатный курс, спонсируемый Google. Он учит, как AngularJS может использоваться с разных точек зрения. Не забудьте проверить Канал AngularJS на YouTube где разработчики сами публикуют учебники и обновления новостей.

Но если вы больше являетесь разработчиком документации, вы можете проверить Документация по AngularJS API, Для тех, кто владеет JavaScript, эта документация должна быть достаточно простой для просмотра.

Вам не нужно заново изобретать колесо, так как есть много модулей, которые вы можете использовать и улучшать в Репозиторий ngmodules.org,

Если у вас есть средства и вы серьезно относитесь к изучению AngularJS, я настоятельно рекомендую проверить AngularCourse.com с его 7-часовым HD видео курсом, который поможет вам создать реальный продукт.

Вы реддитор? Если вы, вы можете проверить / R / angularjs для обсуждения и поддержки сообщества.
AngularJS в действии
ngSweetAlert
Это очень сладкая замена для монотонной «Alert» JavaScript.
Angular-nvD3 Charts
Как упоминалось ранее, вы можете использовать AngularJS для простых и промежуточных вычислений. С помощью Радиально-nvD3Вы можете настроить свои графики в соответствии с вашими потребностями.
Головоломка AngularJS с поиском слов
Эта простая головоломка показывает, насколько гибкий и простой AngularJS. Не забудьте раскошелиться GitHub также.
2048 игра
Помните эту игру? Это 2048 и число нигде не видно, потому что я не хочу снова быть зависимым. Игра была переделана с использованием AngularJS. Как это круто?
Вывод
AngularJS – это мощная среда, которая может помочь разработчикам ускорить разработку веб-приложений. Использование AngularJS становится все более популярным с течением времени, и я настоятельно рекомендую переключиться на тренд, так как есть динамичное и полезное сообщество, которое ждет вас, чтобы присоединиться!