3 raisons de choisir AngularJS pour votre prochain projet

AngularJS est un framework JavaScript relativement nouveau de Google, conçu pour faciliter au maximum votre développement front-end. Il existe de nombreux frameworks et plugins disponibles. En tant que tel, il peut parfois s'avérer difficile de filtrer tout le bruit pour trouver des outils utiles.

Voici trois raisons pour lesquelles vous pourriez choisir AngularJS pour votre prochain projet..

1 - Il a été développé par Google

Angular est conçu et mis à jour par des ingénieurs Google dédiés..

Celui-ci peut sembler évident, mais il est important de rappeler que de nombreux frameworks (pas tous) sont conçus par des amateurs de la communauté open source. Alors que la passion et le dynamisme ont forgé des cadres, tels que Cappucino et Knockout, Angular est construit et maintenu par des ingénieurs Google dédiés (et très talentueux). Cela signifie que vous avez non seulement une grande communauté ouverte pour apprendre, mais également des ingénieurs compétents et hautement disponibles, chargés de vous aider à obtenir des réponses à vos questions angulaires..

Ce n'est pas la première tentative de Google pour un framework JavaScript; ils ont d'abord développé leur ensemble complet de outils Web, compilant Java au format JavaScript, et largement utilisé par l'équipe Google Wave. Avec la montée en puissance de HTML5, CSS3 et JavaScript, en tant que langage front-end et back-end, Google s'est rendu compte que le Web n'était pas destiné à être écrit uniquement en Java..

AngularJS est venu sur le point de normaliser la structure des applications Web et de fournir un futur modèle sur la manière dont les applications côté client devraient être développées..

La version 1.0 a été publiée il y a un peu moins de 6 mois (en décembre 2012) et est utilisée par une foule d'applications, allant des produits de loisirs aux produits commerciaux. L’adoption d’AngularJS en tant que cadre viable pour le développement côté client est de plus en plus connue de la communauté du développement Web..

Comme AngularJS est construit par Google, vous pouvez être sûr que vous avez affaire à un code efficace et fiable qui s'adapte à votre projet. Si vous cherchez un cadre avec une base solide, Angular est votre choix!

2 - C'est complet

Si vous connaissez des projets tels que QUnit, Mocha ou Jasmine, vous n'aurez aucun mal à apprendre l'API de test unitaire d'Angular..

Angular, similaire à Backbone ou JavaScriptMVC, est une solution complète pour un développement rapide en amont. Aucun autre plugin ou framework n'est nécessaire pour créer une application Web basée sur les données. Voici un aperçu des fonctionnalités remarquables d'Angular:

REST Easy. Les actions RESTful deviennent rapidement le standard de communication entre le serveur et le client. En une seule ligne de code JavaScript, vous pouvez parler rapidement au serveur et obtenir les données nécessaires pour interagir avec vos pages Web. AngularJS transforme cela en un simple objet JavaScript, en tant que modèles, suivant le modèle MVVM (Model View View-Model)..
MVVM à la rescousse! Les modèles parlent aux objets ViewModel (via quelque chose appelé l'objet $ scope), qui écoutent les modifications apportées aux modèles. Ceux-ci peuvent ensuite être livrés et rendus par les vues, qui est le code HTML qui exprime votre code. Les vues peuvent être routées à l'aide de l'objet $ routeProvider. Vous pouvez ainsi créer un lien profond et organiser vos vues et vos contrôleurs, en les transformant en URL de navigation. AngularJS fournit également des contrôleurs sans état, qui initialisent et contrôlent la $ scope objet.
Liaison de données et injection de dépendance. Tout ce qui se trouve dans le modèle MVVM est automatiquement communiqué dans l'interface utilisateur chaque fois que quelque chose change. Cela élimine le besoin de wrappers, de getters / setters ou de déclarations de classe. AngularJS gère tout cela pour que vous puissiez exprimer vos données aussi simplement qu'avec des primitives JavaScript, telles que des tableaux, ou aussi complexes que vous le souhaitez, via des types personnalisés. Comme tout se passe automatiquement, vous pouvez demander vos dépendances en tant que paramètres dans les fonctions de service AngularJS, plutôt qu'en un seul géant. principale() appelez pour exécuter votre code.
Étend HTML. La plupart des sites Web construits aujourd'hui sont une série géante de
balises avec peu de clarté sémantique. Vous devez créer des classes CSS complètes et exhaustives pour exprimer l'intention de chaque objet du DOM. Avec Angular, vous pouvez utiliser votre code HTML comme XML, vous offrant ainsi une infinité de possibilités pour les balises et les attributs. Angular accomplit cela, via son compilateur HTML et l'utilisation de directives pour déclencher des comportements basés sur la syntaxe nouvellement créée que vous écrivez..
Rend HTML votre modèle. Si vous êtes habitué à Moustache ou à Hogan.js, vous pouvez saisir rapidement la syntaxe du support du moteur de création de modèles d'Angular, car c'est juste du HTML. Angular traverse le DOM pour ces modèles, qui contiennent les directives mentionnées ci-dessus. Les modèles sont ensuite transmis au compilateur AngularJS en tant qu’éléments DOM, qui peuvent être étendus, exécutés ou réutilisés. Ceci est essentiel, car vous avez maintenant des composants DOM bruts, plutôt que des chaînes, permettant une manipulation et une extension directes de l'arborescence DOM..
Test au niveau de l'entreprise. Comme indiqué ci-dessus, AngularJS ne nécessite aucun framework ou plugin supplémentaire, pas même les tests. Si vous connaissez des projets tels que QUnit, Mocha ou Jasmine, vous n'aurez aucun mal à apprendre l'API de tests unitaires d'Angular et Scenario Runner, qui vous guideront tout au long de l'exécution de vos tests, aussi proches de l'état réel de votre application de production. comme possible.

Ce sont les principes fondamentaux qui guident AngularJS dans la création d’une base de code frontale efficace, axée sur les performances et maintenable. Tant que vous avez une source pour stocker des données, AngularJS peut faire le gros du travail pour le client, tout en offrant une expérience riche et rapide à l'utilisateur final..

3 - Commencez en quelques minutes

Commencer avec AngularJS est incroyablement facile. Avec quelques attributs ajoutés à votre code HTML, vous pouvez avoir une application simple angulaire en moins de 5 minutes.!

Ajouter le ng-app directive à la balise si angulaire sait exécuter sur la page:
Ajouter l'angulaire

 Ajouter du code HTML normal. Les directives AngularJS sont accessibles via des attributs HTML, tandis que les expressions sont évaluées avec une notation à double crochet:  Activités du jour
   activity.name

 le ng-contrôleur directive configure un espace de noms, où nous pouvons placer notre JavaScript angulaire pour manipuler les données et évaluer les expressions de notre code HTML. ng-répéter est un objet répéteur angulaire, qui indique à Angular de continuer à créer des éléments de liste tant que nous avons des activités à afficher, et de l'utiliser 
 élément en tant que modèle pour la façon dont nous voulons tous regarder.
  Lorsque vous souhaitez récupérer quelque chose dans Angular, récupérez vos données avec un fichier JavaScript contenant une fonction dont le nom correspond au contrôleur que vous avez décrit dans votre code HTML:
 
 function ActivitiesListCtrl ($ scope) $ scope.activities = ["name": "Réveil", "name": "Se brosser les dents", "name": "Douche", "name": "Prenez votre petit déjeuner", "name": "Allez au travail", "name": "Écrivez un article sur Nettuts", "name": "Allez au gym", "name": " Rencontrer des amis ", " name ":" Aller au lit "]; 
 Comme mentionné précédemment, nous créons une fonction avec le même nom que le ng-contrôleur directive, afin que notre page puisse trouver la fonction angulaire correspondante pour initialiser et exécuter notre code avec les données que nous souhaitons récupérer. Nous passons dans le $ scope paramètre afin d'accéder au modèle Activités liste que nous avons créée dans notre vue HTML. Nous fournissons ensuite un ensemble d'activités de base avec la clé, prénom, correspondant à la activitépropriété de prénom que nous avons listés dans notre notation à double crochet, et une valeur, qui est une chaîne représentant les activités que nous voulons accomplir aujourd'hui.
  Bien que cette application soit complète, elle n’est pas trop pratique. La plupart des applications Web contiennent beaucoup de données stockées sur des serveurs distants. Si vos données sont stockées sur un serveur quelque part, nous pouvons facilement remplacer le tableau par un appel de l'API AJAX d'Angular:
 
 function ActivitiesListCtrl ($ scope) $ http.get ('activités / list.json'). success (function (data) $ scope.activities = data;
 Nous avons simplement remplacé l'objet de tableau JavaScript natif de hachages par une fonction HTTP GET spécialisée, fournie par l'API angulaire. Nous passons le nom du fichier que nous regardons chercher à partir du serveur (dans ce cas, un fichier JSON d'activités) et nous recevons une promesse d'Angular, de la même manière que le modèle de promesse fonctionne dans jQuery..
   En savoir plus sur les promesses dans jQuery ici sur Nettuts+. 
 
 Cette promesse peut alors exécuter notre Succès lorsque les données ont été renvoyées et que tout ce que nous avons à faire est de lier les données renvoyées à nos activités, qui, comme indiqué précédemment, ont été fournies par injection de dépendance, via $ scope paramètre.
 Une liste de tâches statique est bien, mais le vrai pouvoir provient de la facilité avec laquelle nous pouvons manipuler la page sans avoir à configurer un ensemble de fonctions JavaScript pour écouter et répondre aux interactions de l'utilisateur. Imaginez que nous devions trier notre liste d'activités par ordre alphabétique. Eh bien, nous ajoutons simplement un sélecteur déroulant pour permettre à l'utilisateur de trier la liste: 
Trier:
 
 Ajouter le modèle directive au menu déroulant: