AngularJS Hello World: Вашият първи примерен програмен продукт

по: Джеймс Хартман Джеймс Хартман
Hours Обновено

⚡ Умно обобщение

Програмите AngularJS Hello World се нуждаят само от един HTML файл, една препратка към скрипт и две директиви, ng-app и ng-controller, за да обвържат променлива от обхвата на контролера със страницата чрез израз с двойни скоби.

  • 🔘 ng-приложение: Атрибутът ng-app маркира коренния елемент и автоматично зарежда посочения AngularJS модул.
  • ☑️ ng-контролер: ng-controller прикачва HelloWorldCtrl към елемента h1, правейки обхвата на контролера достъпен там.
  • ✅ Обвързване на обхвата: Присвояването на $scope.message вътре в контролера захранва израза {{message}}, рендиран в изгледа.
  • 🧪 Един файл: Един HTML файл плюс една препратка към скрипт изпълнява примера, без да е необходима стъпка за изграждане.
  • 🛠️ Отстраняване на неизправности: Буквалните скоби на екрана почти винаги означават, че библиотеката никога не е заредена или ng-app липсва.
  • 📊 Бележка към версията: Поддръжката на AngularJS приключи през януари 2022 г., като 1.8.3 беше финалната версия; новата работа принадлежи на Angular.
Прочетете повече

AngularJS Hello World, първата примерна програма, използваща ng-app и ng-controller

Най-добрият начин да видите силата на AngularJS приложение е да създадете първото си основно приложение „Hello World“ в AngularJS.

Има много интегрирани среди за разработка, които можете да използвате за AngularJS разработка, някои от популярните са споменати по-долу. В нашия пример използваме Webstorm като нашата IDE.

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio

Здравей свят, AngularJS

Бележка към версията: AngularJS 1.x напусна дългосрочната поддръжка на 31 декември 2021 г. и екипът на рамката потвърждава това. Поддръжката на AngularJS официално приключи през януари 2022 г., с версия 1.8.3 като финалната версия и без никакви корекции за сигурност след нея. Всяка стъпка и блок от код по-долу са запазени точно както са написани. Новите проекти принадлежат на съвременния Angular, където същото упражнение започва с ng serve и самостоятелен компонент и все още използва същото {{ }} синтаксис на интерполацията.

Примерът по-долу показва най-лесния начин да създадете първото си приложение „Hello world“ в AngularJS.

Анотираната екранна снимка по-долу обозначава всяка част от този файл, а седемте му номера съответстват на Code Списък с обяснения по-долу. Заснет е спрямо по-ранна версия 1.4.0, така че неговият скрипт се различава от версията, закачена в кода.

Анотиран HTML файл на AngularJS Hello World със седем номерирани извиквания за ng-app, ng-controller, препратката към скрипта и променливата за обхват

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

Code Обяснение:

  1. "ng-приложениеКлючовата дума „“ се използва, за да обозначи, че това приложение трябва да се счита за AngularJS приложение. На това приложение може да се даде произволно име.
  2. Контролерът е това, което се използва за съхраняване на бизнес логиката. В тага h1 искаме да осъществим достъп до регулатор, което ще има логиката да показва „Hello World“, така че можем да кажем, че в този таг искаме да осъществим достъп до контролера с име „HelloWorldCtrl“.
  3. Ние използваме членска променлива, наречена „message“, която не е нищо друго освен контейнер за показване на съобщението „Hello World“.
  4. „Тагът script“ се използва за препращане към скрипта angular.js, който има цялата необходима функционалност за AngularJS. Без тази препратка, ако се опитаме да използваме някоя от функциите на AngularJS, те няма да работят.
  5. „Контролер“ е мястото, където всъщност създаваме нашата бизнес логика, която е нашият контролер. Спецификата на всяка ключова дума ще бъде обяснена в следващите глави. Важно е да се отбележи, че дефинираме метод на контролер, наречен „HelloWorldCtrl“, който е посочен в стъпка 2.
  6. Създаваме „функция“, която ще бъде извикана, когато нашият код извика този контролер. Обектът $scope е специален обект в AngularJS, който е глобален обект, използван в AngularJS. Обектът $scope се използва за управление на данните между контролера и изгледа.
  7. Създаваме членска променлива, наречена „message“, присвояваме ѝ стойността „Hello World“ и прикрепяме членската променлива към обекта на scope.

ЗАБЕЛЕЖКА: Директивата ng-controller е ключова дума, дефинирана в AngularJS (Стъпка 2) и се използва за дефиниране на контролери във вашето приложение. Тук, в нашето приложение, използвахме ключовата дума ng-controller, за да дефинираме контролер с име „HelloWorldCtrl“. Самата логика за контролера ще бъде създадена в (Стъпка 5).

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Изход:

Ще се покаже съобщението „Hello World“.

Прозорец на браузъра, озаглавен Guru99 рендиране на заглавието „Hello World“ от променливата на обхвата на AngularJS

Как да заредите AngularJS: CDN или локален файл

Горният пример работи, защото един ред издърпва рамката в страницата, преди браузърът да достигне края на тялото. AngularJS се доставя като единичен JavaСкрипт файл, така че първата програма не се нуждае от стъпка за изграждане и няма мениджър на пакети. Достатъчен е обикновен HTML файл, отворен в браузър.

Има два начина да внесете този файл.

  1. Позоваване на копие от CDN. Примерът сочи към code.angularjs.org и поддържа версия 1.6.9. Този хост все още обслужва 1.x компилации, като най-високата е 1.8.2, докато Google Хостваните библиотеки вече не изброяват AngularJS.
  2. Изтеглете локално копие. Запазете файла до HTML страницата и насочете тага на скрипта към него. Локалното копие поддържа примера работещ офлайн, което е важно, когато прокси сървър блокира CDN.
<!-- Option 1: reference a CDN copy -->
<script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>

<!-- Option 2: reference a downloaded copy in the same folder -->
<script src="angular.min.js"></script>

употреба angular.js докато уча и angular.min.js в производство: неминифицираната компилация отпечатва четлив стек traces, докато минифицираната компилация отчита преименувани променливи.

След като файлът е зареден, ng-app стартира рамката. AngularJS търси този атрибут, когато документът приключи със зареждането, третира елемента, който го носи, като корен на компилацията и стартира модула, посочен в неговата стойност. Следват три последствия:

  • Само първият ng-app на страница се стартира автоматично. Втората се игнорира, освен ако angular.bootstrap се извиква ръчно.
  • Стойността трябва да назовава модул, регистриран с ъглов.модул, в противен случай конзолата докладва [$injector:modulerr].
  • Поставяне ng-app на html Елементът , както е в примера, поставя целия документ под AngularJS; по-тесен контейнер също е подходящ.

СВЪРЗАНИ СТАТИИ

Как работят {{ }} изразите и обвързването с ng-модел

Двойните скоби около message в тага h1 не са заместител, който се попълва веднъж по време на зареждане. AngularJS компилира този текстов възел в наблюдател на околния обхват, така че рендираният изход tracks $scope.message докато страницата е жива.

Цикълът протича на три стъпки.

  1. Контролерът записва стойност върху $scope.
  2. Дайджест пасът сравнява всеки наблюдаван израз с предишния му резултат.
  3. Всеки израз, чиято стойност се е променила, се рендира на мястото си.

Следователно интерполираният израз е еднопосочен, от обхвата към изгледа. Двупосочното свързване изисква ng-модел- Директива предназначени за контроли на формуляри. Добавяне <input ng-model="message"> до заглавието, въведете текст в полето и заглавието се променя с всяко натискане на клавиш, защото ng-model записва стойността на полето обратно в същото свойство на обхвата, което изразът наблюдава.

Изразите са умишлено ограничени. Те четат свойствата на обхвата, извикват методи за обхват и толерират недефинирани стойности безшумно, но не могат да декларират променливи, да използват оператори за управление на потока или да достигат до глобални обекти като window.

Как да поправите празна страница или нерендерирана {{ }}

Първа AngularJS програма се проваля по един от два видими начина: страницата остава празна или буквалният текст {{message}} се появява там, където трябва да бъде Hello World. И двете означават, че рамката никога не е поемала маркировката. Изпълнете проверките по-долу по ред, с отворена конзола на браузъра.

  1. Потвърдете зареждането на библиотеката. Отворете панела „Мрежа“ и потърсете angular.js заявка. Код 404 или недостъпна CDN мрежа оставя скобите на екрана недокоснати.
  2. Проверете пътя на скрипта. Относителният път се разрешава спрямо папката, съдържаща HTML файла, така че копие в js нуждите на подпапката js/angular.min.js.
  3. Проверете ng-приложението. Липсващ или неправилно изписан атрибут не означава нищо за bootstraps. Атрибутът се слага с тирета като ng-app в маркирането, въпреки че директивата е с камилски регистър (camel case) в JavaСценарий.
  4. Прочетете грешката в конзолата. [$injector:modulerr] означава, че модулът, посочен от ng-app, никога не е бил регистриран. [ng:areq] обикновено означава, че името на контролера в маркировката не съвпада с името, предадено на .controller().
  5. Потърсете второ ng-приложение. Само първият е bootstrap-вант, така че оставено на вътрешен елемент копие тихомълком деактивира тази част от страницата.

Две допълнителни причини обясняват повечето от останалите доклади.

  • Файловият протокол. Този пример с един файл работи добре, когато се отваря директно от диск, но всеки шаблон, извлечен през XHR, е блокиран от правилата за произход на браузъра. Обслужвайте папката през HTTP, след като се появят шаблоните.
  • Кратък проблясък на брекети. Когато маркирането се рендира преди рамката да го компилира, суровият израз е видим за момент. ng-cloak към елемента или заменете израза с ng-bind="message", който никога не показва собствена маркировка.

Ако нито едно от тези неща не е приложимо, съкратете страницата до горния пример и добавете свой собствен код ред по ред.

Въпроси и Отговори

Всяко от четирите изброени по-горе работи и този пример използва WebstormТъй като програмата е един статичен HTML файл, е достатъчен обикновен текстов редактор. IDE добавя само довършване на директиви, презареждане на живо и интегрирано отстраняване на грешки.

$scope е свързващият обект, споделен между a регулатор и неговия изглед. Записването на $scope.message вътре в HelloWorldCtrl прави това свойство видимо за израза, поставен върху елемента h1.

И двата файла съдържат една и съща рамка. angular.js е неминифициран, така че грешките сочат към четлив изходен код. angular.min.js е компресиран за производство и се нуждае от изрична анотация на зависимости, защото минифицирането преименува имената на параметрите, които AngularJS иначе проверява.

AngularJS е 1.x рамката, показана тук, управлявана от директиви, $scope и plain. JavaСкрипт. Angular, което означава версия 2 и по-нова, е отделен TypeScript рамка, изградена върху компоненти и е активно поддържаната линия.

Главно за поддържане на съществуващи 1.x приложения, които остават широко разпространени. Речникът на обвързване, директиви и инжектиране на зависимост трансфери, но поддръжката приключи през януари 2022 г., така че новите проекти принадлежат на съвременния Angular.

Да. Регистрирайте всеки един с .controller() на един и същ модул и ги прикачете към различни елементи, използвайки ng-controller. Всеки получава свой собствен дъщерен обхват, така че свойствата с еднакви имена остават независими.

Съвременните асистенти четат кодова база 1.x и създават инвентаризация на директиви, филтри и услуги с предложени еквиваленти на компоненти и услуги. Тази инвентаризация е полезна за scoping работата, въпреки че всяка картаping все още се нуждае от ръчна проверка.

Копилот на GitHub завършва шаблона на контролера, присвояванията на $scope и ng-подаване обработчици от кратък коментар, но обучението му е насочено към съвременния Angular, така че проверете дали предложенията наистина използват синтаксис 1.x.

Обобщете тази публикация с: