AngularJS - Настройка среды

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

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

View on GitHub - Нажав на эту кнопку, вы перейдете на GitHub и получите все последние скрипты.
Download AngularJS 1 - Нажав на эту кнопку, вы увидите диалоговое окно, показанное как -

На этом экране представлены различные варианты использования Angular JS следующим образом:

Downloading and hosting files locally
- Есть два разных варианта: Legacy и Latest. Сами имена говорят сами за себя. У Legacy версия меньше 1.2.x, а у Последней версии 1.3.x.
- Мы также можем использовать минимизированную, несжатую или заархивированную версию.
CDN access- У вас также есть доступ к CDN. CDN дает вам доступ к региональным центрам обработки данных. В этом случае хост Google. CDN передает ответственность за размещение файлов с ваших собственных серверов на ряд внешних. Это также дает преимущество в том, что если посетитель вашей веб-страницы уже загрузил копию AngularJS с того же CDN, нет необходимости повторно загружать ее.

В этом руководстве мы используем версии библиотеки CDN.

пример

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

<!doctype html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/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

Мы включаем файл JavaScript AngularJS на страницу HTML, чтобы мы могли его использовать -

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

Вы можете проверить последнюю версию AngularJS на его официальном сайте.

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

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

<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 сообщает AngularJS записать значение модели с именем helloTo.title в HTML в это место.

Контроллер

Часть контроллера -

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

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

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

Исполнение

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

Welcome AngularJS to the world of Tutorialspoint!

Что происходит, когда страница загружается в браузере? Посмотрим -

HTML-документ загружается в браузер и оценивается браузером.
Загружается файл JavaScript AngularJS, создается глобальный объект angular .
Выполняется JavaScript, который регистрирует функции контроллера.
Затем AngularJS просматривает HTML-код для поиска приложений AngularJS, а также представлений.
Как только представление найдено, оно подключает это представление к соответствующей функции контроллера.
Затем AngularJS выполняет функции контроллера.
Затем он отображает представления с данными из модели, заполненной контроллером. Страница готова.