Ng-include v AngularJS: Kako vključiti datoteko HTML (primer)

Kazalo:

Anonim

HTML privzeto ne omogoča vključevanja odjemalske kode iz drugih datotek. Običajno je dobra praksa v katerem koli programskem jeziku, če distribuirate funkcionalnost med različnimi datotekami za katero koli aplikacijo.

Če bi imeli na primer logiko za številske operacije, bi običajno želeli, da bi bila ta funkcionalnost definirana v eni ločeni datoteki. Nato bi lahko to ločeno datoteko ponovno uporabili v več aplikacijah, tako da samo vključite to datoteko.

To je običajno koncept stavkov Include, ki so na voljo v programskih jezikih, kot sta .Net in Java.

Ta vadnica preučuje druge načine, kako je mogoče datoteke (datoteke, ki vsebujejo zunanjo kodo HTML) vključiti v glavno datoteko HTML.

V tej vadnici boste izvedeli-

  • Stranka vključuje
  • Na strani strežnika je vključeno
  • Kako vključiti datoteko HTML v AngularJS

Stranka vključuje

Eden najpogostejših načinov je vključitev kode HTML prek Javascripta. JavaScript je programski jezik, s katerim lahko sproti upravljamo z vsebino na strani HTML. Zato lahko tudi Javascript vključuje kodo iz drugih datotek.

Spodnji koraki kažejo, kako je to mogoče doseči.

Korak1) Določite datoteko z imenom Sub.html in ji dodajte naslednjo kodo.

To je vključena datoteka

Korak 2) Ustvarite datoteko Sample.html, ki je vaša glavna datoteka aplikacije, in dodajte spodnji delček kode.

Spodaj so navedeni glavni vidiki spodnje kode,

  1. V oznaki telesa je oznaka div, ki ima ID vsebine. Tu bo vstavljena koda iz zunanje datoteke "Sub.html".
  2. Obstaja sklic na skript jquery. JQuery je skriptni jezik, zgrajen na vrhu Javascripta, ki olajša manipulacijo z DOM.
  3. V funkciji Javascript je stavek '$ ("# Content"). Load ("Sub.html");' zaradi česar se koda v datoteki Sub.html vbrizga v oznako div, ki ima id Content.

Na strani strežnika je vključeno

Na strani strežnika so na voljo tudi možnosti za vključitev skupnega dela kode po celotnem spletnem mestu. To se običajno stori za vključitev vsebine v spodnje dele dokumenta HTML.

  1. Glava strani
  2. Noga strani
  3. Navigacijski meni.

Imena spletnih datotek imajo posebne razširitve, da spletni strežnik prepozna Server Side Includes. Običajno jih sprejme spletni strežnik, kot so .shtml, .stm, .shtm, .cgi.

Direktiva, ki se uporablja za vključevanje vsebine, je "vključi direktivo". Primer direktive include je prikazan spodaj;

  • Zgornja direktiva omogoča vključitev vsebine enega dokumenta v drugega.
  • Zgornja koda "virtualni" se uporablja za določanje cilja glede na domenski koren aplikacije.
  • Poleg navideznega parametra obstaja tudi datotečni parameter, ki ga je mogoče uporabiti. Parametri "datoteka" se uporabljajo, kadar je treba določiti pot glede na imenik trenutne datoteke.

Opomba:

Navidezni parameter se uporablja za določitev datoteke (strani HTML, besedilne datoteke, skripta itd.), Ki jo je treba vključiti. Če postopek spletnega strežnika nima dostopa za branje datoteke ali izvajanje skripta, ukaz za vključitev ne bo uspel. "Navidezna" beseda je ključna beseda, ki jo je treba umestiti v direktivo o vključevanju.

Kako vključiti datoteko HTML v AngularJS

Angular ponuja funkcijo za vključitev funkcionalnosti iz drugih datotek AngularJS z uporabo direktive ng-include.

Primarni namen "direktive ng-include" se uporablja za pridobivanje, prevajanje in vključitev zunanjega fragmenta HTML v glavno aplikacijo AngularJS.

Oglejmo si spodnjo osnovo kode in razložimo, kako je to mogoče doseči z uporabo programa Angular.

1. korak: zapišimo spodnjo kodo v datoteko z imenom Table.html. To je datoteka, ki bo vstavljena v našo glavno aplikacijsko datoteko z uporabo direktive ng-include.

Spodnji delček kode predpostavlja, da obstaja spremenljivka obsega, imenovana "tutorial". Nato uporabi direktivo ng-repeat, ki gre skozi vsako temo v spremenljivki "Vadnica" in prikaže vrednosti za par ključ-vrednost "ime" in "opis".


 {{Topic.Name}}  {{Topic.Country}}

Korak 2) zapišimo spodnjo kodo v datoteko z imenom Main.html. To je preprosta aplikacija angular.JS, ki ima naslednje vidike

  1. Uporabite "direktivo ng-include" za vbrizganje kode v zunanjo datoteko 'Table.html'. Izjava je v spodnji kodi poudarjena krepko. Torej bo oznako div '
    '     nadomestila celotna koda v datoteki 'Table.html'.
  2. V krmilniku se ustvari spremenljivka "tutorial" kot del predmeta $ scope. Ta spremenljivka vsebuje seznam parov ključ-vrednost.

V našem primeru so pari ključnih vrednosti

  1. Ime - označuje ime teme, kot so krmilniki, modeli in direktive.
  2. Opis - poda opis vsake teme

Spremenljivka vadnice je dostopna tudi v datoteki 'Table.html'.

 Registracija dogodka 


Globalni dogodek Guru99

Ko zaženete zgornjo kodo, boste dobili naslednji izhod.

Izhod :

Povzetek:

  • Privzeto vemo, da HTML ne omogoča neposrednega načina za vključitev vsebine HTML iz drugih datotek, kot so drugi programski jeziki.
  • Javascript je skupaj z JQuery najboljša možnost za vdelavo vsebine HTML iz drugih datotek.
  • Drug način vključitve vsebine HTML iz drugih datotek je uporaba direktive in ključne besede navideznega parametra. Ključna beseda virtualni parameter se uporablja za označevanje datoteke, ki jo je treba vdelati. To je znano kot strežniška stran vključuje.
  • Angular omogoča tudi vključevanje datotek z uporabo direktive ng-include. To direktivo lahko uporabite za vbrizgavanje kode iz zunanjih datotek neposredno v glavno datoteko HTML.