Menu

Directive AngularJS avec notre premier exemple AngularJS

  • Principal
  • Autre
  • Directive AngularJS avec notre premier exemple AngularJS

angularjs directive with our first angularjs example

Essayez Notre Instrument Pour Éliminer Les Problèmes

Directive AngularJS avec le premier exemple AngularJS:

Nous avions un brève introduction à AngularJS dans notre tutoriel précédent. Ce tutoriel vous expliquera les faits importants que vous devez savoir sur AngularJS.

AngularJS est un framework d'application Web open source basé sur JavaScript.

Il est maintenu par Google Corporation et une grande communauté. AngularJS est une réponse aux différents inconvénients rencontrés pour formuler des applications monopages.

Lisez notre Toute la série AngularJS pour une connaissance approfondie du concept AngularJS.

questions et réponses d'entretien de sélénium webdriver pour pdf expérimenté

Directive et exemple AngularJS

Le cadre d'application AngularJS agit comme un modèle et peut réduire les défis auxquels sont confrontés lors du développement d'applications Web.

Ce que vous apprendrez:

Présentation d'AngularJS

AngularJS a été publié par Google le 20eOctobre 2010, et aujourd'hui, il est devenu un cadre important pour diverses applications d'interface d'une seule page.

C’est la raison pour laquelle AngularJS a tenu bon malgré le développement technologique à un rythme effréné. Le système basé sur une interface multiplateforme le rend également plus efficace.

AngularJS complète et profite à Apache Cordova, qui est un framework utilisé pour les applications mobiles multiplateformes. Il a pour vision d'améliorer l'expérience et de simplifier les tests et le développement des applications Web et fournit un cadre robuste pour leur développement d'applications AngularJS.

Pourquoi utiliser AngularJS?

Vous trouverez ci-dessous les différentes fonctionnalités et raisons pour lesquelles AngularJS doit être utilisé dans le développement d'applications Web.

  1. Liaison de données: La plate-forme fournit une synchronisation automatique des données entre le modèle et le contenu de la vue et, par conséquent, vous permet d'économiser votre temps et vos efforts dans une large mesure.
  2. Manette: Ce sont du JavaScript lié à une portée particulière.
  3. Prestations de service: AngularJS a de nombreux services intégrés. Par exemple $ https
  4. Filtres: Cela permet de sélectionner un sous-ensemble d'éléments dans un tableau et de le renvoyer dans un nouveau tableau.
  5. Directives: Ce sont des marqueurs sur les éléments DOM tels que les attributs, les éléments CSS, etc. Ils peuvent être utilisés comme balises personnalisées de HTML.
  6. Routage: Aide à créer des applications d'une seule page. Il est spécifié dans l'URL après le signe # et vous permet de créer différentes URL pour différents contenus dans votre application.
  7. MVC: Signifie modèle, vue et contrôleur. Il s'agit d'un modèle de conception et est utilisé pour la division d'une application en différentes parties, c'est-à-dire, modèle, vue et contrôleur.
  8. Lien profond: Cette fonctionnalité du framework d'application vous aide à encoder l'état de l'application dans l'URL pour la création de signets. Plus tard, l'application peut également être restaurée à partir de l'URL dans le même état.
  9. Injection de dépendance: AngularJS dispose également d'un sous-système d'injection de dépendances intégré qui peut être utile pour le développeur pour rendre le processus de développement et de test plus facile, cohérent et direct.
  10. Portée: Ce sont les objets qui agissent comme un lien entre le contrôleur et la vue.

Comment utiliser AngularJS?

Personnellement, je pense qu'il n'y a guère de meilleur cadre de développement d'applications Web frontales disponible sur le marché aujourd'hui que AngularJS.

Les didacticiels sur l'utilisation d'AngularJS ne sont pas d'une complexité frustrante, et je les ai également trouvés assez faciles à suivre. Vous pouvez également profiter d'un système de liaison bidirectionnel, des fonctionnalités de création de modèles, de la modularisation, du système d'injection de dépendances, de la fonction de gestion AJAX et des autres fonctionnalités de ce framework.

Avant de commencer le codage, vous devez connaître le concept MVC (modèle, vue et contrôleur), le script «Hello World» et les différentes fonctionnalités d'AngularJS.

Directives AngularJS

AngularJS vous fournit un grand nombre de directives qui vous permettent d'associer les différents éléments HTML aux données d'application. Ce sont les attributs de base qui commencent par le mot-clé ng- .

La directive la plus importante que vous devez inclure sur n'importe quelle page lorsque vous utilisez AngularJS est donnée ci-dessous.

ng-app -

C'est le point de départ de l'application AngularJS et doit être ajouté à tout élément qui enveloppe la partie restante de la page, comme l'élément de partie du corps. AngularJS recherche cet aspect chaque fois que la page se charge et a tendance à évaluer automatiquement toutes les différentes directives du code.

Les directives d'AngularJS incluent:

# 1) ng-app :Ceci est utilisé pour démarrer l'application AngularJS. Lorsque la page Web contenant l'application AngularJS est chargée, elle démarre automatiquement l'application en définissant l'élément racine. Une seule directive ng-app doit être utilisée dans votre code HTML.

Cependant, si plus d'une directive ng-app se trouve dans le code HTML, la première apparence sera utilisée.

Syntaxe:

{body of the HTML code}

# 2) de chaleur :Ceci est utilisé pour initialiser l'application.

Il fournit un ensemble de valeurs qui doivent être associées à des variables à des fins d'initialisation. Cette directive n'est pas souvent utilisée car l'initialisation des variables se produit généralement via des fonctions spécifiques au sein du projet.

Syntaxe:

# 3) ng-contrôleur: Il est utilisé lorsque l'initialisation des variables doit être effectuée sur la base d'une fonction; c'est-à-dire que chacune des variables doit être initialisée sur la base de la logique de fonction. AngularJS appelle la fonction spécifiée dans la directive ng-controller avec un objet.

Syntaxe:

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

# 4) ng-modèle :Ceci est utilisé pour lier les valeurs d'AngularJS aux contrôles fournis par l'application. Pour être précis, les données récupérées par l'entrée via le contrôleur et le modèle seront liées à la vue (w.r.t. modèle MVC) qui sera présentée à l'utilisateur.

Syntaxe:

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

ng-show et ng-hide: Ces commandes masquent et affichent les éléments, ce qui est obtenu en définissant le style d'affichage CSS.

AngularJS vous permet également de définir des directives personnalisées. Ils sont utilisés pour étendre les fonctionnalités du HTML et sont définis à l'aide de la fonction «directive». Ils remplacent simplement l'élément pour lequel ils sont activés.

L'AngularJS Cheat Sheet m'a sauvé la vie. Il existe un certain nombre d'autres directives que vous pouvez vérifier sur la feuille de triche. Vous pouvez même apprendre à créer des directives personnalisées via l'utilisation d'AngularJS. J'ai trouvé toutes les instructions et directives de la plate-forme AngularJS sur la feuille de triche pour simplifier de nombreux problèmes.

Exemple AngularJS

Un exemple simple AngularJS peut être écrit comme suit:

Vous devez créer un fichier HTML, Par exemple , angularjsexample.html comme indiqué ci-dessous.

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

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

Dans l'exemple ci-dessus, le script représente JavaScript AngularJS.

Vous seriez surpris de savoir combien d'applications que vous utilisez quotidiennement ont été développées sur la plate-forme AngularJS.

Voici quelques noms:

  • Le gardien
  • Pay Pal
  • jetBlue
  • Lego
  • Upwork
  • Netflix
  • Pigiste
  • iStock

Il ressort clairement des noms ci-dessus que la hauteur que vous pouvez atteindre en apprenant à utiliser ce cadre. Ces sites sont au sommet de leur forme, et une grande partie de leur succès est définitivement attribuable à l'efficacité des sites simplement parce qu'ils ont été développés sur AngularJS.

Conclusion

Si vous cherchez à créer et à développer des applications d'une seule page pour mobile ou même des sites Web, comme j'étais autrefois, ne cherchez pas plus loin.

AngularJS est un guichet unique pour vous, car ce site aide et rend le développement d'applications beaucoup plus confortable et cohérent. Ce n'est pas seulement idéal pour les débutants, mais au fur et à mesure que vous vous y plongerez, vous aurez tendance à apprendre avec de l'expérience et à développer d'excellentes applications.

En attendant, si vous passez à des versions plus récentes, vous n’avez pas besoin de faire beaucoup d’efforts. En apprenant simplement quelques nouvelles commandes et en comprenant de nouvelles modifications, vous pouvez également commencer à développer des applications dans les nouvelles versions.

Regardez notre prochain tutoriel pour en savoir plus sur le développement d'applications Web à page unique à l'aide d'AngularJS.

Tutoriel PREV | Tutoriel SUIVANT

lecture recommandée

^