AngularJS Hello World: Ваш перший приклад програми

Найкращий спосіб побачити силу 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, тому рядок скрипта відрізняється від версії, закріпленої в коді.

<!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. Подіяng-додатокКлючове слово ” використовується для позначення того, що цей застосунок слід розглядати як застосунок 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».

Як завантажити AngularJS: CDN або локальний файл

Наведений вище приклад працює, тому що один рядок втягує фреймворк на сторінку, перш ніж браузер досягне кінця тіла. AngularJS постачається як єдиний JavaФайл скрипта, тому перша програма не потребує жодного кроку збірки та менеджера пакетів. Достатньо простого HTML-файлу, відкритого у браузері.

Існує два способи завантаження цього файлу.

1. Посилання на копію CDN. Приклад вказує на code.angularjs.org і підтримує версію 1.6.9. Цей хост все ще обслуговує збірки 1.x, найвища з яких — 1.8.2, тоді як Google Розміщені бібліотеки більше не містять AngularJS.
2. Завантажте локальну копію. Збережіть файл поруч із HTML-сторінкою та вкажіть на нього тег скрипта. Локальна копія забезпечує роботу прикладу в автономному режимі, що важливо, коли проксі-сервер блокує 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 у продакшені: немініфікована збірка друкує читабельний стек traces, тоді як мініфікована збірка повідомляє про перейменовані змінні.

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

• Тільки перший ng-app на сторінці автоматично завантажується. Другий ігнорується, якщо angular.bootstrap викликається вручну.
• Значення має називати модуль, зареєстрований у кутовий.модуль, інакше консоль повідомляє [$injector:modulerr].
• розміщення ng-app на html Елемент , як у прикладі, переносить весь документ під AngularJS; вужчий контейнер також підійде.

Як працюють вирази {{ }} та прив'язка до ng-моделі

Подвійні брекети навколо message у тезі h1 не є заповнювачем, який заповнюється один раз під час завантаження. AngularJS компілює цей текстовий вузол у спостерігач на навколишньому сфера, тому відрендерений вивід tracks $scope.message доки сторінка існує.

Цикл виконується у три етапи.

1. Контролер записує значення на $scope.
2. Дайджест-пас порівнює кожен переглянутий вираз з його попереднім результатом.
3. Кожен вираз, значення якого змінилося, відтворюється повторно на місці.

Таким чином, інтерпольований вираз є одностороннім, від області видимості до представлення. Двостороннє зв'язування потребує ng-модель, директива призначений для елементів керування формою. Додати <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-додаток. Відсутній або неправильно написаний атрибут нічого не означає для bootstrap. Атрибут пишеться через дефіс як ng-app у розмітці, навіть якщо директива написана верблюжим регістром у JavaСценарій.
4. Зчитайте помилку консолі. [$injector:modulerr] означає, що модуль, названий ng-app, ніколи не був зареєстрований. [ng:areq] зазвичай означає, що ім'я контролера в розмітці не збігається з ім'ям, переданим до .controller().
5. Шукайте другий ng-додаток. Тільки перший елемент завантажується самостійно, тому випадкова копія, залишена на внутрішньому елементі, непомітно вимикає цю частину сторінки.

Дві додаткові причини пояснюють більшість решти повідомлень.

• Файловий протокол. Цей приклад з одним файлом працює нормально, якщо його відкрити безпосередньо з диска, але будь-який шаблон, отриманий через XHR, блокується правилами походження браузера. Обслуговуйте папку через HTTP, щойно з'являться шаблони.
• Короткий спалах брекетів. Коли розмітка рендериться до того, як фреймворк її скомпілює, необроблений вираз видно на мить. Додати ng-cloak до елемента або замінити вираз на ng-bind="message", який ніколи не відображає власну розмітку.

Якщо жоден з цих варіантів не застосовується, зменште сторінку до наведеного вище прикладу та додайте свій власний код по одному рядку за раз.

Поширені запитання