Как работать с AngularJS и не тормозить ?

автор superman 5 апреля 2015 г. 15:05:11

Теги: AngularjsJavascriptMvc



AngularJS - модное слово в современной разработке веб-приложений. Отличный и простой в изучении javascript mvc фреймворк. Казалось бы что может пойти не так ? А очень многое. Часто разработчики просто кидаются со своими порывами опробовать новую технологию, не осознавая всех возможных последствий. В этой статье я расскажу вам как мы у себя используем AngularJS при написании веб-приложений.

Сразу хочу заметить, в этой статье я не буду подробно рассматривать single page applications. Я покажу вам пример, как использовать AngularJS при создании обычных, средней сложности проектов.

И так, поехали!

При разработке приложения, нет смысла отказываться от javascript. Параноиков с отключенным javascript'ом в интернете становится все меньше, количество удобных инструментов на javascript растет. Возьмем в пример веб-сайт, на одном из его страниц нужно реализовать непростую логику поведения. Пусть к примеру это будет сложная форма заполнения с кучей табов и состояний. Можно конечно ее сделать на jQuery, но какими страданиями это обойдется ?

Мы у себя в компании решили использовать для таких задач AngularJS. Это уже проверенное решение и надежное. Речь тут пойдет о версии AngularJS на момент написания статьи, версия 1.3.15. Скачать ее можно тут.

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

Очередность подключения:

<script src="/static/lodash/lodash.min.js"></script>
<script src="/static/angular/angular.min.js"></script>
<script src="/static/angular-messages/angular-messages.min.js"></script>
<script src="/static/js/app.js"></script>
<script src="/static/js/login_controller.js"></script>

Теперь подробнее. Все подключения идут в страницы. О необходимости подключения очень полезной библиотеки lodash, я не буду рассказывать в этой статье. Далее мы подключением саму AngularJS:

<script src="/static/angular/angular.min.js"></script>

После подключаем необходимые модули AngularJS для работы. Нам нужно работать к примеру с ng-messages.

<script src="/static/angular-messages/angular-messages.min.js"></script>

После подлючаем основной файл для всего AngularJS приложения. Чтобы не было путаницы, мы всегда называем его app.js. Вот пример его содержимого:

angular.module("demoApp", ["ngMessages"]).config(function($httpProvider) {
  return $httpProvider.defaults.headers.post['X-CSRFToken'] = $('meta[name=csrfmiddlewaretoken]').attr("content");
})

Почти в 90% случаем из AngularJS приложения приходится делать AJAX запросы на backend. Для этого обычно к Django приложению мы подключаем Django REST Framework. Для того, чтобы запросы проходили без ошибок и CSRF токен всегда подтверждался, мы через $httpProvider определяем header по-умолчанию для всех запросов X-CSRFToken. Подтягиваем его через jQuery запрос на странице $('meta[name=csrfmiddlewaretoken]').attr("content");

На самой странице конечно же CSRF должен быть определен:

<meta name="csrfmiddlewaretoken" content="b8r43iAvLCVsvTaHpVgPtCbs5O7IB33z">

в секции head.

В Django шаблоне это выглядит как:

<meta name="csrfmiddlewaretoken" content="{{ csrf_token }}">

После идет подключение контроллера на страницу.

<script src="/static/js/login_controller.js"></script>

Данное решение удобно. Мы подключаем AngularJS только там, где он нужен. Есть дополнение по прорисовке AngularJS приложения. Дело в том что AngularJS не всегда успевает вовремя заменить вставки вида: {{ my_variable }}. Если вам такое положение дел критично, то рекомендуется использовать :

вместо <div>{{name}}</div> 
использовать <div ng-bind=«name»>Текст до загрузки скриптов</div>

Это основные моменты по работе с AngularJS на средних и больших проектах в первом приближении. Ждите продолжения сервии статей.


comments powered by Disqus

2014-2018 © thenextcode.ru