Lorsque je suis tombé sur AngularJS il y a quelques semaines, j'ai été intrigué au début. Au moment où je travaillais sur l'ensemble des didacticiels disponibles sur le site Web d'AngularJS, j'étais ravi d'avoir trouvé ce cadre.
Qu'est ce que AngularJS? AngularJS est le (relativement) nouveau-né du bloc de codage. Pour citer son site Web, il s'agit d'un «cadre structurel pour les applications Web dynamiques», particulièrement adapté à la création d'applications Web d'une page, même si cela ne se limite certainement pas à cela.
Développé en 2009 par Miško Hevery et Adam Abrons - tous deux employés de Google à cette époque -, il est entièrement JavaScript et entièrement côté client. Ainsi, partout où JavaScript peut s'exécuter, AngularJS peut s'exécuter. C'est aussi petit: compressé et minifié c'est moins de 29 Ko. Et c'est open source sous la licence MIT. Vous pouvez même utiliser le logo, disponible sous la licence Creative Commons Attribution-ShareAlike 3.0 Unported.
Selon Wikipedia, l’objectif d’Angular "est d’augmenter les applications basées sur un navigateur avec la capacité MVC (Model-View-Controller)" et c’est ce qu’il fait, en fournissant un framework de liaison / MVC. C'est une liaison bidirectionnelle, remarquez. Délicieux. Avec une structure aussi simple que {{mes données}}, vous liez des données à votre page. Le service $ scope détecte les modifications apportées au modèle et modifie les expressions HTML dans la vue à l'aide de contrôleurs. Dans l'autre sens, les modifications apportées à la vue sont reflétées dans le modèle. Cela supprime la nécessité de la grande majorité des manipulations DOM centrées sur les données que beaucoup d'entre nous, y compris moi-même, prenons pour acquis lorsque nous travaillons avec une bibliothèque comme jQuery.
Angular s'exécute sans aucune dépendance de bibliothèque, bien qu'il puisse être étendu avec les nombreux modules disponibles, et bien sûr, vous pouvez créer le vôtre pour répondre à vos besoins spécifiques. En tant que pur JavaScript, il présente également l'avantage d'être indépendant du serveur.
Étant habitué à une bibliothèque puissante comme jQuery, il est facile de vouloir le mélanger pour faire des choses que Angular peut déjà faire. Reconnaissant cet écueil potentiel, les développeurs ont ceci à dire: "Si vous avez du mal à casser l'habitude, pensez à supprimer jQuery de votre application. Vraiment. Angular a le service $ http et des directives puissantes qui le rendent presque toujours inutile. "Une chose est sûre, si vous vous en tenez à Angular, les boucles jQuery et les allers-retours explicites avec le serveur seront absents de votre code, car Angular propose une méthode aussi simple et succincte pour atteindre les mêmes objectifs.
Angular utilise des directives pour connecter son action à la page. Les directives, toutes précédées de ng, sont placées dans des attributs HTML.
Certaines des directives courantes fournies avec Angular sont les suivantes:
ng-app: c'est essentiellement le point d'entrée initial de Angular à la page. Il dit à Angular où il doit agir. est tout ce qu'il faut pour définir une page en tant qu'application angulaire.
ng-bind: change le texte d'un élément à la valeur d'une expression.
affichera la valeur de 'name' dans l'intervalle. Toute modification apportée à «name» est reflétée instantanément dans le DOM, quel que soit le lieu d'utilisation de la variable.
ng-controller: spécifie la classe JavaScript pour l'action donnée. Les contrôleurs sont généralement conservés dans des fichiers .js externes.
ng-repeat: crée les structures de boucle très propres dans votre page.
- {{item.description}}
boucle sans effort à travers chaque élément de la collection.
Je ne les ai pas encore utilisés moi-même, mais j'ai lu que créer des directives personnalisées peut être un problème délicat, ce qui prend du temps à vous en faire comprendre. Angular propose un vidéo pour aider à clarifier le concept.
Comme mentionné précédemment, la directive ng-app dans le tag définit le stade de fonctionnement d'angulaire dans la page.
Ajouter à la tête de la page pour introduire le cadre angulaire lui-même.
pointe vers le fichier JavaScript externe ou les fichiers contenant les classes JavaScript que votre application Angular appellera. Une classe très simple, par exemple, pourrait être:
function ItemListCtrl ($scope) {$scope.items = [{ "description": "coffee pot" } , {"description": "nerf gun"}, {"description": "phone"},];} En passant ng-controller "ItemListCtrl", le nom de ma classe JavaScript imaginaire, indique à Angular quel code exécuter:
et la notation à deux crochets indique à Angular quelles expressions évaluer.
ng-repeat est une directive répétiteur merveilleusement succincte qui parcourt la collection en cours et effectue l'action spécifiée ou fournit les données spécifiées. C'est tellement simple et propre.
Stuff on my desk:
{{item.description}}Cette configuration simple affichera:
Stuff on my desk:coffee potnerf gunphoneCertes, cela ne semble pas si impressionnant, mais l'idée elle-même est. Le balisage et les contrôleurs de page très simples facilitent le démarrage avec Angular.
Obtenir des données réelles dans votre application est également simple. Angular aime consommer JSON:
function ItemListCtrl ($scope, $http) {$http.get(‘items/list.json').success(function (data) {$scope.items = data;} } Cela retourne un objet JSON qui peut être manipulé à volonté dans votre application Angular.
Un des principes de base sur lesquels Angular a été fondé est que les applications créées avec ce logiciel sont entièrement testables. Pour des tests de bout en bout, nous avons Angular Scenario Runner pour simuler les interactions des utilisateurs avec votre application. Vous alimentez les tests de scénario écrits en JavaScript.
Pour le débogage dans le navigateur, AngularJS Batarang est une extension Chrome disponible sur github.
Au fur et à mesure qu'AngularJS gagne en popularité, davantage de ressources seront disponibles, mais il existe déjà un certain nombre de sites fournissant des instructions et des moyens d'étendre Angular.
le Site AngularJS elle-même, est bien sûr votre source définitive. Ils offrent des tutoriels simples et solides et ont une activité assez active. Présence Google+
Il y a plusieurs Angular référentiels sur GitHub.
Modules angulaires, propose une collection de modules soumis par l'utilisateur, des services Backbone à l'intégration Rails.
Avez-vous déjà utilisé AngularJS? Comment se compare-t-il à des bibliothèques beaucoup plus grandes comme jQuery? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image d'angle via Shutterstock.