Présentation d'AngularJS
Chez Brat Tech LLC en 2009, les développeurs Misko Hevery et Adam Abrons ont développé un framework AngularJS, après quoi une révolution s'est produite dans le développement frontal et la création d'applications d'une seule page. AngularJS est un framework javascript, qui lie les éléments Html aux objets javascript. La liaison de données et l'injection de dépendances sont quelques-unes des principales fonctionnalités d'AngularJs qui permettent de gagner du temps en écrivant de longs codes, ce qui facilite le travail des développeurs et des navigateurs. Comment cela sera-t-il expliqué en détail, mais pour l'instant, vous vous souvenez simplement de ces terminologies. Dans cette rubrique, nous allons découvrir la version AngularJS.
Versions de AngularJS
AngularJS est les versions Angular 1.x et ensuite Angular 2 est développé, ce qui est différent d'Angular 1.x. travaux.
Pourquoi la version AngularJS et comment ça marche?
AngularJS nous aide à développer des applications interactives d'une seule page. Par applications d'une seule page, je veux dire que la seule page que vous avez visitée chargera tous les autres contenus en utilisant javascript. Cette fonctionnalité permet à l'application d'être rapide et efficace.
Lorsque nous utilisons javascript et html pour créer des applications, vous devrez lier la vue au modèle en utilisant des fonctions et des objets JS. Mais si vous pensez que cette liaison de données bidirectionnelle dans une application industrielle pratique, la même approche devient fastidieuse avec des codes longs. C'est l'une des principales raisons pour lesquelles il était nécessaire d'apprendre et de développer AngularJS.
Il est temps d'apprendre quelques concepts de base avant de commencer à développer des applications dans lesquelles AngularJS est construit:
- Modèle: le modèle contient des données, des objets et une logique.
- Vue: Il s'agit de la présentation visuelle de l'application qui est également appelée interface utilisateur.
- Afficher pour modéliser la liaison bidirectionnelle: l' objet javascript, c'est-à-dire l'objet que vous souhaitez lier à un DOM Html, par exemple une zone de texte, une entrée ou toute balise Html et vice versa, peut être facilement utilisé à l'aide de bibliothèques AngularJS prédéfinies.
- Contrôleurs: les contrôleurs sont des fonctions javascript qui connectent le modèle et la vue.
- Services: les services AngularJS sont des fonctions javascript qui effectuent des tâches ou des fonctionnalités spécifiques qui sont maintenues et testées par javascript. Certains des exemples de services sont $ scope, $ http, $ rootScope.
- Expressions: les expressions sont utilisées pour lier des données avec du HTML. Cette fonction est également appelée interpolation. Les expressions sont écrites avec ((expression)) accolades. Les expressions sont évaluées et peuvent être écrites sans balises html.
- Modules: les modules fonctionnent comme un conteneur contenant différentes parties de l'application angulaire telles que le contrôleur, les services, les directives, etc.
Directives et champ d'application
Concentrons-nous sur certaines des directives prédéfinies et sur leur fonctionnement réel. La plupart de cette directive commence par «ng» tiré d'Angular
1. Portée
- La portée définit l'objet javascript avec lequel les données peuvent être accessibles du modèle au HTML. La portée fonctionne comme un connecteur entre les deux.
- Certains services d'étendue sont $ scope, $ rootScope. '$' définit que ces services sont prédéfinis et ne peuvent pas être modifiés. Souvenez-vous que HTML n'est pas sensible à la casse mais AngularJS est sensible à la casse, donc $ Scope générera une erreur non définie.
- Il est nécessaire de les déclarer dans notre fonction de contrôleur et angulaire l'injectera automatiquement.
2. ng-controller
- Cette directive est utilisée pour créer une instance / un objet du contrôleur à travers lequel HTML DOM communiquera avec la logique réelle.
- HTML indique que toute balise avec un «-» sera ignorée lors de la création du DOM HTML.
- Une fois DOM créé, l'interpréteur angulaire trouve une directive ng-controller et crée une instance du contrôleur particulier fournissant également un service $ scope.
- Il peut y avoir plusieurs ng-controller dans une seule page HTML.
3. ng-app
- Cette directive agit comme un conteneur contenant des contrôleurs, des directives, des filtres, des expressions, etc. Elle enregistre ou démarre l'application ou le module.
- Il n'existe qu'une seule ng-app dans votre Html. Sous une seule application ng, il peut y avoir plusieurs ng-controller.
Cela instancie un objet d'application avec le service $ rootScope.
- Ainsi, les variables / fonctions $ rootScope sont accessibles dans une application complète.
4. ng-model
- ng-model est utilisé pour lier les données html à l'objet modèle. Il fournit une liaison bidirectionnelle.
5. ng-if
- Pour exécuter des instructions conditionnelles sur les balises Html, ng-if est utilisé. Si la condition devient fausse, le DOM n'inclut pas cette div sur DOM.
6. ng-bind
- Au lieu d'utiliser (()) pour l'interpolation, ng-bind peut également être utilisé.
7. ng-disabled
- En fonction d'une condition, un élément de la vue peut être désactivé.
8. ng-show
- Si la condition donnée pour ng-show est vraie, alors l'élément particulier est affiché sur le DOM.
9. ng-hide
- Si la condition donnée pour ng-hide est vraie, alors l'élément particulier restera caché dans le DOM.
10. ng-repeat
- Il répètera la div ou la plage particulière en Html avec la longueur du tableau ou de la liste fournie.
11. ng-click
- Lors d'un événement de clic sur l'élément html, il effectuera la fonctionnalité ou la tâche fournie.
Astuce: La meilleure façon d'apprendre une langue est de la coder. Voyons donc notre premier code.
Exemples de version AngularJS
Voici quelques exemples donnés ci-dessous
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
Production:
Prénom: Joseph
Nom: Alex
Votre nom est: Joseph Alex
Il y a quelques points à se concentrer à partir de l'extrait de codage ci-dessus:
- À la ligne 3, un fichier angular.min.js est ajouté à la page qui chargera toutes les bibliothèques requises pour exécuter l'application AngularJS.
- AngularJS possède principalement 2 bibliothèques angular.js et une version compressée de ce fichier sous angular.min.js.
- À la ligne 5, vous pouvez voir la directive comme ng-app qui est ignorée par Html lors de la création du DOM Html et reprise par AngularJS comme l'une de ses directives pour démarrer l'application.
- A la ligne 6, 7, un modèle ng est utilisé qui liera le texte que vous entrerez dans la zone de texte aux variables fname et lname. N'oubliez pas que ces variables sont sensibles à la casse.
- À la ligne 8, vous voyez l'expression ((fname + ”“ + lname)) qui angulaire évaluera et affichera les données que vous entrez dans les zones de texte. C'est ce qu'on appelle l'interpolation.
Explorons par un autre exemple:
var app = angular.module('CustomerApp', ());
controller('firstController', function($scope)(
$scope.customerName = 'Joe';
$scope.customerAge = '26';
));
Prénom:
Nom de famille:
Le nom du client est ((customerName)) et l'âge est ((customerAge))
Dans cet exemple, à la ligne 5, une application est créée avec le nom CustomerApp qui comprendra toutes les parties de l'application. À la ligne suivante, un contrôleur est créé et est nommé FirstController. $ scope est déclaré comme paramètre de fonction. AngularJS l'injectera automatiquement dans l'application pour une utilisation directe, le développeur n'a pas à le créer explicitement.
Cette fonctionnalité est appelée injection de dépendance. De manière similaire, le contrôleur ng est utilisé pour le même contrôleur sous la balise ng-app. N'oubliez pas que la portée de l'application ou du contrôleur sera l'endroit où se termine la div ou tout ce dans lequel vous définissez une application ou un contrôleur. Dans ce cas, vous ne pouvez pas accéder au contrôleur ou à l'application après la ligne 16.
Articles recommandés
Ceci est un guide de la version d'AngularJS. Ici, nous discutons des versions d'AngularJS avec des directives, la portée et comment AngularJS fonctionne. Vous pouvez également consulter les articles suivants pour en savoir plus -
- Architecture AngularJS
- Application JS angulaire
- Tests unitaires AngularJS
- Carrière à AngularJS
- Qu'est-ce que Angular 2?