Menú

Directiva AngularJS amb el nostre primer exemple AngularJS

  • Principal
  • Altres
  • Directiva AngularJS amb el nostre primer exemple AngularJS

angularjs directive with our first angularjs example

Proveu El Nostre Instrument Per Eliminar Problemes

Directiva AngularJS amb el primer exemple d'AngularJS:

Vam tenir un breu introducció a AngularJS al nostre tutorial anterior. Aquest tutorial us explicarà els fets importants que heu de conèixer sobre AngularJS.

AngularJS és un marc d'aplicacions web de codi obert basat en JavaScript.

La mantenen Google Corporation i una gran comunitat. AngularJS és una resposta als diferents inconvenients que es presenten per formular aplicacions d’una sola pàgina.

Llegiu el nostre document Sèrie AngularJS sencera per obtenir coneixements en profunditat sobre el concepte AngularJS.

quin és el millor descarregador de música per a PC

Directiva i exemple AngularJS

El marc d'aplicacions AngularJS actua com a plantilla i pot reduir els reptes que s'enfronten durant el desenvolupament d'aplicacions web.

Què aprendreu:

Visió general d'AngularJS

AngularJS va ser llançat per Google el 20thOctubre de 2010 i avui s’ha convertit en un marc significatiu per a diverses aplicacions d’interfície d’una sola pàgina.

Aquesta és la raó per la qual AngularJS s’ha mantingut ferm malgrat el desenvolupament tecnològic a un ritme vertiginós. El sistema basat en la interfície multiplataforma també el fa més eficient.

AngularJS complementa i beneficia l'Apache Cordova, que és un framework que s'utilitza per a aplicacions mòbils multiplataforma. Té la visió de millorar l’experiència i simplificar la prova i el desenvolupament d’aplicacions web i proporciona un marc robust per al desenvolupament d’aplicacions AngularJS.

Per què utilitzar AngularJS?

A continuació, es detallen les diverses funcions i motius pels quals s’hauria d’utilitzar AngularJS en el desenvolupament d’aplicacions web.

  1. Enllaç de dades: La plataforma proporciona una sincronització automàtica de dades entre el model i el contingut de la visualització i, com a resultat, estalvia molt el temps i l’esforç.
  2. Controlador: Aquests són JavaScript vinculats a un àmbit concret.
  3. Serveis: AngularJS té molts serveis integrats. Per exemple $ https
  4. Filtres: Això ajuda a seleccionar un subconjunt d'elements d'una matriu i el torna a una matriu nova.
  5. Directrius: Són marcadors d'elements DOM com atributs, elements CSS, etc. Es poden utilitzar com a etiquetes personalitzades d'HTML.
  6. Encaminament: Ajuda a crear aplicacions de pàgina única. S'especifica a l'URL després del signe # i us permet crear URL diferents per a contingut diferent de la vostra aplicació.
  7. MVC: Suports per al model, la visualització i el controlador. És un patró de disseny i s’utilitza per a la divisió d’una aplicació en diferents parts, és a dir, Model, Vista i Controlador.
  8. Enllaç profund: Aquesta característica del marc d'aplicacions us ajuda a codificar l'estat de l'aplicació a l'URL per afegir adreces d'interès. Més endavant, l'aplicació també es pot restaurar des de l'URL en el mateix estat.
  9. Injecció de dependència: AngularJS també té un subsistema d'injecció de dependència integrat que pot ser útil per al desenvolupador perquè el procés de desenvolupament i proves sigui més fàcil, cohesionat i senzill.
  10. Abast: Aquests són els objectes que actuen com a cola entre el controlador i la vista.

Com s'utilitza AngularJS?

Personalment, crec que amb prou feines hi ha cap millor marc de desenvolupament d’aplicacions web front-end que estigui disponible al mercat avui dia que AngularJS.

Els tutorials sobre com utilitzar AngularJS no són frustrantment complexos i, de fet, també els he trobat força fàcils de seguir. Podeu aprofitar un sistema d’enquadernació bidireccional, instal·lacions de plantilla, modularització, sistema d’injecció de dependències, funció AJAX Handling i altres funcions d’aquest marc.

Abans d’iniciar la codificació, heu de conèixer el concepte MVC (Model, Vista i Controlador), l’escriptura “Hello World” i les diverses funcions d’AngularJS.

AngularJS Directives

AngularJS us proporciona un gran nombre de fitxers directives que us permeten associar els diversos elements HTML a les dades de l'aplicació. Són els atributs bàsics que comencen per la paraula clau ng- .

A continuació es mostra la directiva més important que heu d’incloure a qualsevol pàgina mentre utilitzeu AngularJS.

ng-app -

És el punt de partida de l'aplicació AngularJS i s'ha d'afegir a qualsevol element que emboliqui la part restant de la pàgina, com l'element de la part del cos. AngularJS busca aquest aspecte sempre que es carrega la pàgina i tendeix a avaluar automàticament totes les directrius del codi.

Les directrius d’AngularJS inclouen:

# 1) ng-app :S'utilitza per iniciar l'aplicació AngularJS. Quan es carrega la pàgina web que conté l'aplicació AngularJS, arrenca automàticament l'aplicació definint l'element arrel. Només s’ha d’utilitzar una directiva ng-app al vostre codi HTML.

Tot i això, si es troben més d’una directriu ng-app al codi HTML, s’utilitzarà la primera aparició.

Sintaxi:

{body of the HTML code}

# 2) de calor :S'utilitza per inicialitzar l'aplicació.

Proporciona un conjunt de valors que s’han d’associar a variables per tal d’inicialitzar. Aquesta directiva no s’utilitza sovint ja que la inicialització de variables sol passar a través de funcions específiques dins del projecte.

Sintaxi:

# 3) ng-controller: S'utilitza quan la inicialització de variables s'ha de fer en funció d'una funció; és a dir, cadascuna de les variables s’ha d’inicialitzar en funció de la lògica de funcions. AngularJS invoca la funció especificada a la directiva ng-controller amb un objecte.

Sintaxi:

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

# 4) model ng :S'utilitza per vincular els valors d'AngularJS als controls proporcionats per l'aplicació. Per ser específics, les dades obtingudes per l'entrada mitjançant el controlador i el model estaran lligats a la vista (w.r.t. model MVC) que es presentarà a l'usuari.

Sintaxi:

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

ng-show i ng-hide: Aquestes ordres amaguen i mostren els elements, cosa que s’aconsegueix configurant l’estil de visualització CSS.

AngularJS també us permet definir directives personalitzades. S'utilitzen per ampliar la funcionalitat de l'HTML i es defineixen mitjançant la funció 'directiva'. Simplement substitueixen l'element per al qual estan activats.

El full de trucs d’AngularJS em va salvar la vida. Hi ha una sèrie d’altres pautes que podeu consultar al full de trucs. Fins i tot podeu aprendre a crear directives personalitzades mitjançant l’ús d’AngularJS. He trobat totes les instruccions i directrius de la plataforma AngularJS al full de trucs per simplificar molts problemes.

Exemple AngularJS

Un exemple simple d'AngularJS es pot escriure de la següent manera:

Heu de crear un fitxer HTML, Per exemple , angularjsexample.html com es mostra a continuació.

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

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

A l'exemple anterior, el script representa JavaScript AngularJS.

Us sorprendria saber quantes aplicacions que utilitzeu diàriament s'han desenvolupat a la plataforma AngularJS.

Aquí hi ha alguns noms:

  • El guardià
  • PayPal
  • jetBlue
  • Lego
  • Treball
  • Netflix
  • Autònom
  • iStock

A partir dels noms anteriors, és evident quina alçada podeu assolir aprenent a utilitzar aquest marc. Aquests llocs es troben a la part superior del seu joc, i una gran part del seu èxit va definitivament a l'eficiència dels llocs només perquè han estat desenvolupats a AngularJS.

Conclusió

Si voleu crear i desenvolupar aplicacions d’una sola pàgina per a mòbils o fins i tot per a llocs web, com ara com era, no busqueu més.

AngularJS és una finestreta única, ja que aquest lloc ajuda i fa que el desenvolupament d’aplicacions sigui molt més còmode i cohesionat. No només és fantàstic per a principiants, sinó que a mesura que aprofundeixis en ella, tendiràs a aprendre amb experiència i a desenvolupar aplicacions fantàstiques.

Mentrestant, en cas que actualitzeu a versions més recents, no cal que feu molts esforços. Només aprenent algunes ordres noves i entenent nous ajustaments, també podeu començar a desenvolupar aplicacions en les noves versions.

Mireu el proper tutorial per obtenir més informació sobre el desenvolupament d'aplicacions web d'una sola pàgina mitjançant AngularJS.

PREV Tutorial | NEXT Tutorial

Lectura recomanada

^