AngularJS
![]() | |
Tipus | entorn de treball, biblioteca de JavaScript i biblioteca informàtica ![]() |
---|---|
Versió inicial | 20 octubre 2010 ![]() |
Versió estable | |
Llicència | llicència MIT ![]() |
Característiques tècniques | |
Plataforma | plataforma web ![]() |
Escrit en | JavaScript (oc) ![]() ![]() |
Equip | |
Desenvolupador(s) | Google ![]() |
Fonts de codi | |
Més informació | |
Lloc web | angularjs.org (anglès) ![]() |
Stack Exchange | Etiqueta ![]() |
Free Software Directory | AngularJS ![]() |
Id. Subreddit | angularjs ![]() |
| |
AngularJS (o també Angular.js) és un entorn de treball per a aplicacions web de codi lliure mantingut per l'empresa Google i per una comunitat de particulars i empreses. AngularJS s'adeça a desenvolupar aplicacions d'una única pàgina. L'objectiu és augmentar les aplicaciones basades en navegador amb capacitat de Model-Vista-Controlador (MVC), en un esforç de millorar el desenvolupament i la depuració. AngularJS forma part del programari anomenat MEAN, juntament amb MongoDB, express.js i Node.js [1][2][3][4]
Directives AngularJS
[modifica]Les directives són marques en els elements de l'arbre DOM, en els nodes de l'HTML, que indiquen al compilador d'Angular el comportament d'aquests elements. Són útils per a definir nous codis html —com botons o, per exemple un footer complet-- i també per a crear conceptes més complexos que incloguin funcions o variables dinàmiques definides directament dins DOM.
Directives Nadiues
[modifica]Directiva | Descripció |
---|---|
ngApp (ng-app) | És la directiva que s'encarrega d'arrancar una aplicació Angular tot indicant l'element arrel. |
ngController (ng-controller) | És la directiva que permet indicar la vista on treballa el nostre controlador. |
ngModel (ng-model) | És la directiva que representa el model o dada, permet d'obtenir la informació entrada per l'usuari en algun element del formulari, sigui un input, select o textarea. |
ngClick (ng-click) | Aquesta directiva treballa directament relacionant a l'event click, es pot associar alguna funcionalitat quant l'usuari faci click sobre algun element. |
ngInit (ng-init) | Aquesta directiva permet avaluar una expressió en el camp d'existència/Àmbit (scope) on s'està treballant. |
ngRepeat (ng-repeat) | Aquesta directiva permet d'iterar una col·lecció de dades, generar una plantilla per cada element de la col·lecció i pintar-lo en la vista, cada template o plantilla rep el seu propi àmbit ($scope). |
ngChange (ng-change) | Aquesta directiva detecta qualsevol canvi que es produeixi dintre d'una etiqueta d'entrada, siguin inputs, checkbox, etc. |
nShow (ng-show) | ngHide (ng-hide) | Aquestes directives permeten mostrar i ocultar alguna part de la vista segons la condició que li assignem. |
ngBind (ng-bind) | Aquesta directiva té la mateixa funcionalitat que les claus {{}}, però amb millor resposta temporal. |
Directives Pròpies
[modifica]Malgrat que Angular té implementades un gran nombre de directives, es poden crear directives definides per l'usuari.
var app = angular.module('ElMeuMòdul',[]);
app.controller('ElMeuControlador', function($scope){
$scope.cliente = {
nom: 'Jhon',
adreça: 'Av. Lluís Companys 481'
};
});
//Aquí creem la directiva
app.directive('Client', function() {
return {
template: 'Nom: {{client.nom}} Adreça: {{client.adreça}}'
};
});
Referències
[modifica]- ↑ «AngularJS — Superheroic JavaScript MVW Framework» (en anglès). https://angularjs.org/.+[Consulta: 14 juny 2017].
- ↑ «AngularJS Tutorial» (en anglès). https://www.w3schools.com.+[Consulta: 14 juny 2017].
- ↑ «Angular Docs» (en anglès). https://angular.io/.+[Consulta: 14 juny 2017].
- ↑ «Angular 1.x Lessons - Screencast Video Tutorials» (en anglès). https://egghead.io. Arxivat de l'original el 2016-10-12. [Consulta: 14 juny 2017].