Первое одностраничное приложение с AngularJS

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

ng-app – Директива определяет и привязывает AngularJS приложение к HTML.
ng-model – Директива связывает значения AngularJS с управляющими элементами (input, select, button) HTML страницы.
ng-bind – Директива связывает данные AngularJS с HTML тегами.

Шаги для создания приложения на AngularJS

Шаг 1 – Загружаем фреймворк

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

Шаг 2 – Определяем корневой элемент приложения

1
<div ng-app = "">
2
   ...
3
</div>

Шаг 3 - Определяем модель используя директиву ng-model

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

Шаг 4 – Связываем значения модели с тегами

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

Шаги для запуска AngularJS приложения

Используем простую HTML страницу testAngularJS.htm.

1
<html>
2

3
   <head>
4
      <title>AngularJS First Application</title>
5
   </head>
6

7
   <body>
8
      <h1>Sample Application</h1>
9

10
      <div ng-app = "">
11
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
12
         <p>Hello <span ng-bind = "name"></span>!</p>
13
      </div>
14

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

17
   </body>
18
</html>

Вывод

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

e1ff17a3b0

Как AngularJS интегрируется в HTML

ng-app – директива определяет где начинается приложение AngularJS
ng-model – директива которая создает модель переменной с названием «name» которая может быть использована в html странице вместе с блоком div с директивой ng-app
ng-bind – далее, используется имя модели для отображения текста с инпута в span элементе.
Закрывающийся говорит о конце приложения AngularJS