AngularJS - Pierwsza aplikacja

Przed utworzeniem aktualnego Hello World! aplikacji korzystającej z AngularJS, zobaczmy części aplikacji AngularJS. Aplikacja AngularJS składa się z trzech ważnych części -

ng-app - Ta dyrektywa definiuje i łączy aplikację AngularJS z HTML.
ng-model - Ta dyrektywa wiąże wartości danych aplikacji AngularJS z kontrolkami wejściowymi HTML.
ng-bind - Ta dyrektywa wiąże dane aplikacji AngularJS ze znacznikami HTML.

Tworzenie aplikacji AngularJS

Krok 1: Załaduj framework

Będąc czystą strukturą JavaScript, można go dodać za pomocą tagu <Script>.

<script 
   src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

Krok 2: Zdefiniuj aplikację AngularJS za pomocą dyrektywy ng-app

<div ng-app = "">
   ...
</div>

Krok 3: Zdefiniuj nazwę modelu za pomocą dyrektywy ng-model

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

Krok 4: Ustal wartość powyższego modelu zdefiniowanego za pomocą dyrektywy ng-bind

<p>Hello <span ng-bind = "name"></span>!</p>

Wykonywanie aplikacji AngularJS

Użyj wyżej wymienionych trzech kroków na stronie HTML.

testAngularJS.htm

<html>
   <head>
      <title>AngularJS First Application</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

Wynik

Otwórz plik testAngularJS.htm w przeglądarce internetowej. Wpisz swoje imię i nazwisko i zobacz wynik.

Jak AngularJS integruje się z HTML

Dyrektywa ng-app wskazuje początek aplikacji AngularJS.
Dyrektywa ng-model tworzy zmienną modelową o nazwie name, która może być używana ze stroną HTML oraz w ramach dyrektywy div zawierającej ng-app.
Następnie ng-bind używa modelu nazwy do wyświetlenia w tagu HTML <span> za każdym razem, gdy użytkownik wpisze dane wejściowe w polu tekstowym.
Zamknięcie </div> oznacza koniec aplikacji AngularJS.