Учебники

AngularJS — Первое применение

Октябрь 23, 2018

Перед созданием актуального Hello World! приложение, использующее AngularJS, давайте посмотрим части приложения AngularJS. Приложение AngularJS состоит из следующих трех важных частей:

  • ng-app — эта директива определяет и связывает приложение AngularJS с HTML.

  • ng-model — эта директива связывает значения данных приложения AngularJS с элементами управления вводом HTML.

  • ng-bind — эта директива связывает данные приложения AngularJS с тегами HTML.

ng-app — эта директива определяет и связывает приложение AngularJS с HTML.

ng-model — эта директива связывает значения данных приложения AngularJS с элементами управления вводом HTML.

ng-bind — эта директива связывает данные приложения AngularJS с тегами HTML.

Создание приложения AngularJS

Шаг 1: Загрузите структуру

Будучи чистым JavaScript-фреймворком, его можно добавить с помощью тега <Script>. 

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

Шаг 2: Определите приложение AngularJS с помощью директивы ng-app 

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

Шаг 3: Определите имя модели с помощью директивы ng-model 

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

Шаг 4: Привязать значение вышеуказанной модели, определенное с помощью директивы ng-bind 

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

Выполнение приложения AngularJS

Используйте вышеупомянутые три шага на странице HTML.

testAngularJS.htm

Live Demo 

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

Выход

Откройте файл testAngularJS.htm в веб-браузере. Введите свое имя и увидите результат.

Директива ng-app указывает на запуск приложения AngularJS.

Директива ng-model создает переменную модели с именем name, которую можно использовать со страницей HTML и внутри div, имеющего директиву ng-app.

Затем ng-bind использует модель имени для отображения в теге HTML <span> всякий раз, когда пользователь вводит данные в текстовое поле.

Закрывающий тег </ div> указывает на конец приложения AngularJS.

49
Share: