Menu

Tvorba jednostránkových aplikácií pomocou AngularJS (návod s príkladom)

  • Hlavná
  • Iné
  • Tvorba jednostránkových aplikácií pomocou AngularJS (návod s príkladom)

build single page application using angularjs

Vyskúšajte Náš Nástroj Na Odstránenie Problémov

Vytvorte jednostránkové aplikačné SPA pomocou AngularJS:

Všetko, čo potrebujeme vedieť o AngularJS bolo vysvetlené v našom predchádzajúcom návode. V tomto tutoriáli sa dozvieme viac o vývoji jednostránkovej aplikácie pomocou AngularJS.

Viete o Netflixe? Už ste niekedy navštívili jej webovú stránku?

Ak je vaša odpoveď kladná, viete, ako vyzerá jednostránková aplikácia! Preskúmajte naše Kompletný sprievodca po AngularJS získať jasnú znalosť AngularJS.

Jednostránková aplikácia využívajúca AngularJS

Dovoľte mi to rozpracovať!

Netflix používa AngularJS vo svojom rámci na strane klienta na obohatenie používateľských funkcií vo svojich webových aplikáciách.

Svoje používateľské rozhranie veľmi zjednodušili tým, že ho spravili SPA (Jednostránková aplikácia). To znamená, že navigácia v rámci Netflixu sa vykonáva bez obnovenia celej stránky.

Čo sa dozviete:

Výhody jednostránkových aplikácií

Nižšie uvádzame niekoľko výhod jednostránkových aplikácií.

  • Vylepšená používateľská skúsenosť.
  • Webové stránky sa obnovujú rýchlejšie, pretože sa využíva menšia šírka pásma.
  • Nasadenie aplikácie - index.html, balíka CSS a balíka javascript - do výroby je jednoduchšie.
  • Rozdelenie kódu je možné vykonať tak, že sa zväzky rozdelia na viac častí.

Prečo vyvíjať SPA pomocou AngularJS?

V dnešnej dobe je na trhu k dispozícii veľa javascriptových aplikácií, ako ember.js, backbone.js atď. Mnoho webových aplikácií však aj tak začleňuje do svojho vývoja AngularJS na vytváranie SPA.

Ďalej uvádzame niekoľko dôvodov, prečo je AngularJS jasným víťazom:

# 1) Nezávislosti

Na rozdiel od AngularJS má backbone.js závislosti na underscore.js a jQuery. Zatiaľ čo ember JS má závislosti na riadidlách a jQuery.

ako písať automatizované testovacie prípady

# 2) Smerovanie

Navigácia medzi webovými stránkami vytvorenými pomocou AngularJS je veľmi jednoduchá v porovnaní s tými, ktoré sú vytvorené pomocou iných rámcov javascript. Direktívy použité v AngularJS sú ľahké, a preto sú metriky výkonu AngularJS pozoruhodné.

# 3) Testovanie

Po vytvorení aplikácie pomocou AngularJS by bolo možné vykonať automatizované testovanie na zabezpečenie kvality pomocou selénu. Toto je jedna z úžasných funkcií aplikácií vytvorených pomocou vývoja AngularJS.

funkcie angularJS

(zdroj obrázkov edureka.co)

# 4) Väzba údajov

AngularJS podporuje obojsmerné viazanie údajov, t. J. Pri každej aktualizácii modelu sa aktualizuje aj pohľad, pretože AngularJS sleduje architektúru MVC.

Údaje teda môže používateľ zobraziť na základe svojich preferencií.

# 5) Podpora prehľadávača

AngularJS je podporovaný vo väčšine prehliadačov vrátane IE verzie 9 a vyššej. Môže sa prispôsobiť práci aj na mobiloch, tabletoch a laptopoch.

# 6) Agilita

AngularJS podporuje agilitu, čo znamená, že dokáže uspokojiť nové požiadavky firiem, keď prídu do konkurenčného pracovného prostredia. Na obsluhu týchto požiadaviek je možné implementovať radiče do architektúry MVC.

V AngularJS je asi 30 000 modulov, ktoré sú ľahko dostupné pre rýchly vývoj aplikácií. Ak chce vývojár prispôsobiť existujúcu aplikáciu, môže použiť moduly, ktoré sú už k dispozícii, a vylepšiť kód namiesto toho, aby vytvoril celú aplikáciu úplne od začiatku.

Počet prispievateľov a odborníkov v AngularJS je navyše veľa, a preto by ste dostali rýchle odpovede na akékoľvek otázky, ktoré zverejníte na diskusných fórach.

Ako vyvinúť jednostránkovú aplikáciu pomocou AngularJS?

Nižšie sú uvedené rôzne kroky týkajúce sa vývoja SPA pomocou AngularJS.

Krok 1: Vytvorte modul

Všetci vieme, že AngularJS sleduje architektúru MVC. Preto každá aplikácia AngularJS obsahuje modul pozostávajúci z radičov, služieb atď.

var app = angular.module('myApp', ());

Krok 2: Definujte jednoduchý ovládač

app.controller('FirstController', function($scope) { $scope.message = 'Hello from FirstController'; });

Krok 3: Zahrňte skript AngularJS do kódu HTML

Zadajte modul (vytvorený v kroku 1) v ng-app atribút a kontrolór (definovaný v kroku 2) v ng-radič atribút.

{{message}}

First Second Third

(Keď Angular zistí šablóny definované smernicami ng-template, načíta ich obsah do medzipamäte šablón a nevykoná požiadavku Ajaxu na získanie ich obsahu.)

Po spustení kódu HTML na serveri localhost sa zobrazí nasledujúca stránka.

prvá webová stránka

Všimnite si, že hypertextové odkazy Prvý druhý tretí na stránke sú smerovače a keď na ne kliknete, dôjde k navigácii na príslušné webové stránky bez obnovenia.

druhá webová stránka

Tretia webová stránka

To je všetko! Dúfam, že by ste mohli vytvoriť jednoduché SPA, ako to demonštruje tento blog. Po úspešnom získaní výstupu môžete vyskúšať komplexné SPA na rovnakých riadkoch.

Záver

Jednostránkové aplikácie sú v dnešnej dobe veľmi populárne, pričom sa pre ne rozhodli značky ako Netflix.

Ak vyvíjate SPA, potom je AngularJS jasnou voľbou. Nová verzia AngularJS, teda Angular, však ponúka viac funkcií. Okrem toho existujú rôzne technológie, ako je vývoj aplikácií Node JS atď.

Zostaňte naladení na náš nadchádzajúci tutoriál a preskúmajte informácie o aktualizácii uhlovej verzie!

Výukový program PREV | NEXT Tutorial

Odporúčané čítanie

^