Застосування AngularJS Hello World: Ваш перший приклад програми

Зміст:

Anonim

Найкращий спосіб переконатися в потужності програми AngularJS - це створити свою першу базову програму "Hello World" у Angular.JS.

Існує багато інтегрованих середовищ розробки, які можна використовувати для розробки AngularJS, деякі з популярних згадані нижче. У нашому прикладі ми використовуємо Webstorm як наш IDE.

  1. Веб-шторм
  2. Піднесений текст
  3. AngularJS Eclipse
  4. Visual Studio

Привіт світ, AngularJS

Наведений нижче приклад показує найпростіший спосіб створити свій перший додаток "Hello world" у AngularJS.

Guru99

{{message}}

Пояснення коду:

  1. Ключове слово " ng-app " використовується для позначення того, що цей додаток слід розглядати як кутовий js-додаток. Цій програмі можна дати будь-яке ім'я.
  2. Контролер - це те, що використовується для утримання бізнес-логіки. У тегу h1 ми хочемо отримати доступ до контролера, який буде мати логіку для відображення "HelloWorld", тому ми можемо сказати, що в цьому тезі ми хочемо отримати доступ до контролера з назвою "HelloWorldCtrl".
  3. Ми використовуємо змінну-член, яка називається "message", яка є нічим іншим, як заповнювачем для відображення повідомлення "Hello World".
  4. "Тег сценарію" використовується для посилання на скрипт angular.js, який має всі необхідні функціональні можливості для angular js. Без цього посилання, якщо ми спробуємо використовувати будь-які функції AngularJS, вони не працюватимуть.
  5. "Контролер" - це місце, де ми фактично створюємо свою бізнес-логіку, яка є нашим контролером. Особливості кожного ключового слова будуть пояснені в наступних розділах. Важливо зазначити, що ми визначаємо метод контролера під назвою 'HelloWorldCtrl', на який посилається в кроці 2.
  6. Ми створюємо "функцію", яка буде викликана, коли наш код викликає цей контролер. Об'єкт $ scope - це спеціальний об'єкт в AngularJS, який є глобальним об'єктом, що використовується в Angular.js. Об'єкт $ scope використовується для управління даними між контролером та поданням.
  7. Ми створюємо змінну-член, яка називається "message", присвоюючи їй значення "HelloWorld" і приєднуючи змінну-член до об'єкта сфери.

ПРИМІТКА : Директива ng-controller - це ключове слово, визначене в AngularJS (крок 2), і використовується для визначення контролерів у вашому додатку. Тут, у нашому додатку, ми використали ключове слово ng-controller для визначення контролера з назвою «HelloWorldCtrl». Фактична логіка для контролера буде створена в (крок 5).

Якщо команда успішно виконана, під час запуску коду в браузері буде показано наступний результат.

Вихід:

З'явиться повідомлення "Hello World".