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

: AngularJS; 30 июля 2018; 04 февраля 2019; Просмотров: 1971

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

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

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

Загрузить AngularJS - нажмите эту кнопку, появится экран, как показано ниже -
Этот экран дает различные варианты использования Angular JS следующим образом:

Загрузка и размещение файлов локально

Существуют два разных варианта: устаревшие и последние . Сами имена самоописательны. legacy имеет версию меньше 1.2.x, а последняя версия 1.6.x.
Мы также можем работать с мини-версией, несжатой или в zip архиве.

Доступ к CDN - у вас также есть доступ к CDN. CDN предоставит вам доступ во всем мире к региональным дата-центрам, которые в этом случае будут размещены в Google. Это означает, что использование CDN переносит ответственность за размещение файлов с ваших собственных серверов на ряд внешних. Это также дает преимущество в том, что если посетитель вашей веб-страницы уже загрузил копию AngularJS из того же CDN, ее не нужно повторно загружать.
Bower - используйте этот менеджер пакетов
npm - или используйте этот менеджер пакетов

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

Google Chrome

Mozilla Firefox

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 выполняет функции контроллера. Затем он отображает представления с данными из модели, заполненной контроллером. Страница готова.

Tags: web, AngularJS

Компьютерапия