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

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

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

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

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

Здравей свят, AngularJS

Примерът по-долу показва най-лесния начин да създадете първото си приложение „Hello world“ в AngularJS.

Програма AngularJS Hello World

<!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>

Обяснение на кода:

  1. "ng-приложение” се използва ключовата дума, за да обозначи, че това приложение трябва да се разглежда като angular 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“.

Програма AngularJS Hello World