Приложение AngularJS Hello World: Вашата първа примерна програма

Съдържание:

Anonim

Най-добрият начин да видите силата на приложението AngularJS е да създадете първата си основна програма "Hello World" приложение в Angular.JS.

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

  1. Уеб буря
  2. Възвишен текст
  3. AngularJS Eclipse
  4. Визуално студио

Здравей, свят, 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“.