Qu'est-ce que AngularJS?

AngularJS est l'un des frameworks Web basés sur JavaScript les plus populaires utilisés dans le développement frontal. Il est utilisé dans le développement d'applications à page unique (SPA). AngularJS est un framework open source principalement géré par Google et par une communauté de personnes impliquées dans la résolution des problèmes rencontrés dans le développement d'applications sur une seule page. Dans cette rubrique, nous allons découvrir les directives AngularJS.

AngularJS n'est rien mais il étend le HTML existant; Il est ajouté dans la page HTML avec balise. AngularJS rend le site HTML plus réactif aux actions des utilisateurs en ajoutant facilement des attributs supplémentaires. La dernière version stable d'AngularJS est 1.6.x à partir de maintenant.

Directives d'AngularJS

AngularJS est un framework efficace qui prend en charge l'architecture basée sur Model-View-Controller (MVC). Il fournit des fonctionnalités de base telles que la liaison de données bidirectionnelle, le contrôleur, les services, les directives, les modèles, le routeur, les filtres, l'injection de dépendances, etc. Ce sont toutes les principales fonctionnalités qui fonctionnent en collaboration pour rendre AngularJS efficace.

La directive est l'une des fonctionnalités très utiles d'AngularJS. Il étend le code HTML existant et permet de développer facilement des pages Web avec un nouveau comportement en utilisant le noyau JavaScript. Il permet d'écrire nos propres balises personnalisées et de les mapper en HTML existant. Cette fonctionnalité donne plus de liberté et offre aux développeurs une grande flexibilité pour créer et utiliser des éléments personnalisés dans les applications Web en conséquence. Ils peuvent également concevoir leurs propres directives. Dans cet article, nous allons nous concentrer principalement sur les directives AngularJS et essayer d'acquérir des connaissances sur cette fonctionnalité principale.

Les directives ne sont que des marqueurs sur les éléments DOM en HTML tels que le nom d'attribut, le nom d'élément, la classe CSS ou le commentaire. Le compilateur d'AngularJS attache ensuite le comportement spécifié à cet élément. Chaque directive a un nom et commence par 'ng-'. Chaque directive peut décider où elle peut être utilisée dans les éléments DOM. Il existe certaines directives existantes qui sont déjà disponibles dans AngularJS et de la même manière, nous pouvons les définir nous-mêmes.

Nous verrons trois principales directives intégrées qui divisent le framework AngularJS en trois parties principales.

1. ng-app: Cette directive indique au compilateur qu'il s'agit de l'application AngularJS. La directive où elle est définie dans DOM devient l'élément racine de l'application. Par exemple



AngularJS est disponible sous forme de fichier JavaScript et est ajouté en HTML à l'aide d'une balise. L'élément ng-app at indique à AngularJS que div est l'élément racine et le propriétaire de l'application AngularJS. L'application AngularJS commence à partir de cet élément et tout ce qui est du code AngularJS est écrit à l'intérieur de celui-ci.

2. ng-model: Cette directive lie la valeur de la page Web, principalement du champ de saisie à la variable d'application. Fondamentalement, cette directive permet d'envoyer des données d'entrée à l'application AngularJS qui peut être utilisée ailleurs. Par exemple

Entrer:

La directive ng-model lie la valeur d'entrée à la variable d'application nommée «entrée». Nous verrons ensuite comment afficher la même valeur sur la page Web dans l'exemple suivant.

3. ng-bind: cette directive lie la valeur de l'application AngularJS à la page Web. c'est-à-dire qu'il permet de transférer des données de l'application vers des balises HTML. Par exemple

Entrer:

Les données que nous avons capturées à l'aide de la directive «ng-model» dans la variable d'application «input» sont liées à l'élément tag

en utilisant "ng-bind". Nous pouvons exécuter cette application maintenant et voir comment AngularJS met à jour dynamiquement la valeur entrée sur la page.

Parallèlement à cela, il existe d'autres directives disponibles dans AngularJS qui sont importantes.

4. ng-repeat: Cette directive répète un élément HTML et est utilisée sur un tableau d'objets. Cette directive est très utile dans des scénarios comme l'affichage d'éléments de tableau sur une page Web.

5. ng-init: Cette directive est utilisée pour initialiser les valeurs de l'application AngularJS avant qu'elle ne charge une page Web.

Création de nouvelles directives

nous pouvons créer nos propres directives personnalisées avec les directives AngularJS disponibles. Il est très facile de créer de nouvelles directives en utilisant uniquement JavaScript. De nouvelles directives sont créées en utilisant «. fonction «directive». Par exemple



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));

Angular.module est une fonction AngularJS qui crée un module. Nous avons créé une directive personnalisée nommée directive personnalisée pour laquelle la fonction est écrite. Chaque fois que nous utilisons cette directive sur notre page Web, cette fonction est exécutée. Dans ce cas, il s'agit d'un modèle de retour contenant du code HTML.

Pendant la directive de dénomination, nous devons utiliser la convention de dénomination des cas de chameau et en l'invoquant, nous devons utiliser la convention de dénomination séparée par «-».

Il y a quatre façons par lesquelles nous pouvons invoquer des directives,

Nom d'élément

Comme utilisé dans le dernier exemple:

Attribut

Classe

Pour invoquer la directive en utilisant le nom de classe, nous devons ajouter la propriété restrict avec la valeur 'C' lors de sa définition.

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

Commentaire

Pour invoquer une directive en utilisant un commentaire, nous devons ajouter la propriété restrict avec la valeur 'M' lors de sa définition.

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

La propriété replace: true est obligatoire et remplacera le commentaire d'origine par une directive sinon le commentaire serait invisible.

Conclusion - Directives AngularJS

Donc, Directive est une fonctionnalité très puissante disponible dans AngularJS. La directive permet d'introduire une nouvelle syntaxe, sont comme des marqueurs et nous permet de leur attacher un comportement spécial. Il existe des directives disponibles dans AngularJS qui sont très utiles, nous pouvons également définir nos propres directives personnalisées et les utiliser. Les directives personnalisées offrent aux développeurs une grande flexibilité et liberté. Les directives ajoutent de nouvelles fonctionnalités au HTML existant avec un style et des fonctionnalités innovants.

Articles recommandés

Ceci est un guide des directives AngularJS. Ici, nous discutons les trois principales directives intégrées qui divisent le framework AngularJS en trois parties principales. Vous pouvez également consulter les articles suivants pour en savoir plus -

  1. Versions de Html
  2. Cadres en Java
  3. Architecture AngularJS
  4. Styles de liste HTML

Catégorie:

Développement de logiciels