AngularJS Hello World: Ваш первый пример программы

Автор: Джеймс Хартман Джеймс Хартман
Hours обновлено

⚡ Умное резюме

Для реализации программы AngularJS Hello World достаточно одного HTML-файла, одной ссылки на скрипт и двух директив, ng-app и ng-controller, для привязки переменной области видимости контроллера к странице с помощью выражения в двойных фигурных скобках.

  • 🔘 ng-app: Атрибут ng-app помечает корневой элемент и автоматически инициализирует указанный модуль AngularJS.
  • ☑️ ng-controller: ng-controller прикрепляет HelloWorldCtrl к элементу h1, делая область видимости контроллера доступной именно там.
  • ✅ Область применения: Присваивание переменной `$scope.message` внутри контроллера передает выражение `{{message}}`, отображаемое в представлении.
  • 🧪 Один файл: Для запуска примера достаточно одного HTML-файла и одной ссылки на скрипт, при этом этап сборки не требуется.
  • 🇧🇷 Поиск и устранение неисправностей: Наличие фигурных скобок на экране почти всегда означает, что библиотека так и не загрузилась или отсутствует ng-app.
  • 📊 Примечание к версии: Поддержка AngularJS завершилась в январе 2022 года, финальным релизом стала версия 1.8.3; новые задачи следует решать в Angular.
Читать

Первый пример программы AngularJS Hello World с использованием ng-app и ng-controller

Лучший способ оценить возможности приложения AngularJS — создать свою первую простую программу «Hello World» на AngularJS.

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

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio

Привет, мир, AngularJS

Примечание к версии: Поддержка AngularJS 1.x в рамках долгосрочной поддержки прекратилась 31 декабря 2021 года, и команда разработчиков фреймворка это подтверждает. Поддержка AngularJS официально прекращена. В январе 2022 года, с финальным релизом 1.8.3 и без последующих обновлений безопасности. Каждый шаг и блок кода ниже сохранены в точности так, как написано. Новые проекты должны быть в современном Angular, где то же самое упражнение начинается с ng serve и автономный компонент и до сих пор использует то же самое. {{ }} Синтаксис интерполяции.

В примере ниже показан самый простой способ создания вашего первого приложения «Hello world» в AngularJS.

На скриншоте ниже с аннотациями обозначена каждая часть этого файла, и семь цифр соответствуют ей. Code Ниже приведён список пояснений. Данные были получены на основе более ранней сборки 1.4.0, поэтому строка скрипта отличается от версии, закреплённой в коде.

Аннотированный HTML-файл AngularJS "Hello World" с семью пронумерованными выносками для ng-app, ng-controller, ссылки на скрипт и переменной области видимости.

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

Code Объяснение:

  1. "нг-приложениеКлючевое слово '' используется для обозначения того, что данное приложение следует рассматривать как приложение AngularJS. Приложению можно дать любое имя.
  2. Контроллер — это то, что используется для размещения бизнес-логики. В теге h1 мы хотим получить доступ к контроллер, который будет содержать логику для отображения «Hello World», поэтому мы можем сказать, что в этом теге мы хотим получить доступ к контроллеру с именем «HelloWorldCtrl».
  3. Мы используем переменную-член под названием «message», которая представляет собой не что иное, как заполнитель для отображения сообщения «Hello World».
  4. Тег «script» используется для ссылки на скрипт angular.js, который содержит весь необходимый функционал для AngularJS. Без этой ссылки любые функции AngularJS работать не будут.
  5. «Контроллер» — это место, где мы фактически создаём нашу бизнес-логику, которая и является нашим контроллером. Подробности каждого ключевого слова будут объяснены в последующих главах. Важно отметить, что мы определяем метод контроллера под названием «HelloWorldCtrl», на который ссылаются на шаге 2.
  6. Мы создаём «функцию», которая будет вызываться, когда наш код обращается к этому контроллеру. Объект `$scope` — это особый объект в AngularJS, глобальный объект, используемый внутри AngularJS. Объект `$scope` используется для управления данными между контроллером и представлением.
  7. Мы создаём переменную-член с именем «message», присваиваем ей значение «Hello World» и прикрепляем эту переменную-член к объекту области видимости.

ЗАМЕТКА: Директива ng-controller — это ключевое слово, определенное в AngularJS (Шаг 2) используется для определения контроллеров в вашем приложении. В нашем приложении мы использовали ключевое слово ng-controller для определения контроллера с именем 'HelloWorldCtrl'. Фактическая логика контроллера будет создана на (Шаге 5).

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Выход:

Появится сообщение «Hello World».

Окно браузера с заголовком Guru99. Отображение заголовка "Hello World" из переменной области видимости AngularJS.

Как загрузить AngularJS: через CDN или локальный файл.

Приведённый выше пример работает, потому что одна строка кода загружает фреймворк на страницу до того, как браузер достигнет конца тела страницы. AngularJS поставляется в виде единого пакета. JavaФайл скрипта, поэтому для первой программы не требуется этап сборки и менеджер пакетов. Достаточно обычного HTML-файла, открытого в браузере.

Есть два способа загрузить этот файл.

  1. Используйте копию с CDN. Пример указывает на code.angularjs.org и версии 1.6.9. Этот хост по-прежнему поддерживает сборки 1.x, самая новая из которых — 1.8.2, в то время как Google На сайте Hosted Libraries больше не отображается AngularJS.
  2. Загрузите локальную копию. Сохраните файл рядом с HTML-страницей и укажите на него путь в теге <script>. Локальная копия позволяет запускать пример в автономном режиме, что важно, когда прокси-сервер блокирует CDN.
<!-- Option 1: reference a CDN copy -->
<script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>

<!-- Option 2: reference a downloaded copy in the same folder -->
<script src="angular.min.js"></script>

Используйте angular.js во время обучения и angular.min.js В производственной среде: неминифицированная сборка выводит читаемый стек вызовов. tracДа, в то время как в минифицированной сборке сообщается о переименованных переменных.

После загрузки файла, ng-app Запускает фреймворк. AngularJS ищет этот атрибут после завершения загрузки документа, рассматривает элемент, содержащий его, как корневой элемент компиляции и инициализирует модуль, указанный в его значении. За этим следуют три следствия:

  • Только первый ng-app На странице автоматически используется Bootstrap. Второй элемент игнорируется, если... angular.bootstrap вызывается вручную.
  • В качестве значения необходимо указать модуль, зарегистрированный в системе. угловой.модуль, в противном случае консоль сообщит [$injector:modulerr].
  • Размещение ng-app на html Как показано в примере, этот элемент интегрирует весь документ в AngularJS; более узкий контейнер тоже подойдет.

СТАТЬИ ПО ТЕМЕ

Как работают выражения {{ }} и привязка ng-model

Двойные скобы вокруг message В теге h1 текст не является заполнителем, заполняемым только при загрузке страницы. AngularJS компилирует этот текстовый узел в наблюдатель за окружающими элементами. сфера, поэтому полученный результат tracks $scope.message до тех пор, пока существует эта страница.

Цикл состоит из трех этапов.

  1. Контроллер записывает значение в $scope.
  2. В ходе дайджест-прохода каждое отслеживаемое выражение сравнивается с его предыдущим результатом.
  3. Каждое выражение, значение которого изменилось, отображается заново на своем месте.

Таким образом, интерполированное выражение является односторонним, от области видимости к области действия. Двусторонняя привязка требует нг-модель, Директивы предназначен для элементов управления формами. Добавить <input ng-model="message"> Рядом с заголовком введите текст в поле, и заголовок будет меняться при каждом нажатии клавиши, поскольку ng-model записывает значение поля обратно в то же свойство области видимости, за которым следит выражение.

Выражения намеренно ограничены. Они считывают свойства области видимости, вызывают методы области видимости и молча допускают неопределенные значения, но при этом не могут объявлять переменные, использовать операторы управления потоком выполнения или обращаться к глобальным объектам, таким как window.

Как исправить пустую страницу или неотображаемый {{ }}

Первая попытка запуска программы на AngularJS завершается с ошибкой одним из двух видимых способов: страница остаётся пустой или отображается только текст. {{message}} появляется там, где должно быть "Hello World". Оба варианта означают, что фреймворк так и не перехватил разметку. Выполните проверки ниже по порядку, открыв консоль браузера.

  1. Подтвердите загрузку библиотеки. Откройте панель «Сеть» и найдите... angular.js Запрос. Ошибка 404 или недоступность CDN не оставляют скобки на экране без изменений.
  2. Проверьте путь к скрипту. Относительный путь разрешается относительно папки, содержащей HTML-файл, поэтому копия в js подпапка нуждается js/angular.min.js.
  3. Проверьте ng-app. Отсутствие или орфографическая ошибка в атрибуте означает, что ничего не запускается. Атрибут пишется через дефис как ng-app в разметке, даже несмотря на то, что директива написана в стиле Camel Case. JavaСценарий.
  4. Прочитайте сообщение об ошибке в консоли. [$injector:modulerr] Это означает, что модуль, указанный в ng-app, никогда не был зарегистрирован. [ng:areq] Обычно это означает, что имя контроллера в разметке не совпадает с именем, переданным в функцию. .controller().
  5. Поищите второй ng-app. Только первый элемент использует Bootstrap, поэтому лишняя копия, оставленная на внутреннем элементе, незаметно отключает эту часть страницы.

Еще две причины объясняют большую часть оставшихся сообщений.

  • Протокол файла. Этот пример с одним файлом отлично работает при открытии непосредственно с диска, но любой шаблон, загруженный через XHR, блокируется правилами источника браузера. После появления шаблонов переведите папку на HTTP-сервер.
  • Кратковременный проблеск брекетов. Когда разметка отображается до того, как фреймворк её скомпилирует, исходное выражение становится видимым на мгновение. ng-cloak к элементу или поменяйте выражение для ng-bind="message", которая никогда не отображает свою собственную разметку.

Если ни один из этих вариантов не подходит, сократите страницу до приведенного выше примера и добавляйте свой код по одной строке за раз.

Часто задаваемые вопросы (FAQ)

Подойдет любой из четырех перечисленных выше вариантов, и в этом примере используется... WebstormПоскольку программа представляет собой один статический HTML-файл, достаточно обычного текстового редактора. IDE добавляет только автодополнение директив, перезагрузку в реальном времени и встроенную отладку.

$scope — это объект привязки, используемый совместно несколькими компонентами. контроллер и его представление. Запись `$scope.message` внутри `HelloWorldCtrl` делает это свойство видимым для выражения, размещенного на элементе `h1`.

Оба файла содержат один и тот же фреймворк. angular.js не минифицирован, поэтому ошибки указывают на читаемый исходный код. angular.min.js сжат для продакшена и требует явной аннотации зависимостей, поскольку минификация переименовывает имена параметров, которые AngularJS проверяет в противном случае.

AngularJS — это представленная здесь версия фреймворка 1.x, основанная на директивах, $scope и простом интерфейсе. JavaСкрипт. Angular, то есть версия 2 и выше, является отдельным компонентом. TypeScript Фреймворк построен на компонентах и ​​является активно поддерживаемой линейкой продуктов.

В основном для поддержки существующих приложений версии 1.x, которые по-прежнему широко распространены. Словарь терминов, связанных с привязкой данных, директивами и т. д. внедрение зависимости Однако поддержка была прекращена в январе 2022 года, поэтому новые проекты должны быть реализованы в современном Angular.

Да. Зарегистрируйте каждый из них с помощью метода `.controller()` в одном и том же модуле и прикрепите их к разным элементам с помощью `ng-controller`. Каждый получит свою собственную дочернюю область видимости, поэтому свойства с одинаковыми именами останутся независимыми.

Современные ассистенты считывают код версии 1.x и создают список директив, фильтров и сервисов с предлагаемыми эквивалентами компонентов и сервисов. Этот список полезен для SCO.ping работа, хотя каждая картаping Требуется еще ручная проверка.

Второй пилот GitHub завершает создание шаблонов контроллера, назначение $scope и ng-отправить Обработчики из короткого комментария, но их обучение ориентировано на современный Angular, поэтому убедитесь, что подсказки действительно используют синтаксис версии 1.x.

Подведем итог этой публикации следующим образом: