Skip to main content
Logo

Установка и тестовое приложение AngularJS

March 21, 2016
ru
This is an archived post from thewebland.net. Content may be outdated.

В этой главе мы поговорим о том, как настроить AngularJS для использования в разработке веб-приложений. Мы будем также кратко изучим структуру каталогов и ее содержимое.

Когда вы открываете ссылку https://angularjs.org/, вы видите несколько вариантов, чтобы загрузить библиотеку AngularJS -

angularjs website

View on GitHub − Нажмите на эту кнопку, чтобы перейти к GitHub и получить все последние изменения библиотеки.

Download − Или при нажатии на эту кнопку будет видно следующий экран (в наших уроках мы используем AngularJS 1 версии) −

2db1bb0956

Этот экран дает различные варианты установки Angularjs -

Мы используем CDN библиотеки в данном туториале.

Пример

Теперь давайте напишем простой пример использования библиотеки AngularJS. Давайте создадим файл first_example.html, как показано ниже -

<!doctype html>
<html>


   <head>
      <script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
   </head>


   <body ng-app = "myapp">


      <div ng-controller = "HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
      </div>


      <script>
         angular.module("myapp", [])


         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>


   </body>
</html>

Следующие разделы описывают выше приведенный код подробно.

Подключаем AngularJS

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

Точка входа в приложение AngularJS

Далее мы говорим, что часть HTML содержит приложение AngularJS. Это делается путем добавления атрибута ng-app к корневому HTML-элементу приложения AngularJS. Вы можете либо добавить его в HTML-элемент или элемент тела, как показано ниже -

<body ng-app = "myapp">
</body>

Вид

Эта часть кода отвечает за вид:

<div ng-controller = "HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>

ng-controller говорит AngularJS какой контроллер использовать. helloTo.title говорит написать “модель” значения с именем helloTo.title в этом месте.

Контроллер

Следующая часть кода отвечает за контроллер:

<script>
   angular.module("myapp", [])


   .controller("HelloController", function($scope) {
      $scope.helloTo = {};
      $scope.helloTo.title = "AngularJS";
   });
</script>

Этот код регистрирует функцию контроллера с именем HelloController в angular модель с именем MyApp. Мы будем изучать больше о моделях и контроллерах в соответствующих главах. Функция контроллера регистрируется через angular.module(…).controller(…) вызов функции.

$scope - Параметр, передаваемый функции контроллера является модель. Функция контроллера добавляет helloTo в JavaScript объект, и в этом объекте он добавляет поле заголовка.

Выполнение

Сохраните приведенный выше код, как first_example.html и откройте его в любом браузере. Вы увидите следующее -

Welcome AngularJS to the world of Tutorialspoint!

При загрузке страницы в браузере, происходят следующее:

  • HTML-документ загружен в браузер. Файл AngularJS JavaScript загружается и создается глобальный объект. Далее, JavaScript, который регистрирует функции контроллера выполняется.
  • Далее, AngularJS просматривает HTML, чтобы найти точку входа в AngularJS и вид. После того, как вид найден, он соединяет присоединяет его к соответствующей функции контроллера.
  • Далее, AngularJS выполняет функцию контроллера. Она рендерит вид с данными с модели загруженными в контроллере. Все теперь страница загружена.