Програма AngularJS Hello World: ваш перший приклад програми
Джеймс Гартман
Найкращий спосіб переконатися в потужності додатка AngularJS — це створити свою першу базову програму «Hello World» в Angular.JS.
Існує багато інтегрованих середовищ розробки, які можна використовувати для розробки AngularJS, деякі з популярних згадані нижче. У нашому прикладі ми використовуємо Webstorm як наша IDE.
- Webstorm
- Sublime Text
- AngularJS Eclipse
- Visual Studio
Привіт, світе, AngularJS
Наведений нижче приклад показує найпростіший спосіб створити вашу першу програму «Hello world» в AngularJS.
<!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>
Пояснення коду:
- "ng-додатокКлючове слово використовується для позначення того, що цю програму слід розглядати як програму angular js. Цій програмі можна дати будь-яку назву.
- Контролер — це те, що використовується для підтримки бізнес-логіки. У тегу h1 ми хочемо отримати доступ до контролера, який матиме логіку відображення «HelloWorld», тому ми можемо сказати, що в цьому тегу ми хочемо отримати доступ до контролера під назвою «HelloWorldCtrl».
- Ми використовуємо змінну-член під назвою «message», яка є нічим іншим, як заповнювачем для відображення повідомлення «Hello World».
- Тег «script» використовується для посилання на сценарій angular.js, який має всі необхідні функції для angular js. Без цього посилання, якщо ми спробуємо використати будь-які функції AngularJS, вони не працюватимуть.
- «Контролер» — це місце, де ми фактично створюємо нашу бізнес-логіку, тобто наш контролер. Особливості кожного ключового слова будуть пояснені в наступних розділах. Важливо зауважити, що ми визначаємо метод контролера під назвою «HelloWorldCtrl», на який посилаються у Кроці 2.
- Ми створюємо «функцію», яка буде викликана, коли наш код викликає цей контролер. Об’єкт $scope — це спеціальний об’єкт в AngularJS, який є глобальним об’єктом, який використовується в Angular.js. Об’єкт $scope використовується для керування даними між контролером і представленням.
- Ми створюємо змінну-член під назвою «message», присвоюючи їй значення «HelloWorld» і приєднуючи змінну-член до об’єкта scope.
ПРИМІТКА: Директива ng-controller є ключовим словом, визначеним у AngularJS (крок №2) і використовується для визначення контролерів у вашій програмі. Тут, у нашій програмі, ми використали ключове слово ng-controller для визначення контролера під назвою «HelloWorldCtrl». Справжня логіка для контролера буде створена в (крок №5).
Якщо команда виконана успішно, під час запуску коду в браузері буде показано наступний результат.
вихід:
Відобразиться повідомлення «Hello World».
