Meni

Direktiva AngularJS s našim prvim primjerom AngularJS

  • Glavni
  • Ostalo
  • Direktiva AngularJS s našim prvim primjerom AngularJS

angularjs directive with our first angularjs example

Isprobajte Naš Instrument Za Uklanjanje Problema

Direktiva AngularJS s prvim primjerom AngularJS:

Imali smo kratki uvod u AngularJS u našem prethodnom vodiču. Ovaj će vam vodič objasniti važne činjenice koje trebate znati o AngularJS.

KutniJS je okvir web aplikacija otvorenog koda zasnovan na JavaScript-u.

Održava ga Google Corporation i velika zajednica. AngularJS je odgovor na razne nedostatke koji se susreću prilikom formuliranja aplikacija na jednoj stranici.

kako otvoriti datoteku s bujicom

Pročitajte našu Cijela serija AngularJS za dubinsko znanje o konceptu AngularJS.

Smjernica i primjer AngularJS

Okvir aplikacije AngularJS djeluje kao predložak i može smanjiti izazove s kojima se suočavaju tijekom razvoja web aplikacija.

Što ćete naučiti:

Pregled AngularJS

Google je AngularJS objavio 20.thListopada 2010. i danas je postao važan okvir za razne aplikacije sučelja s jednom stranicom.

To je razlog zbog kojeg je AngularJS održao svoje mjesto usprkos tehnološkom razvoju vratolomnim tempom. Sustav zasnovan na sučelju s više platformi čini ga i učinkovitijim.

AngularJS nadopunjuje i koristi Apache Cordovu, koja je okvir koji se koristi za mobilne platforme na više platformi. Ima viziju poboljšanja iskustva i pojednostavljenja testiranja i razvoja web aplikacija i pruža robustan okvir za njihov razvoj aplikacija AngularJS.

Zašto koristiti AngularJS?

U nastavku su navedene razne značajke i razlozi zbog kojih bi se AngularJS trebao koristiti u razvoju web aplikacija.

  1. Vezivanje podataka: Platforma omogućuje automatsku sinkronizaciju podataka između modela i sadržaja pregleda, a kao rezultat toga u velikoj mjeri štedi vaše vrijeme i trud.
  2. Kontroler: To su JavaScript koji je vezan za određeni opseg.
  3. Usluge: AngularJS ima mnogo ugrađenih usluga. Npr $ https
  4. Filteri: To pomaže u odabiru podskupina stavki iz niza i vraća ga u novi niz.
  5. Direktive: Oni su oznake na DOM elementima poput atributa, CSS elemenata itd. Oni se mogu koristiti kao prilagođene oznake HTML-a.
  6. Usmjeravanje: Pomaže u stvaranju aplikacija na jednoj stranici. Navedeno je u URL-u nakon znaka # i omogućuje vam stvaranje različitih URL-ova za različite sadržaje u vašoj aplikaciji.
  7. MVC: Stalci za model, prikaz i kontroler. To je uzorak dizajna i koristi se za podjelu aplikacije na različite dijelove, tj. Model, Pogled i Kontroler.
  8. Dubinsko povezivanje: Ova značajka okvira aplikacije pomaže vam da kodirate stanje aplikacije u URL-u za označavanje. Kasnije se aplikacija također može vratiti s URL-a u istom stanju.
  9. Injekcija ovisnosti: AngularJS također ima ugrađeni podsustav za ubrizgavanje ovisnosti koji programeru može biti od pomoći da proces razvoja i testiranja učini lakšim, kohezivnim i jednostavnim.
  10. Opseg: To su predmeti koji djeluju kao ljepilo između kontrolera i pogleda.

Kako koristiti AngularJS?

Osobno vjerujem da teško da postoji neki bolji okvir za razvoj web aplikacija koji je danas dostupan na tržištu od AngularJS-a.

Vodiči o korištenju AngularJS-a nisu frustrirajuće složeni, a čini mi se da ih je i vrlo lako slijediti. Možete iskoristiti dvosmjerni sustav vezivanja, uređaje za predloške, modularizaciju, sustav ubrizgavanja ovisnosti, funkciju AJAX Handling i druge značajke ovog okvira.

Prije pokretanja kodiranja, trebali biste znati o MVC konceptu (Model, View i Controller), skripti 'Hello World' i raznim značajkama AngularJS.

Smjernice AngularJS

AngularJS vam nudi velik broj direktive koji vam omogućuju pridruživanje različitih HTML elemenata podacima podataka aplikacije. Oni su osnovni atributi koji počinju s ključnom riječi ng- .

Najvažnija smjernica koju morate uključiti na bilo koju stranicu dok koristite AngularJS dana je u nastavku.

ng-app -

To je početna točka aplikacije AngularJS i mora se dodati bilo kojem elementu koji obavija ostatak stranice, poput elementa dijela tijela. AngularJS traži ovaj aspekt kad god se stranica učita i nastoji automatski procijeniti sve različite direktive u kodu.

Direktive AngularJS uključuju:

# 1) ng-aplikacija :Ovo se koristi za pokretanje aplikacije AngularJS. Kada se učita web stranica koja sadrži aplikaciju AngularJS, ona automatski pokreće aplikaciju definiranjem korijenskog elementa. U vašem HTML kodu treba koristiti samo jednu direktivu ng-app.

Međutim, ako se u HTML kodu pronađe više smjernica ng-aplikacija, tada će se koristiti prvi izgled.

Sintaksa:

Pitanja i odgovori mrežnog inženjera u sustavu cisco
{body of the HTML code}

# 2) topline :To se koristi za inicijalizaciju aplikacije.

Pruža skup vrijednosti koje moraju biti povezane s varijablama u svrhu inicijalizacije. Ova se direktiva ne koristi često jer se inicijalizacija varijabli obično događa kroz određene funkcije u projektu.

Sintaksa:

# 3) ng-kontroler: Koristi se kada se inicijalizacija varijabli mora izvršiti na temelju funkcije; tj. Svaka se varijabla mora inicijalizirati na temelju logike funkcije. AngularJS s objektom poziva funkciju navedenu u direktivi ng-controller.

Sintaksa:

app.controller(‘name of your function’,function($object){ Body of the controller/function});

# 4) ng-model :To se koristi za vezanje vrijednosti AngularJS na kontrole koje pruža aplikacija. Točnije, podaci koje ulaz ulazi putem kontrolera i modela bit će vezani za prikaz (w.r.t. MVC model) koji će biti prikazan korisniku.

Sintaksa:

Your Variable to be binded : var app = angular.module('myApp', ('ngAnimate'));

ng-show i ng-hide: Ove naredbe skrivaju i prikazuju elemente, što se postiže postavljanjem CSS stila prikaza.

najbolji cpu i gpu temp monitor

AngularJS također vam omogućuje definiranje prilagođenih direktiva. Koriste se za proširenje funkcionalnosti HTML-a i definiraju se pomoću funkcije 'direktiva'. Jednostavno zamjenjuju element zbog kojeg su aktivirani.

AngularJS Cheat Sheet mi je spasio život. Postoji niz drugih smjernica koje možete provjeriti na varalici. Možete čak naučiti kako graditi prilagođene direktive korištenjem AngularJS. Našao sam sve upute i smjernice platforme AngularJS na Cheat Sheetu radi pojednostavljenja mnogih problema.

Primjer AngularJS

Jednostavan primjer AngularJS može se napisati kako slijedi:

Morate stvoriti HTML datoteku, Na primjer , angularjsexample.html kako je prikazano dolje.

Welcome {{helloTo.title}} to the world of Tutorialspoint!

angular.module('myapp', ()) .controller('HelloController', function($scope) { $scope.helloTo = {}; $scope.helloTo.title = 'AngularJS'; });

U gornjem primjeru skripta predstavlja AngularJS JavaScript.

Iznenadili biste se kad biste saznali koliko je aplikacija koje svakodnevno koristite razvijeno na platformi AngularJS.

Evo nekoliko imena:

  • Čuvar
  • PayPal
  • jetBlue
  • Lego
  • Upwork
  • Netflix
  • Slobodnjak
  • iStock

Iz gornjih imena vidljivo je do koje visine možete doći ako naučite koristiti ovaj okvir. Te su web stranice na vrhu igre i velik dio njihovog uspjeha definitivno ide u učinkovitost web stranica samo zato što su razvijene na AngularJS.

Zaključak

Ako tražite izgradnju i razvoj aplikacija za jednu stranicu za mobilne uređaje ili čak web stranice, poput onoga kakav sam bio nekad, onda ne tražite dalje.

AngularJS je jedinstveno mjesto za vas, jer ovo web mjesto pomaže i čini razvoj aplikacija mnogo ugodnijim i kohezivnijem. Nije sjajan samo za početnike, ali kako ga dublje zalazite, nastojat ćete učiti s iskustvom i razvijati sjajne aplikacije.

U međuvremenu, u slučaju da nadogradite na novije verzije, tada ne trebate ulagati puno napora. Samo učenjem nekoliko novih naredbi i razumijevanjem novih podešavanja, možete započeti razvoj aplikacija i u novim verzijama.

Pazite na naš predstojeći vodič da biste saznali više o razvoju web aplikacija na jednoj stranici pomoću AngularJS.

PREV Vodič | SLJEDEĆA Vodič

Preporučena literatura

^