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

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

AngularJS - настройка среды
  • Загрузить AngularJS - нажмите эту кнопку, появится экран, как показано ниже -
  • Этот экран дает различные варианты использования Angular JS следующим образом:
    • Загрузка и размещение файлов локально
      • Существуют два разных варианта: устаревшие и последние . Сами имена самоописательны. legacy имеет версию меньше 1.2.x, а последняя версия 1.6.x.
      • Мы также можем работать с мини-версией, несжатой или в zip архиве.
    • Доступ к CDN - у вас также есть доступ к CDN. CDN предоставит вам доступ во всем мире к региональным дата-центрам, которые в этом случае будут размещены в Google. Это означает, что использование CDN переносит ответственность за размещение файлов с ваших собственных серверов на ряд внешних. Это также дает преимущество в том, что если посетитель вашей веб-страницы уже загрузил копию AngularJS из того же CDN, ее не нужно повторно загружать.
    • Bower - используйте этот менеджер пакетов
    • npm - или используйте этот менеджер пакетов
    AngularJS - настройка среды
  • Download Angular - Нажмите эту кнопку, чтобы загрузить версию Angular JS. Эта версия очень быстрая, мобильная и гибкая по сравнению с предыдущими версиями AngularJS. В дальнейших статьях будем используем CDN-версии библиотеки.

ПРИМЕЧАНИЕ! Если вы захотите скачать AngularJS, то нажмите правой кнопкой мыши на кнопку Download и в контекстном меню выберите "сохранить ссылку как..", иначе библиотека откроется во вкладке в виде исходного кода. По крайней мере при подготовке этой статьи со мной так произошло в браузере Google Chrome.

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

Пример

Теперь напишем простой пример, используя библиотеку 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>

Внимание!!!

Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!

Opera

Свободу АНГУЛЯРУ в Opera!!! )))

Google Chrome

Свободу АНГУЛЯРУ в Google Chrome!!! )))

Mozilla Firefox

Свободу АНГУЛЯРУ в Mozilla Firefox!!! )))

Yandex

Свободу АНГУЛЯРУ в Yandex!!! )))

Подключение AngularJS

Мы включили файл JavaScript AngularJS на странице HTML, чтобы мы могли использовать AngularJS -
<head>
   <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
< /head>

Если вы хотите обновить последнюю версию Angular JS, используйте следующий источник скрипта или проверьте последнюю версию AngularJS на своем официальном сайте.

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

Укажите приложение 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 записывает значение «model» с именем helloTo.title в HTML в этом месте.

Контроллер

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

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

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

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

Выполнение

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

Welcome AngularJS to the world of Tutorialspoint!

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

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

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok