„ng-include“ į „AngularJS“: kaip įtraukti HTML failą (pavyzdys)

Turinys:

Anonim

Pagal numatytuosius nustatymus HTML nesuteikia galimybės įtraukti kliento kodą iš kitų failų. Paprastai yra gera bet kurios programavimo kalbos praktika paskirstyti funkciją įvairiems failams bet kuriai programai.

Pavyzdžiui, jei turite skaitinių operacijų logiką, paprastai norėtumėte, kad ši funkcija būtų apibrėžta viename atskirame faile. Tada tą atskirą failą galima pakartotinai naudoti keliose programose, tiesiog įtraukiant tą failą.

Paprastai tai yra sąvoka „ Įtraukti“, kurios yra prieinamos programavimo kalbomis, tokiomis kaip .Net ir Java.

Šioje pamokoje apžvelgiami kiti būdai, kaip failus (failus, kuriuose yra išorinis HTML kodas) galima įtraukti į pagrindinį HTML failą.

Šioje pamokoje sužinosite

  • Kliento pusė apima
  • Serverio pusė apima
  • Kaip įtraukti HTML failą į „AngularJS“

Kliento pusė apima

Vienas iš labiausiai paplitusių būdų yra įtraukti HTML kodą naudojant „Javascript“. „JavaScript“ yra programavimo kalba, kurią galima naudoti HTML puslapio turiniui skraidyti. Taigi „Javascript“ taip pat gali būti naudojamas įtraukti kodą iš kitų failų.

Žemiau pateikiami žingsniai parodo, kaip tai galima pasiekti.

1 žingsnis. Apibrėžkite failą pavadinimu Sub.html ir pridėkite šį kodą prie failo.

Tai yra įtrauktas failas

2 žingsnis) Sukurkite failą pavadinimu Sample.html, kuris yra jūsų pagrindinis programos failas, ir pridėkite toliau pateiktą kodo fragmentą.

Žemiau yra pagrindiniai aspektai, kuriuos reikia atkreipti dėmesį į žemiau pateiktą kodą,

  1. Turinio žymoje yra div žyma, kurios ID yra Turinys. Čia bus įterptas kodas iš išorinio failo „Sub.html“.
  2. Yra nuoroda į „jquery“ scenarijų. „JQuery“ yra scenarijų kalba, sukurta „Javascript“ viršuje, o tai dar labiau palengvina DOM naudojimą.
  3. „Javascript“ funkcijoje yra teiginys '$ ("# Content"). Load ("Sub.html");' dėl ko faile Sub.html esantis kodas bus įterptas į „div“ žymą, kurios ID yra „Content“.

Serverio pusė apima

Serverio pusių komplektai taip pat prieinami norint įtraukti bendrą kodo dalį į svetainę. Paprastai tai daroma įtraukiant turinį į žemiau esančias HTML dokumento dalis.

  1. Puslapio antraštė
  2. Puslapio poraštė
  3. Naršymo meniu.

Kad žiniatinklio serveris atpažintų „Server Side Includes“, failų pavadinimai turi specialius plėtinius. Paprastai juos priima žiniatinklio serveris, pvz., .Shtml, .stm, .shtm, .cgi.

Turinio įtraukimui naudojama direktyva yra „įtraukti direktyvą“. Toliau pateikiamas įtraukimo direktyvos pavyzdys;

  • Pirmiau nurodyta direktyva leidžia įtraukti vieno dokumento turinį į kitą.
  • „Virtuali“ komanda, esanti virš kodo, naudojama tikslui nurodyti, palyginti su programos domeno šaknimi.
  • Be to, prie virtualaus parametro yra failo parametras, kurį galima naudoti. Parametrai „failas“ naudojami, kai reikia nurodyti kelią, palyginti su dabartinio failo katalogu.

Pastaba:

Virtualus parametras naudojamas nurodyti failą (HTML puslapį, teksto failą, scenarijų ir kt.), Kurį reikia įtraukti. Jei žiniatinklio serverio procesas neturi prieigos skaityti failo ar vykdyti scenarijaus, komandą įtraukti nepavyks. „Virtualus“ žodis yra raktinis žodis, kurį reikia įtraukti į direktyvą „įtraukti“.

Kaip įtraukti HTML failą į „AngularJS“

„Angular“ suteikia funkciją įtraukti funkciją iš kitų „AngularJS“ failų naudojant „ng-include“ direktyvą.

Pagrindinis „ng-include“ direktyvos tikslas yra gauti, kompiliuoti ir įtraukti išorinį HTML fragmentą į pagrindinę „AngularJS“ programą.

Pažvelkime į žemiau pateiktą kodų bazę ir paaiškinkite, kaip tai galima pasiekti naudojant „Angular“.

1 žingsnis) parašykime žemiau esantį kodą į failą, pavadintą Table.html. Tai failas, kuris bus įterptas į mūsų pagrindinį programos failą naudojant „ng-include“ direktyvą.

Žemiau pateiktame kodo fragmente daroma prielaida, kad yra srities kintamasis, vadinamas „pamoka“. Tada ji naudoja direktyvą „ng-repeat“, kuri pereina kiekvieną kintamojo „Pamoka“ temą ir rodo raktų ir reikšmių porų „vardas“ ir „aprašas“ reikšmes.


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

2 žingsnis) parašykime žemiau esantį kodą į failą, vadinamą „Main.html“. Tai paprasta kampinė.JS programa, turinti šiuos aspektus

  1. Norėdami įterpti kodą į išorinį failą „Table.html“, naudokite „ng-include“ direktyvą. Šis teiginys paryškintas paryškintame kode. Taigi div žyma '
    '     bus pakeista visu kodu, esančiu faile 'Table.html'.
  2. Valdiklyje „tutorial“ kintamasis sukuriamas kaip $ srities objekto dalis. Šiame kintamajame yra raktų ir verčių porų sąrašas.

Mūsų pavyzdyje pagrindinių reikšmių poros yra

  1. Pavadinimas - tai reiškia tokios temos kaip valdikliai, modeliai ir direktyvos pavadinimą.
  2. Aprašas - tai pateikia kiekvienos temos aprašymą

Pamokos kintamasis taip pat pasiekiamas faile „Table.html“.

 Renginių registracija  


„Guru99“ pasaulinis įvykis

Vykdydami pirmiau nurodytą kodą gausite šią išvestį.

Išvestis :

Santrauka:

  • Pagal numatytuosius nustatymus mes žinome, kad HTML neteikia tiesioginio būdo įtraukti HTML turinį iš kitų failų, pvz., Kitų programavimo kalbų.
  • „Javascript“ kartu su „JQuery“ yra geriausiai pageidaujama galimybė įdėti HTML turinį iš kitų failų.
  • Kitas būdas įtraukti HTML turinį iš kitų failų yra naudoti direktyvą ir virtualaus parametro raktinį žodį. Virtualiojo parametro raktinis žodis naudojamas failui, kurį reikia įdėti, žymėti. Tai vadinama serverio pusės apimtimi.
  • „Angular“ taip pat suteikia galimybę įtraukti failus naudojant „ng-include“ direktyvą. Ši direktyva gali būti naudojama norint įterpti kodą iš išorinių failų tiesiai į pagrindinį HTML failą.