В этой главе мы обсудим, как установить библиотеку AngularJS для использования в разработке веб -приложений. Мы также кратко рассмотрим структуру каталогов и ее содержимое.
Когда вы откроете ссылку https://angularjs.org/, вы увидите, что есть два варианта загрузки библиотеки Angularjs:
GitHub Download - нажмите эту кнопку, чтобы перейти в GitHub и получить все последние сценарии.
Скачать - или нажмите эту кнопку, и вы увидите:
Этот экран дает различные варианты использования Angle JS следующим образом:
Скачать и локальные файлы
Есть два разных варианта: старый и последний. Само название самоозначаемое. Старая версия уже ниже, чем версия 1.2.x, а последняя версия 1.3.x.
Мы также можем использовать минимизированные, несжатые или сжатые версии.
Доступ к CDN: вы также можете использовать 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.3.0-beta.17/angular.min.js"> </script> </head> <body ng-App = "myApp" ng-controller = "hellocontroller"> <h2> добро пожаловать {{halloto.title}} в мир yiibai! $ scope.helloto.title = "angularjs"; </script> </body> </html>В следующей главе подробно описывается приведенный выше код:
В том числе angularjs
Мы уже включаем HTML -страницу в файл JavaScript AngularJS, поэтому мы можем использовать AngularJS:
<Head> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </head>
Проверьте последнюю версию AngularJS на его официальном сайте.
Указывать на применение AngularJS
Далее, давайте скажем мне, что часть HTML содержит приложения AngularJS. Это можно сделать, поместив атрибут NG-APP в элемент HTML в корне приложения AngularJS. Это может быть добавлен в элемент HTML или элемент тела следующим образом:
<body ng-app = "myApp"> </body>
вид
Эта часть взгляда:
<div ng-controller = "hellocontroller"> <h2> добро пожаловать {{halloto.title}} в мир yiibai! </h2> </div>NG-Controller рассказывает Angularjs, что такое контроллеры и представления. helloto.title говорит Angularjs написать ценность «модели» HTML под названием Helloto.title в этой позиции.
Контроллер
Часть контроллера:
<script> angular.module ("myApp", []) .controller ("hellocontroller", function ($ scope) {$ scope.helloto = {}; $ scope.helloto.title = "angularjs";}); </script>Этот код сначала регистрирует функцию с именем контроллера модуля MyApp Angle в HelloController. Мы узнаем больше о модулях и контроллерах в их соответствующих главах. Функция контроллера зарегистрирована под углом через Angular.Module (...). Контроллер (...) Функциональный вызов.
Модель параметров применения $ передана функции контроллера. Функция контроллера добавляет объект JavaScript от halloto, в котором добавлен поле заголовка.
осуществлять
Сохраните вышеуказанный код как myFirStExample.htmlll Откройте его в любом браузере. Вы увидите следующий вывод:
Когда страница загружается в браузер, происходит следующее событие:
Документы HTML загружаются в браузер и рассчитываются браузером. Angularjs JavaScript загружается, и глобальные объекты угла создаются. Далее выполняется функция контроллера регистрации в JavaScript.
Angularjs сканирует через HTML, чтобы найти приложения и представления AngularJS. Как только представление будет найдено, он подключает представление к соответствующей функции контроллера.
Далее, AngularJS выполняет функцию управления. Затем он отображает представление данных с заполненной моделью контроллера. Страница теперь готова.