Meni

Zgradite aplikacijo za eno stran z uporabo AngularJS (Vadnica s primerom)

  • Glavni
  • Drugo
  • Zgradite aplikacijo za eno stran z uporabo AngularJS (Vadnica s primerom)

build single page application using angularjs

Preizkusite Naš Instrument Za Odpravo Težav

Zgradite SPA za eno stran z uporabo AngularJS:

Vse, kar moramo vedeti o AngularJS je bilo razloženo v naši prejšnji vadnici. V tej vadnici bomo spoznali več o razvoju enostranske aplikacije z uporabo AngularJS.

Ali poznate Netflix? Ste že kdaj obiskali njegovo spletno stran?

Če je vaš odgovor 'Da', potem veste, kako izgleda aplikacija na eni strani! Raziščite našo Popoln vodnik po AngularJS da dobite jasno znanje o AngularJS.

Enostranska aplikacija z uporabo AngularJS

Naj pojasnim!

Netflix uporablja AngularJS v svojem odjemalskem okviru za obogatitev uporabniških funkcij v svojih spletnih aplikacijah.

Svoj uporabniški vmesnik so zelo poenostavili, tako da so ga SPA (Prijava na eno stran). To pomeni, da se krmarjenje po Netflixu izvaja brez osveževanja celotne strani.

Kaj se boste naučili:

Prednosti aplikacij na eni strani

Spodaj je nekaj prednosti aplikacij na eni strani.

  • Izboljšana uporabniška izkušnja.
  • Spletne strani se hitreje osvežijo, ker se porabi manj pasovne širine.
  • Uvajanje aplikacije - index.html, svežnja CSS in svežnja javascript - v proizvodnji postane enostavnejše.
  • Razdelitev kode se lahko izvede za razdelitev snopov na več delov.

Zakaj razviti SPA s pomočjo AngularJS?

Dandanes je na trgu na voljo veliko aplikacij javascript, kot so ember.js, backbone.js itd. Toda vseeno veliko spletnih aplikacij vključuje AngularJS v svoj razvoj za ustvarjanje SPA-jev.

Spodaj je nekaj razlogov, zakaj je AngularJS očitni zmagovalec:

# 1) Ne odvisnosti

Za razliko od AngularJS je backbone.js odvisen od underscore.js in jQuery. Medtem ko je ember JS odvisen od krmila in jQueryja.

nadaljevanje ročnega testiranja za 3-letne izkušnje

# 2) Usmerjanje

Navigacija med spletnimi stranmi, zgrajenimi z uporabo AngularJS, je zelo enostavna v primerjavi s tistimi, ki so zgrajene z drugimi okviri javascript. Direktive, ki se uporabljajo v AngularJS, so lahke, zato so metrike zmogljivosti AngularJS občutne.

# 3) Testiranje

Ko je aplikacija izdelana z uporabo AngularJS, se lahko izvede avtomatsko preskušanje za zagotavljanje kakovosti s pomočjo selena. To je ena izmed izjemnih lastnosti aplikacij, zgrajenih z uporabo programa AngularJS.

angularJS funkcije

(vir slike edureka.co)

# 4) Vezava podatkov

AngularJS podpira dvosmerno vezavo podatkov, tj. Vsakič, ko se model posodobi, se pogled tudi posodobi, saj AngularJS sledi arhitekturi MVC.

Tako lahko uporabnik podatke vidi na podlagi svojih želja.

# 5) Podpora za brskalnik

AngularJS je podprt v večini brskalnikov, vključno z različico IE 9 in novejšo. Lahko se prilagodi tudi na mobilne telefone, tablice in prenosnike.

# 6) okretnost

AngularJS podpira okretnost, kar pomeni, da lahko poskrbi za nove zahteve podjetij, ko in ko pridejo v konkurenčna delovna okolja. Za servisiranje teh zahtev je mogoče krmilnike implementirati v arhitekturo MVC.

V AngularJS je približno 30000 modulov, ki so na voljo za hiter razvoj aplikacij. Ko želi razvijalec prilagoditi obstoječo aplikacijo, lahko uporabi že razpoložljive module in potegne kodo, namesto da bi celotno aplikacijo zgradil iz nič.

Poleg tega je veliko sodelavcev in strokovnjakov v AngularJS, zato boste dobili hitre odgovore na vsa vprašanja, ki jih objavite na forumih za razprave.

Kako razviti aplikacijo za eno stran s pomočjo AngularJS?

Spodaj so navedeni različni koraki pri razvoju SPA s pomočjo AngularJS.

Korak 1: Ustvari modul

Vsi vemo, da AngularJS sledi arhitekturi MVC. Zato vsaka aplikacija AngularJS vsebuje modul, sestavljen iz krmilnikov, storitev itd.

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

2. korak: Določite preprost krmilnik

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

3. korak: V kodo HTML vključite skript AngularJS

Določite modul (ustvarjen v koraku 1) v ng-app atribut in krmilnik (opredeljen v koraku 2) v krmilnik ng atribut.

{{message}}

First Second Third

(Ko Angular zazna predloge, določene z direktivami ng-template, bo naložil svojo vsebino v predpomnilnik predloge in ne bo izvedel zahteve Ajax za pridobitev njihove vsebine.)

Ko se HTML zažene na localhost, se prikaže naslednja stran.

prva spletna stran

Upoštevajte, da hiperpovezave Prvi drugi tretji na strani so usmerjevalniki in ko jih kliknete, pride do navigacije do ustreznih spletnih strani, ne da bi se osvežili.

druga spletna stran

Tretja spletna stran

To je to! Upam, da boste lahko ustvarili preprost SPA, kot je prikazano v tem blogu. Ko rezultat uspešno dobite, lahko v istih vrsticah preizkusite zapletene SPA.

Zaključek

Aplikacije z eno stranjo so danes zelo priljubljene, saj se blagovne znamke, kot je Netflix, odločajo zanje.

Če razvijate SPA, je AngularJS očitna izbira. Vendar nova različica AngularJS, tj. Angular ponuja več funkcij. Obstajajo tudi različne tehnologije, kot je razvoj aplikacij Node JS itd.

Spremljajte našo prihajajočo vadnico, če želite raziskati nadgradnjo kotne različice!

PREV Vadnica | NASLEDNJA Vadnica

Priporočeno branje

^