Webzone Публикации Основы Angular JS

Основы Angular JS

09:58 , 31 Октябрь 2018

AngularJS-это платформа веб-приложений на стороне клиента, которая переопределяет HTML.

 

Если вы опытный веб-разработчик, вы, вероятно, уже сравнили Angular со знакомыми фреймворками и библиотеками JavaScript, такими как jQuery, Knockout, Backbone, Ember и, возможно, даже React. Точно так же, если вы знаете что-то о программировании графического интерфейса, возможно, вы попытались связать Angle to Model View Controller (MVC) или Model View ViewModel (MVVM). Эти импульсы естественны, но они могут омрачить ваше понимание Angular . Только для этой главы я бы попросил вас отвлечься от Angular как рамки JavaScript. Подождите немного, пытаясь понять, как это работает под капотом. Возьмите Angular значение по номиналу. Испытайте это как мощный набор расширений для HTML.

 

Мы начнем с трех фундаментальных угловых конструкций: выражений, директив и областей. Однако, прежде чем мы перейдем к примерам, давайте быстро рассмотрим, как заставить Angular работать на веб-странице. (Или, пропустите вперед, чтобы начать раздел по выражениям.)

 

 

Установка

 

Где вы получаете Angular? Загрузка Google на сайт (CDN) очень удобна в использовании. Тег скрипта показан ниже в элементе head.

 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>

 

После включения файла Angular library вы должны позволить Angular узнать, какой частью HTML-документа он должен управлять. Помните, что Angular ориентирован на HTML, а не на JavaScript. Вместо того, чтобы писать JavaScript для загрузки, мы вместо этого добавляем нестандартный HTML, который распознает Angular. Это специальный атрибут ng-app, который мы можем добавить к любому элементу в DOM. Для примеров в этой главе мы разместим его на элементе body, как показано ниже. Выбрав его поместить на элемент body или html, мы предоставляем контроль над угловыми приложениями на всей нашей странице. Вы можете выбрать более узкую область, если хотите, что позволяет использовать другую структуру наряду с угловыми или даже загружать дополнительные угловые приложения. Это имеет смысл для более традиционного, ориентированного на документ веб-сайта, в котором клиентский код содержится в отдельных виджетах, а не в одностраничном приложении (SPA).

 

<body ng-app>
  <!-- Other examples in this chapter will be inserted here. -->
</body>


 

 

С помощью этого волшебного атрибута теперь у нас есть угловая работа на нашей странице. Итак, что мы можем с этим сделать?

 

 

 

Выражения

 

Будьте осторожны: если вы прошли обучение в доктрине ненавязчивого JavaScript, в следующих примерах могут возникнуть сигнальные звонки, так как первый заказ бизнеса Angular позволит вам смешать JavaScript-подобные выражения в вашем HTML. Угловые выражения могут быть почти любым простым, допустимым JavaScript, хотя структуры управления потоками, такие как петли и некоторые другие вещи, не допускаются. Пожалуйста, приостановите рассмотрение, поскольку мы исследуем границы того, что разрешено (но не обязательно в хорошем вкусе) через некоторые старомодные эксперименты.



Начнем с добавления двух чисел. Как и весь код в этой книге, приведенный ниже список - это живой редактор, который позволяет вам изменить пример. Вы можете изменить любую его часть. Результат выводится в изолированной песочнице iframe и будет мгновенно обновляться.

 

 

The number {{3 + 4}}.

 

 

Результат:  The number 7.

 

Вперед, замените 3 + 4 в приведенном выше примере с другим математическим выражением. Посмотрите, можете ли вы найти то, что Angular не сможет или не сможет обработать. (Когда Angular не обрабатывает выражение, он либо выводит исходную строку, либо, в случае некоторых ошибок, вообще ничего.)



Двойными фигурными скобками являются шаблонные разделители. Если вы знакомы с Mustache или, возможно, с Handlebars, то раньше вы использовали двойные фигурные скобки. Один из способов подумать об Angular - это действительно сложная библиотека шаблонов. Он обрабатывает все элементы, отмеченные знаком ng-app, в качестве шаблона, который компилируется при загрузке вашей страницы и повторно отображается при каждом изменении данных. (Не беспокойтесь, если вы не знакомы с шаблонами, мы расскажем об этом позже).



Как насчет проверки равенства двух значений? Конечно, мы тоже можем это сделать.

 

 

Are strings and numbers equal? {{'2' == 2}}

 

 

Результат:  Are strings and numbers equal? true

 

Результат верен для JavaScript. Если вы удивлены этим, быстро просмотрите операторы сравнения JavaScript, а затем измените == на === в приведенном выше примере. (Строгие сравнения лучше, не так ли?)



Вот пример, который объединяет строки, а также демонстрирует, что у нас есть доступ к стандартным библиотечным функциям, таким как метод экземпляра String toUpperCase.

 

 

{{"Angular" + "js".toUpperCase()}}

 

 

Результат:  AngularJS

 

Вы чувствуете, что можете делать все, что хотите, внутри? Не так быстро, партнер.

 

 

{{alert("Hello world")}}

 


Вы определенно не можете использовать предупреждение. Также вы не можете получить доступ к большинству глобальных объектов JavaScript, таких как Math, Number, Date и т. Д.



Попробуйте заменить предупреждение («Hello world») в приведенном выше примере с помощью parseInt («1»), Date.now (), Number.NaN и Math.random (). Если выход не показан, Angular отказался разобрать выражение.



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

 

 

{{a = 1; a + a}}

 

 

Результат: 2

 

Оно работает. Но попробуйте добавить ключевое слово var перед именем переменной. Вы получили сообщение об ошибке? Если вы видите исходное выражение, включая разделители в выводе, вы вызвали ошибку. Не чувствую плохо. Разрушение - отличный способ учиться.



Так что это эксперимент. Я не знаю, может ли переменная, назначенная внутри одного набора разделителей, использоваться в другом. Почему бы не попробовать?

 

 

{{a = 1}} remains {{a}}

 

 

Результат: 1 remains 1

 

Да, это работает. Что делать, если вы переместите инициализацию переменной во второе выражение? Давай, попробуй. Это работает? Можете ли вы догадаться, почему?



Хорошо, поддержка поддержки выражений. Как насчет тройного оператора?

 

 

There {{count = 1; (count == 1 ? "is " : "are ") + count}} of them.

 

 

Результат: There is 1 of them.

 

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



Теперь, как насчет оператора инкремента (++)? Можем ли мы это использовать?

 

<p>{{a = 1; ++a}}</p>

 

Результат: 1

 

Очевидно нет. Все-таки, как насчет цикла for? Мы избежим идиоматического использования var и оператора инкремента, поскольку мы уже дисквалифицировали их.

 

<p>{{for (i = 0; i < 10; i = i + 1) {i}}}</p>

 

 Результат: {{for (i = 0; i < 10; i = i + 1) {i}}}

 

Цикл for не выполняется. Он создает синтаксическую ошибку, которую вы должны увидеть в консоли вашего браузера. Но в этом выражении нет ничего недействительного в JavaScript. В консоли браузера вставьте оператор для (i = 0; i <10; i = i + 1) {i} ;. Он должен оцениться до 9. Идите вперед, попробуйте. Итак, мы достигли нескольких границ: угловые выражения - это не JavaScript. Язык выражений не поддерживает условные обозначения, циклы или ошибки бросания.


Мы, скорее всего, выдвинули вещи с выражениями. Лично я в порядке с некоторым JavaScript в моей разметке, когда он кратким и связан с просмотром, поэтому я ценю относительно разрешительный характер угловых выражений. Однако, не больше, чем просто JavaScript в шаблоне, быстро становится неприглядным и запутанным. К счастью, выражения просто играют вспомогательную роль в Angular. Мы никогда не должны ощущать необходимости размещать в них слишком много кода.


Директива - реальный ключ к умственной производительности Angular.

 

Директивы


Директивы - это сердце и душа Angular . Я рекомендую вам начать, думая о них просто как пользовательский HTML. В большинстве случаев директивы отображаются в виде атрибутов, которые могут использоваться на обычных, знакомых элементах. Встроенные директивы, которые поставляются предварительно с Угловым, обычно начинаются с ng-префикса, который является ссылкой на «ng» в Angular. Сейчас доступно бесчисленное множество сторонних директив. «Должна быть директива для этого» должна быть вашей стандартной реакцией, когда вы видите многословный JavaScript в выражении с угловым выражением.



Мы уже использовали директиву. Ты помнишь это? Чтобы заставить Angular работать в реальных примерах в этой главе, мы добавили ng-app к элементу тела страницы. (Вернитесь, чтобы посмотреть.) В этом случае мы использовали директиву без передачи каких-либо аргументов. Когда вы передаете аргументы директиве, вы просто используете = "", как и с обычным атрибутом HTML. Например, мы могли бы передать имя приложения с помощью ng-app = "myApp". (Имя приложения на самом деле является именем модуля, важной частью архитектуры Angular, которая рассматривается в главе «Модули»).

 

ng-bind

Некоторые директивы принимают и анализируют строковые выражения. (Вы можете проверить параметры встроенной директивы, посетив ее документацию по API.) Например, директива ng-bind просто отображает выражения, как и двойные фигурные скобки, которые мы использовали в предыдущем разделе. Вот как это выглядит.

 

<p>The number <span ng-bind="3 + 4"></span>.</p>

 

Результат: The number 7.  

 

Хотя это простое использование приводит к точному тому же результату, что и первый пример выше, существует важное различие в поведении ng-bind: содержимое элемента, к которому вы применяете ng-bind, заменяется при визуализации шаблона. Поэтому предпочтительным методом является использование ng-bind, но не помещать что-либо внутри элемента, в результате чего в течение короткого момента, когда Angular заменит ваш необработанный шаблон, ничего не отображается. Это может быть выгодно. В зависимости от окружения пользователя и размера и поведения вашего приложения с угловыми углами, на самом деле может быть задержка, которая позволяет пользователям видеть двойные фигурные скобки и выражения в вашем несжатом содержимом страницы. Использование ng-bind в пустых элементах позволяет избежать этого.



В какой-то момент, когда ваше Angular приложение растет в размерах, вы можете захотеть решить эти проблемы мерцания на более высоком уровне, спрятав весь или весь ваш контент до тех пор, пока Angular не загрузится. Это легко сделать с директивой ng-cloak. Смотрите, почему «должна быть директива для этого» - это правильный настрой?

 

ng-init

Помните, как мы инициализировали переменную в выражении, просто чтобы убедиться, что она будет работать? Ну, вы догадались: есть также директива для этого. С помощью ng-init вы можете инициализировать переменные для использования в любом месте элемента, к которому он применяется.

 

<div ng-init="sum = 3 + 2">
  <p>
    {{sum + 1}} is more than
    <span ng-bind='sum - 1'></span>
  </p>
</div>

 

Результат: 6 is more than 4

 

Используя точки с запятой для разграничения операторов, вы можете инициализировать столько переменных, сколько захотите.

<div ng-init="count = 7; units = 'days'; collection = 'week'">
  <p>
    There are {{count}} {{units}} in a {{collection}}.
  </p>
</div>

Результат: There are 7 days in a week.

 

 

В начале этой главы я попросил вас не думать об Angular как о структуре JavaScript, а о наборе расширений к HTML. Как отмечает Angular Creator Miško Hevery в этом увлекательном интервью, Angular изначально была задумана как радикально более производительный способ для разработчиков на веб-страницах. Рамка JavaScript появилась позже.

В основе оригинальной стратегии Angular лежит предпосылка, что декларативный стиль программирования лучше всего подходит для быстрого развития графического интерфейса. Однако, вместо того, чтобы просить разработчиков инвестировать в новый доменный язык (DSL) для веб-разработки, как это было сделано с MXML и XUL, Angular основывается на широко распространенном распространении HTML.

Так много для видения. На данный момент, по крайней мере, Angular практически никогда не используется без пользовательского JavaScript. В реальном мире угловые приложения почти всегда используют контроллеры, сервисы и маршрутизаторы, а также поддерживающие модули, инъекции зависимостей и инфраструктуру Ajax, которые описаны в этой книге. Однако обещание производительности Angular по-прежнему лучше всего реализуется, когда веб-разработчик может работать в основном в декларативном пространстве со степенью уверенности, что «для этого должна быть директива». Написание пользовательских директив для заполнения пробелов - это один из более сложных областей Angular, поэтому в этой главе делается попытка начать ваше Angular путешествие с учетом конечных результатов. Теперь, когда вы понимаете, что конечной целью является повышение производительности в HTML, а не просто написание кода JavaScript в рамках, вы лучше подготовитесь к деталям.

 

 

 

 

 

 

 

Вопросы / Комментарии / Отзывы


Требуется аккаунт чтобы написать комментарии :)