AngularJS Hello World: Váš první ukázkový program

Od: James Hartman James Hartman
Hours aktualizováno

⚡ Chytré shrnutí

Programy AngularJS Hello World potřebují pouze jeden HTML soubor, jeden odkaz na skript a dvě direktivy, ng-app a ng-controller, k navázání proměnné rozsahu kontroleru na stránku pomocí výrazu s dvojitou závorkou.

  • 🔘 ng-aplikace: Atribut ng-app označuje kořenový element a automaticky nabootuje pojmenovaný modul AngularJS.
  • ☑️ ng-kontrolér: ng-controller připojí HelloWorldCtrl k elementu h1, čímž zpřístupní rozsah kontroleru.
  • (Tj. Vazba rozsahu: Přiřazení $scope.message uvnitř kontroleru předá výraz {{message}} vykreslený v zobrazení.
  • 🧪 Jeden soubor: Příklad se spouští pomocí jednoho HTML souboru a jednoho odkazu na skript, aniž by byl vyžadován krok sestavení.
  • 🛠️ Řešení problémů: Doslovné závorky na obrazovce téměř vždy znamenají, že se knihovna nikdy nenačetla nebo že chybí ng-app.
  • 📊 Poznámka k verzi: Podpora AngularJS skončila v lednu 2022, finální verzí byla 1.8.3; nová práce patří do Angularu.
Přečíst více

První ukázkový program AngularJS Hello World využívající ng-app a ng-controller

Nejlepším způsobem, jak vidět sílu aplikace AngularJS, je vytvořit si v AngularJS svou první základní aplikaci s názvem „Hello World“.

Existuje mnoho integrovaných vývojových prostředí, která můžete použít pro AngularJS vývoj, některé z populárních jsou uvedeny níže. V našem příkladu používáme Webstorm jako naše IDE.

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

Ahoj světe, AngularJS

Poznámka k verzi: AngularJS 1.x ukončil dlouhodobou podporu k 31. prosinci 2021 a tým frameworku to potvrzuje. Podpora AngularJS oficiálně ukončena v lednu 2022, s finální verzí 1.8.3 a bez dalších bezpečnostních záplat. Každý krok a blok kódu níže je zachován přesně tak, jak je napsán. Nové projekty patří do moderního Angularu, kde stejné cvičení začíná s ng serve a samostatná komponenta a stále používá totéž {{ }} syntaxe interpolace.

Níže uvedený příklad ukazuje nejjednodušší způsob, jak vytvořit svou první aplikaci „Hello world“ v AngularJS.

Níže uvedený snímek obrazovky s anotací označuje každou část daného souboru a jejích sedm čísel odpovídá Code Seznam vysvětlení níže. Byl zachycen v rámci dřívější verze 1.4.0, takže jeho skript se liší od verze uvedené v kódu.

Anotovaný HTML soubor AngularJS Hello World se sedmi očíslovanými popisy pro ng-app, ng-controller, referenci skriptu a proměnnou scope.

<!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 Vysvětlení:

  1. "ng-appKlíčové slovo „“ se používá k označení, že tato aplikace by měla být považována za aplikaci AngularJS. Této aplikaci lze dát libovolný název.
  2. Kontroler je to, co se používá k uchovávání obchodní logiky. V tagu h1 chceme přistupovat k kontrolor, který bude mít logiku pro zobrazení „Hello World“, takže můžeme říct, že v tomto tagu chceme přistupovat k kontroleru s názvem „HelloWorldCtrl“.
  3. Používáme členskou proměnnou nazvanou „zpráva“, která není ničím jiným než zástupným symbolem pro zobrazení zprávy „Ahoj světe“.
  4. Značka „script“ se používá k odkazování na skript angular.js, který má všechny potřebné funkce pro AngularJS. Bez této reference, pokud se pokusíme použít jakékoli funkce AngularJS, nebudou fungovat.
  5. „Controller“ je místo, kde ve skutečnosti vytváříme naši obchodní logiku, tedy náš controller. Specifika každého klíčového slova budou vysvětlena v následujících kapitolách. Důležité je poznamenat, že definujeme metodu controlleru s názvem „HelloWorldCtrl“, na kterou se odkazuje v kroku 2.
  6. Vytváříme „funkci“, která bude volána, když náš kód zavolá tento kontroleru. Objekt $scope je speciální objekt v AngularJS, což je globální objekt používaný v AngularJS. Objekt $scope se používá ke správě dat mezi kontrolerem a zobrazením.
  7. Vytváříme členskou proměnnou s názvem „message“, přiřazujeme jí hodnotu „Hello World“ a připojujeme členskou proměnnou k objektu scope.

POZNÁMKA: Direktiva ng-controller je klíčové slovo definované v AngularJS (Krok 2) a používá se k definování kontrolérů ve vaší aplikaci. V naší aplikaci jsme pomocí klíčového slova ng-controller definovali kontrolér s názvem „HelloWorldCtrl“. Samotná logika pro kontrolér bude vytvořena v (Kroku 5).

Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Zobrazí se zpráva 'Hello World'.

Okno prohlížeče s názvem Guru99 vykreslování nadpisu Hello World z proměnné rozsahu AngularJS

Jak načíst AngularJS: CDN nebo lokální soubor

Výše uvedený příklad funguje, protože jeden řádek vtáhne framework do stránky ještě předtím, než prohlížeč dosáhne konce těla kódu. AngularJS se dodává jako jeden JavaSoubor skriptu, takže první program nepotřebuje žádný krok sestavení ani správce balíčků. Stačí obyčejný soubor HTML otevřený v prohlížeči.

Existují dva způsoby, jak ten soubor přenést.

  1. Odkaz na kopii CDN. Příklad ukazuje na code.angularjs.org a používá verzi 1.6.9. Tento hosting stále nabízí buildy 1.x, přičemž nejvyšší je 1.8.2, zatímco Google Hostované knihovny již neuvádějí AngularJS.
  2. Stáhněte si lokální kopii. Uložte soubor vedle HTML stránky a nasměrujte na něj tag skriptu. Lokální kopie udržuje příklad v provozu offline, což je důležité, když proxy blokuje 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>

Použijte angular.js při učení a angular.min.js v produkčním prostředí: neminifikovaná sestava vytiskne čitelný zásobník traces, zatímco minifikované sestavení hlásí přejmenované proměnné.

Jakmile je soubor načten, ng-app spustí framework. AngularJS vyhledá tento atribut po dokončení načítání dokumentu, považuje prvek, který jej obsahuje, za kořen kompilace a nabootuje modul uvedený v jeho hodnotě. Z toho plynou tři důsledky:

  • Pouze první ng-app na stránce se automaticky zavede. Druhý se ignoruje, pokud angular.bootstrap se volá ručně.
  • Hodnota musí pojmenovat modul registrovaný u angular.module, jinak konzole hlásí [$injector:modulerr].
  • Umístění ng-app na html Element, jak je uvedeno v příkladu, přesune celý dokument pod AngularJS; užší kontejner také funguje.

SOUVISEJÍCÍ ČLÁNKY

Jak fungují výrazy {{ }} a vazba ng-modelu

Dvojité rovnátka kolem message v tagu h1 nejsou zástupným symbolem, který se vyplní jednou při načítání. AngularJS zkompiluje tento textový uzel do watcheru na okolním rozsah, takže vykreslený výstup tracks $scope.message dokud stránka žije.

Cyklus probíhá ve třech krocích.

  1. Řídicí jednotka zapíše hodnotu na $scope.
  2. Souhrnný průchod (Digest Pass) porovnává každý sledovaný výraz s jeho předchozím výsledkem.
  3. Každý výraz, jehož hodnota se změnila, se znovu vykreslí na místě.

Interpolovaný výraz je proto jednosměrný, z oboru platnosti do zobrazení. Obousměrná vazba vyžaduje ng-modelse Směrnice určené pro ovládací prvky formuláře. Přidat <input ng-model="message"> Vedle záhlaví zadejte do pole text a záhlaví se změní s každým stisknutím klávesy, protože ng-model zapíše hodnotu pole zpět do stejné vlastnosti rozsahu, kterou výraz sleduje.

Výrazy jsou záměrně omezeny. Čtou vlastnosti rozsahu platnosti, volají metody rozsahu platnosti a tiše tolerují nedefinované hodnoty, ale nemohou deklarovat proměnné, používat příkazy control flow ani dosahovat globálních objektů, jako například window.

Jak opravit prázdnou stránku nebo nevykreslený {{ }}

První program v AngularJS selže jedním ze dvou viditelných způsobů: stránka zůstane prázdná nebo se zobrazí doslovný text. {{message}} se zobrazí tam, kde by mělo být Hello World. Obojí znamená, že framework nikdy nepřevzal kód. Proveďte níže uvedené kontroly v daném pořadí s otevřenou konzolí prohlížeče.

  1. Potvrďte načtení knihovny. Otevřete panel Síť a vyhledejte angular.js požadavek. Chyba 404 nebo nedostupná CDN ponechá závorky na obrazovce nedotčené.
  2. Zkontrolujte cestu skriptu. Relativní cesta se rozpoznává ve složce, která obsahuje soubor HTML, takže kopie v js potřeby podsložky js/angular.min.js.
  3. Ověřte aplikaci ng. Chybějící nebo chybně napsaný atribut neznamená nic pro bootstrapy. Atribut je rozdělen pomlčkou jako ng-app v markupu, i když je direktiva v něm uvedena ve velkém formátu (camel case) JavaSkript.
  4. Přečtěte si chybu konzole. [$injector:modulerr] znamená, že modul pojmenovaný ng-app nebyl nikdy zaregistrován. [ng:areq] obvykle znamená, že název kontroleru v kódu neodpovídá názvu předanému .controller().
  5. Hledejte druhou ng-app. Pouze první je bootstrapovaný, takže volná kopie ponechaná na vnitřním elementu tiše deaktivuje danou část stránky.

Většinu zbývajících zpráv vysvětlují dvě další příčiny.

  • Protokol souboru. Tento příklad s jedním souborem běží bez problémů při přímém otevření z disku, ale jakákoli šablona načtená přes XHR je blokována pravidly prohlížeče. Jakmile se šablony zobrazí, složku obsloužíte přes HTTP.
  • Krátký záblesk rovnátka. Když se kód vykreslí předtím, než ho framework zkompiluje, je nezpracovaný výraz na chvíli viditelný. ng-cloak k prvku nebo zaměnit výraz za ng-bind="message", který nikdy nezobrazuje vlastní značky.

Pokud se nic z toho netýká, zredukujte stránku na výše uvedený příklad a postupně přidávejte vlastní kód.

Nejčastější dotazy

Kterýkoli ze čtyř výše uvedených funguje a tento příklad používá WebstormProtože se jedná o jeden statický HTML soubor, postačí editor prostého textu. IDE přidává pouze doplňování direktiv, živé opětovné načítání a integrované ladění.

$scope je vazebný objekt sdílený mezi kontrolor a jeho zobrazení. Zápisem $scope.message uvnitř HelloWorldCtrl se tato vlastnost stane viditelnou pro výraz umístěný na elementu h1.

Oba soubory obsahují stejný framework. angular.js je neminifikovaný, takže chyby ukazují na čitelný zdrojový kód. angular.min.js je komprimovaný pro produkční prostředí a vyžaduje explicitní anotaci závislostí, protože minifikace přejmenuje názvy parametrů, které AngularJS jinak kontroluje.

AngularJS je zde zobrazený framework verze 1.x, řízený direktivami, $scope a plain. JavaSkript. Angular, tedy verze 2 a novější, je samostatný TypeScript framework postavený na komponentách a je aktivně udržovanou linií.

Hlavně pro údržbu stávajících aplikací verze 1.x, které jsou stále rozšířené. Slovník pojmů vázání, direktiv a injekce závislosti transfery, ale podpora skončila v lednu 2022, takže nové projekty patří do moderního Angularu.

Ano. Každý z nich zaregistrujte pomocí .controller() na stejném modulu a připojte je k různým elementům pomocí ng-controller. Každý z nich má svůj vlastní podřízený rozsah, takže stejně pojmenované vlastnosti zůstávají nezávislé.

Moderní asistenti čtou kódovou základnu verze 1.x a vytvářejí seznam direktiv, filtrů a služeb s navrhovanými ekvivalenty komponent a služeb. Tento seznam je užitečný pro sco.ping práce, ačkoli každá mapaping stále vyžaduje ruční ověření.

GitHub Copilot dokončí standardizovanou verzi řadiče, přiřazení $scope a ng-předložit obslužné rutiny z krátkého komentáře, ale jeho trénování se přiklání k modernímu Angularu, proto zkontrolujte, zda návrhy skutečně používají syntaxi 1.x.

Shrňte tento příspěvek takto: