Обзор Angular JS - Все что нужно знать о Angular JS

Angular JS – фреймворк мультипарадигменного языка программирование JavaScript c открытым текстом входных данных для транслятора….


Angular JS – фреймворк мультипарадигменного языка программирование JavaScript c открытым текстом входных данных для транслятора. Создан для разработки веб-приложений или сайта, применяющий HTML- документ как корпус для веб-страниц и создающий взаимосвязь  с пользователем через динамически приводимые HNML,CSS,JavaScript, как правило посредством  AJAX."AngularJS" иногда обозначают как библиотека, из-за его простоты. Он не является плагином или расширениям.

Регулирования версиями "AngularJS".

Между версиями AngularJS нет больших изменений, но все же есть «критические» и  «незначительные». Для примера, между версией 1.3.11 и 1.3.12 - незначительные поправки, между 1.3.14 и 1.4.0 уже критические. То есть , проект допускает значительные поправки между «малого» изменения номера версии. В этом случае, AngularJS не расположен к семантическому версионирование, и проект допускает появления критических поправок при изменении «основной» версии.  Между бета- версиями могут быть минимальные изменения, в том случае: когда строго запрошенное повышения функциональности; в значительной степени облегчения кода; значительное повышения производительности; в отношении обновления угловой и высокий опыт разработчика, либо другой серьезный пример использования. Когда делается релиз, из коммитов генерируются обновления журнала. Обновления содержат выделенный раздел  с всеми критическими изменениями. В обновленном журнале можно увидеть, какие коммиты имеют критические поправки, и только потом разработчик  приложения может выбрать прежнею или новою версию AngularJS.

Когда устаревшие функции удаляются из библиотеки?

AngularJS сам удаляет старые функции в каждой следующей версии. К примеру, preAssignBindingsEnabled $compileProvider метод устарел и его сам AngularJS определяет и удаляет 1.5.10, 1.6, 1.7. В jqLite работает по другому – просто отказываемся от функций, которая имеет сходство с библиотекой jQuery, чтобы лучше совместить jqLite и jQuery. К примеру является метод  bind , хотя он и устарел по отношению к методу on, в ближайшее будущее  вряд ли будет удален из jqLite.

Какая совместимость версий между основным и дополнительными модулями AngularJS?

В основе кода AngularJS лежит «угловой» и некоторые, которые зависят от основного - дополнительные модули («angular-animate», «angular-route» и т.д.) Если выпускается новая версия AngularJS, то модуля аналогично надо менять. Угловой и дополнительные модуля должны быть тот же версии, вплоть до цифров патча, либо Ваше приложения может накрыться.

Как AngularJS обеспечивает качество кода и защищает от регрессий?

При добавлении нового кода в AngularJS  очень строгая политика коммитов:

  • Каждый коммит должен пройти все существующие тесты, содержать тесты на изменения кода и обновить документацию;
  • Сообщения о фиксации должны быть написаны особым образом, что позволяет анализировать их и извлекать изменения для заметок о выпуске.

Кодовая база AngularJS имеет очень большой набор модульных тестов и сквозных тестов. Это означает, что критическое изменение потребует изменения одного или нескольких тестов, чтобы их можно было пройти. Таким образом, когда фиксация включает в себя тесты, которые удаляются или модифицируются, это признак того, что код может содержать критическое изменение. При рассмотрении коммита AngularJS может решить, действительно ли происходит критическое изменение и подходит ли оно для ветви, с которой оно объединяется. Если это так, то AngularJS требует, чтобы сообщение о фиксации содержало соответствующее сообщение о критических изменениях.

Кроме того, коммиты периодически синхронизируются с Google, где AngularJS тестирует его на приложения, используя наборы тестов этих приложений. Это позволяет AngularJS быстро отследить регрессию перед выпуском. У AngularJS был довольно хороший опыт с этой установкой. Только ошибки, которые влияют на функции, не используемые в Google или не имеющие достаточного количества тестов, имеют шанс на это.

AngularJS - это система шаблонов?

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

Нужно ли беспокоиться о дырах в безопасности в AngularJS?

Как и любая другая технология, AngularJS не защищен от атак. Однако AngularJS обеспечивает встроенную защиту от базовых дыр в безопасности, включая межсайтовый скриптинг и атаки с использованием HTML-инъекций. AngularJS выполняет обход в обе стороны для всех строк и даже предлагает защиту XSRF для связи на стороне сервера. AngularJS был разработан, чтобы быть совместимым с другими мерами безопасности, такими как Content Security Policy (CSP), HTTPS (SSL / TLS) и аутентификация и авторизация на стороне сервера, которые значительно сокращают возможные направления атак, и мы настоятельно рекомендуем их использовать.О более подробной информации о защите приложений AngularJS можете ознакомится с Security.

Включения скриптов AngularJS из Google CDN

Самый быстрый способ начать работу - указать свой HTML- <script>тег на URL CDN Google. Таким образом, вам не нужно ничего скачивать или поддерживать локальную копию. Существует два типа URL-адресов сценариев AngularJS, на которые вы можете указать: один для разработки и один для производства:

  • angular.js - это читаемая, не минимизированная версия, подходящая для веб-разработки.
  • angular.min.js - это уменьшенная версия, которую мы настоятельно рекомендуем вам использовать в производстве.

Чтобы указать свой код на сценарии AngularJS на сервере Google CDN, используйте следующий шаблон. Этот пример указывает на минимизированную версию 1.5.6:

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

версия (что не стоит), вы можете воспользоваться code.angularjs.org/ URL, который был ранее рекомендуемым местоположением для источника расположенного кода. Если вы все еще используете сервер AngularJS, вам следует перейти  на версию CDN, чтобы увеличить загрузку.

Загрузка и размещение файлов AngularJS локально

Этот метод создан для тех, кто хочет работать с AngularJS в автономном режиме, или тех, кто хочет расположить файлы AngularJS на своих собственных серверах. Если вы нажмете на code.angularjs.org , вы найдете список каталогов со всеми ранними версиями AngularJS, так как AngularJS начал выпускать версионные артефакты сборки. Каждый каталог имеет все артефакты, которые AngularJS создали для конкретной версии. Просто загрузите версию, которую вы желаете, и получайте удовольствие. Вы можете не использовать каталоги, начинающиеся с 2.(например ) - они не сопряжены с AngularJS. Они имеют артефакты сборки из англоязычных версий. 2.0.0-beta.17

Каждый каталог по  содержит набор файлов, которые составляют соответствующую версию. Все файлы JavaScript (кроме тех, которые используются только во время разработки) выпускаются в двух вариантах - один подходит для разработки, другой для производства:angular-mocks

  • <filename>.js- Эти файлы не являются обфусцированными, не минимизированы и удобочитаемы, открывая их в любом редакторе или браузере. Чтобы получить лучшие сообщения об ошибках во время разработки, вы всегда должны использовать эти не минимизированные сценарии.
  • <filename>.min.js- Это минимизированные и запутанные версии, созданные с помощью компилятора Closure. Используйте эти версии для производства, чтобы минимизировать размер приложения, загружаемого браузером вашего пользователя.
  • <filename>.min.js.map- Это файлы исходных карт. Вы можете обслуживать их вместе с файлами, чтобы иметь возможность более легко отлаживать минимизированный код (например, в производственном развертывании), но без ущерба для производительности .min.

Набор файлов, включенных в каждый каталог версий:

  • angular.zip- Это zip-архив, который содержит все файлы, выпущенные для этой версии AngularJS. Используйте этот файл, чтобы получить все за одну загрузку.
  • angular.js- Основной каркас AngularJS. Это все, что вам нужно для запуска приложения AngularJS.
  • angular-csp.css- Вам нужен только этот файл, если вы используете CSP (Content Security Policy). Смотрите здесь для получения дополнительной информации.
  • angular-mocks.js- Этот файл содержит реализацию макетов, которые делают тестирование угловых приложений еще проще. Ваш жгут тестового модуля / интеграции должен загрузить этот файл после загрузки.angular.js
  • angular-loader.js- Загрузчик модулей для модулей AngularJS.

Если вы загружаете несколько файлов сценариев, содержащих модули AngularJS, вы можете загружать их асинхронно и в любом порядке, если вы сначала загружаете этот файл. Часто содержимое этого файла копируется и вставляется в, чтобы избежать даже первоначального запроса . См. Angular-seed для примера использования "index.htmlangular-loader[.min].js"

Дополнительные модули с дополнительными функциями. Эти файлы должны быть загружены после основного файла:

  • angular[.min].js
  • angular-animate.js- Включить поддержку анимации.
  • angular-aria.js- Сделайте свои приложения доступными для пользователей вспомогательных технологий.
  • angular-cookies.js- Удобная обертка для чтения и записи файлов cookie браузера.
  • angular-message-format.js- Расширенная поддержка плюрализма и гендерно-специфических сообщений в интерполированном тексте.
  • angular-messages.js- Расширенная поддержка отображения сообщений проверки.
  • angular-parse-ext.js- Разрешить символы Unicode в идентификаторах внутри выражений AngularJS.
  • angular-resource.js- Простое взаимодействие с сервисами RESTful.
  • angular-route.js- Службы маршрутизации и глубоких ссылок и директивы для приложений AngularJS.
  • angular-sanitize.js- Функциональность для дезинфекции HTML.
  • angular-touch.js- сенсорные события для сенсорных устройств.
  • docs/- Этот каталог содержит все файлы, которые составляют приложение документации. Эти файлы удобны для просмотра старых версий наших документов или, что еще важнее, для просмотра документов в автономном режиме.
  • i18n/- Этот каталог содержит специфичные для локалиngLocale модули AngularJS для переопределения значений по умолчанию, определенных в основном ng модуле.

С какими браузерами работает AngularJS?

AngularJS  запускает обширный набор тестов для следующих браузеров: последние версии Chrome, Firefox, Safari и Safari для iOS, а также версии Internet Explorer 9-11.  Если браузер не протестирован, это не значит, что он не будет работать. Вы также можете заметить, что браузеры будут работать, которые совместно используют большую часть своей кодовой базы, с браузером, который AngularJS тестирует, такие как Opera 15 или новее (использует движок Blink), или различными производными Firefox.

Какова производительность AngularJS?

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

Насколько большой файл angular.js, который нужно включить?

Размер файла - ~ 50 КБ, сжатый и уменьшенный.

Можно ли применять Closure Library с открытым исходным кодом совместно с AngularJS?

Часто это все спрашивают - можно ли? Да, можно применять виджеты из Closure Library в AngularJS.

Применяют ли AngularJS библиотеку jQuery?

AngularJS может применять jQuery, если он есть в вашем приложении при загрузке приложения. Если нет jQuery в вашем пути к сценарию, AngularJS направляется к своей реализации подмножества jQuery, которая имеет название - jQLite . AngularJS 1.3 совместный только с jQuery 2.1 или выше. jQuery 1.7 и новее может нормально работать с AngularJS, но AngularJS  не гарантирует этого.

Что такое тестируемость в AngularJS?

Это интегрированная инфраструктура внедрения зависимостей, которая обеспечивает макеты для большинство тяжелых зависимостей (коммуникация на стороне сервера).

Общие Подводные камни

Канал поддержки AngularJS (#angularjs на Freenode) видит ряд повторяющихся ошибок, в которые попадают новые пользователи AngularJS. Этот документ нацелен на то, чтобы указать на них, прежде чем вы обнаружите их трудным путем

DOM Manipulation

Перестаньте пытаться использовать jQuery для изменения DOM в контроллерах. В самом деле. Это включает в себя добавление элементов, удаление элементов, извлечение их содержимого, их отображение и скрытие. Используйте встроенные директивы или пишите свои собственные, где это необходимо, для выполнения ваших манипуляций с DOM. Смотрите ниже о дублировании функциональности. Если вы боретесь с привычкой, рассмотрите возможность удаления jQuery из вашего приложения. В самом деле AngularJS имеет сервис $ http и мощные директивы, которые делают его почти всегда ненужным. JQLite, входящий в состав AngularJS, имеет несколько функций, наиболее часто используемых при написании директив AngularJS, особенно привязку к событиям.

Попытка дублировать функциональность, которая уже существует

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

ng-repeat 

ng-repeat  получает  много. Люди пытаются использовать jQuery (см. Выше), чтобы добавить больше элементов в некоторый контейнер по мере их загрузки с сервера, но это плохая мысль. Это то, что для чего предназначен  ng-repeat , и делает свою работу очень хорошо. Сохраните данные с сервера в массиве на вашем $scope  и связать его с DOM с помощью ng-repeat.

ng-show

ng-show получает это часто тоже. Условное отображение и скрытие объектов с помощью jQuery - это обычное явление в других приложениях, но AngularJS предлагает лучший способ. ng-show (и ng-hide) условно отображать и скрывать элементы на основе логических выражений. Опишите условия отображения и скрытия элемента в терминах $scope переменных:

<div ng-show="!loggedIn"><a href="#/login">Click here to log in</a></div>

Обратите внимание также на аналог  ng-hide и аналогичный ng-disabled. Обратите внимание на особенности ng-switch, которые следует использовать вместо нескольких взаимоисключающих ng-show s.

ng-class

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

<div ng-class="{ errorClass: isError, warningClass: isWarning, okClass: !isError && !isWarning }">...</div>

Где вы даете ng-class  в объект, чьи ключи являются именами классов CSS и чьи значения являются условными выражениями с использованием $scope переменных. Тогда элемент будет иметь все классы, условия которых истинны, и ни один из тех, чьи условия ложны. Обратите внимание также на удобные ng-class-even и ng-class-odd, и связанные, хотя и несколько иные ng-style.


Оцените полезность статьи:

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (3 оценок, среднее: 5,00 из 5)
Загрузка...

Ваш комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Для отправки комментария, поставьте отметку, что разрешаете сбор и обработку ваших персональных данных . Политика конфиденциальности