Comment apprendre AngularJs ? L'introduction la plus complète aux connaissances d'Angularjs

Cet article présente une explication détaillée sur la façon d'apprendre angularjs Il contient de nombreux points de connaissances que vous avez peut-être oubliés. Lisez-le maintenant pour vous en souvenir. Commençons à lire cet article maintenant

Angular Js est un framework Javascript, qui est une bibliothèque écrite en Javascript.
Le module AngularJS (Module) définit les applications AngularJS.
Le contrôleur AngularJS (Controller) est utilisé pour contrôler les applications AngularJS.
La directive ng-app définit l'application et ng-controller définit le contrôleur.
AngularJS étend le HTML
AngularJS étend le HTML via ng-directives. La directive
ng-app définit une application AngularJS. La directive
ng-model lie les valeurs des éléments (telles que la valeur d'un champ de saisie) à l'application.
La directive ng-bind lie les données de l'application aux vues HTML.
AngularJS utilise des expressions pour lier les données au HTML
Qu'est-ce qu'AngularJS ?
AngularJS facilite le développement d'applications modernes à page unique (SPA : Single Page Applications).
AngularJS lie les données de l'application aux éléments HTML.
AngularJS peut cloner et répéter des éléments HTML.
AngularJS peut masquer et afficher des éléments HTML.
AngularJS peut ajouter du code "derrière" des éléments HTML.
AngularJS prend en charge la validation des entrées.
Les directives AngularJS sont des attributs HTML préfixés par ng.
La directive ng-init initialise les variables de l'application AngularJS.
HTML5 autorise les attributs étendus (faits maison), en commençant par data-.
Les attributs AngularJS commencent par ng-, mais vous pouvez utiliser data-ng- pour rendre la page valide pour HTML5.
Les expressions AngularJS sont écrites entre doubles accolades : {{ expression }}.
Les expressions AngularJS lient les données au HTML, ce qui est similaire à la directive ng-bind.
AngularJS "affichera" les données où l'expression est écrite.
Les expressions AngularJS ressemblent beaucoup aux expressions JavaScript : elles peuvent contenir des littéraux, des opérateurs et des variables.
Exemple {{ 5 + 5 }} ou {{ firstName + " " + lastName }}
Expression AngularJS et expression JavaScript
Semblable à l'expression JavaScript, l'expression AngularJS peut contenir des lettres, des opérateurs et des variables.
Contrairement aux expressions JavaScript, les expressions AngularJS peuvent être écrites en HTML.
Contrairement aux expressions JavaScript, les expressions AngularJS ne prennent pas en charge les jugements conditionnels, les boucles et les exceptions.
Contrairement aux expressions JavaScript, les expressions AngularJS prennent en charge les filtres.


Directives AngularJS


AngularJS étend le HTML avec de nouveaux attributs appelés directives.
AngularJS ajoute des fonctionnalités à votre application via des directives intégrées.
AngularJS vous permet de personnaliser les directives.
Les directives AngularJS sont des attributs HTML étendus, préfixés par ng-. La directive
ng-app initialise une application AngularJS. La directive ng-app indique à AngularJS que l'élément

est le "propriétaire" de l'application AngularJS.
La directive ng-init initialise les données de l'application. La directive
ng-model lie les valeurs des éléments (telles que la valeur d'un champ de saisie) à l'application. Directive


ng-app La directive
ng-app définit l'élément racine d'une application AngularJS. La directive
ng-app démarrera automatiquement (initialisera automatiquement) l'application lorsque la page Web est chargée.
Plus tard, vous apprendrez comment ng-app se connecte à un module de code via une valeur (telle que ng-app="myModule").


Directive ng-init La directive
ng-init définit les valeurs initiales pour les applications AngularJS.
Normalement, ng-init n'est pas utilisé. Vous utiliserez un contrôleur ou un module à sa place.


directive ng-model
directive ng-model Lie les éléments HTML aux données d'application. La directive
ng-model est utilisée pour lier les données de l'application aux valeurs du contrôleur HTML (input, select, textarea). La directive
ng-model peut également :
Fournir une validation de type (numéro, email, obligatoire) pour les données d'application.
Indiquez le statut (invalide, sale, touché, erreur) des données d'application.
Fournir des classes CSS pour les éléments HTML.
Liez les éléments HTML aux formulaires HTML.


Directive ng-repeat
La directive ng-repeat clonera l'élément HTML une fois pour chaque élément de la collection (tableau).


Créer des directives personnalisées
En plus des directives intégrées d'AngularJS, nous pouvons également créer des directives personnalisées.
Vous pouvez utiliser la fonction .directive pour ajouter des directives personnalisées.
Pour appeler une directive personnalisée, le nom de la directive personnalisée doit être ajouté à l'élément HTML.
Utilisez camelCase pour nommer une directive, runoobDirective, mais vous devez la diviser avec - lorsque vous l'utilisez, runoob-directive :

Utilisation restreinte
Vous pouvez restreindre votre directive pour qu'elle ne soit transmise que de manière spécifique appeler.
la valeur de restriction peut être l'une des valeurs suivantes :
E Utilisez
A comme nom d'élément Utilisez
C comme attribut Utilisez
M comme commentaire Utilisez
restrict Valeurs par défaut sont E et A, c'est-à-dire que l'instruction peut être appelée via le nom de l'élément et le nom de l'attribut.


Contrôleur AngularJS
Les applications AngularJS sont contrôlées par des contrôleurs. La directive
ng-controller définit un contrôleur d'application.
Les contrôleurs sont des objets JavaScript classiques, créés par des constructeurs d'objets JavaScript standard.


Filtres AngularJS
Les filtres AngularJS peuvent être utilisés pour transformer des données :
Filtre
Description
devise
Formate les nombres au format monétaire.
filtrer
Sélectionnez un sous-ensemble parmi les éléments du tableau.
minuscule
Formate la chaîne en minuscule.
orderBy
Ordonne un tableau en fonction d'une expression.
majuscule
Formater la chaîne en majuscule.
Des filtres peuvent être ajoutés aux expressions via un caractère barre verticale (|) et un filtre.


Service AngularJS
Dans AngularJS, vous pouvez créer votre propre service ou utiliser des services intégrés.


Qu'est-ce que le service ?
Dans AngularJS, un service est une fonction ou un objet qui peut être utilisé dans votre application AngularJS.
AngularJS possède plus de 30 services intégrés.
Il existe un service $location, qui peut renvoyer l'adresse URL de la page actuelle.


$http est un service principal d'AngularJS, utilisé pour lire les données des serveurs distants.


La directive ng-repeat boucle le code HTML dans un tableau pour créer une liste déroulante, mais la directive ng-options est plus adaptée à la création d'une liste déroulante. Elle contient les éléments suivants. avantages :
Options utilisant ng-options Un objet de ng-repeat est une chaîne. La directive


ng-show masque ou affiche un élément HTML. La directive
ng-disabled lie les données d'application "mySwitch" à l'attribut HTML désactivé. La directive
ng-model lie "mySwitch" au contenu (valeur) de l'élément de case à cocher d'entrée HTML.
Si mySwitch est vrai, le bouton sera désactivé :
La directive ng-hide est utilisée pour masquer ou afficher des éléments HTML.

La directive ng-click définit les événements de clic AngularJS.

Masquer les éléments HTML
La directive ng-hide est utilisée pour définir si la partie application est visible.
ng-hide="true" définit l'élément HTML pour qu'il soit invisible.
ng-hide="false" définit l'élément HTML pour qu'il soit visible.

La directive ng-show peut être utilisée pour définir si une partie de l'application est visible.
ng-show="false" peut rendre les éléments HTML invisibles.
ng-show="true" peut rendre visibles les éléments HTML.


Modules AngularJS

Les modules définissent une application.
Les modules sont des conteneurs pour différentes parties de votre application.
Les modules sont des conteneurs pour les contrôleurs d'application.
Les contrôleurs appartiennent généralement à un module.


Les fonctions globales doivent être évitées en JavaScript. Parce qu'ils peuvent facilement être écrasés par d'autres fichiers de script.
Le module AngularJS rend toutes les fonctions limitées à ce module, évitant ainsi ce problème.


Contrôle HTML
Les éléments d'entrée HTML suivants sont appelés contrôles HTML :
élément d'entrée
élément de sélection
élément de bouton
élément de zone de texte


La feuille de style préférée pour AngularJS est Twitter Bootstrap. Twitter Bootstrap est actuellement le framework front-end le plus populaire.

AngularJS Animation
AngularJS fournit des effets d'animation qui peuvent être utilisés avec CSS.
Pour utiliser l'animation dans AngularJS, vous devez importer la bibliothèque angulaire-animate.min.js.

Que fait ngAnimate ?
Les modèles ngAnimate peuvent ajouter ou supprimer des classes.
Le modèle ngAnimate ne peut pas animer les éléments HTML, mais ngAnimate surveillera les événements, tels que le masquage et l'affichage des éléments HTML. Si un événement se produit, ngAnimate utilisera une classe prédéfinie pour animer les éléments HTML.
Instructions AngularJS pour ajouter/supprimer des classes :
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
Les directives ng-if
ng-switch
ng-show et ng-hide sont utilisées pour ajouter ou supprimer la valeur de la classe ng-hide.
D'autres instructions ajouteront la classe ng-enter lors de la saisie du DOM, et l'attribut ng-leave sera ajouté lors de la suppression du DOM.
Lorsque la position de l'élément HTML change, la directive ng-repeat peut également ajouter la classe ng-move.
De plus, la collection de classes de l'élément HTML sera supprimée une fois l'animation terminée. Par exemple : La directive ng-hide ajoutera les classes suivantes :
ng-animate
ng-hide-animate
ng-hide-add (si l'élément sera masqué)
ng-hide -remove (si l'élément sera affiché)
ng-hide-add-active (si l'élément sera masqué)
ng-hide-remove-active (si l'élément sera affiché)


value
Value Est un simple objet javascript utilisé pour transmettre des valeurs au contrôleur (phase de configuration) :


factory
factory est une fonction utilisée pour renvoyer une valeur. Créé en cas de besoin par les services et les contrôleurs.
Habituellement, nous utilisons la fonction d'usine pour calculer ou renvoyer des valeurs.


fournisseur
Créer un service, une usine, etc. (phase de configuration) via un fournisseur dans AngularJS.
Le fournisseur fournit une méthode d'usine get(), qui est utilisée pour renvoyer valeur/service/usine.


constant
constant (constant) est utilisé pour transmettre des valeurs lors de la phase de configuration. Notez que cette constante n'est pas disponible lors de la phase de configuration.
mainApp.constant("configParam", "constant value");


Routage AngularJS
Le routage AngularJS nous permet d'accéder à différents contenus via différentes URL.
Une application Web (SPA) à page unique multi-vues peut être implémentée via AngularJS.
Habituellement, notre URL se présente sous la forme de http://runoob.com/first/page, mais dans les applications Web à page unique, AngularJS l'implémente via la balise # +.


La fonction config du module AngularJS permet de configurer les règles de routage. En utilisant configAPI, nous demandons que $routeProvider soit injecté dans notre fonction de configuration et utilisons $routeProvider.whenAPI pour définir nos règles de routage.
$routeProvider nous fournit la fonction when(path,object) & else(object) pour définir toutes les routes dans l'ordre. La fonction contient deux paramètres :
Le premier paramètre est l'URL ou la règle régulière de l'URL.
Le deuxième paramètre est l'objet de configuration de routage.

Objet de paramètres d'itinéraire
Le routage AngularJS peut également être implémenté via différents modèles.
Le premier paramètre de la fonction $routeProvider.when est l'URL ou la règle régulière d'URL, et le deuxième paramètre est l'objet de configuration de routage.


template :
Si nous devons uniquement insérer du contenu HTML simple dans ng-view, utilisez ce paramètre :
.when('/computers',{template:'This It's a page de catégorie d'ordinateur'})
templateUrl:
Si nous avons seulement besoin d'insérer le fichier modèle HTML dans ng-view, utilisez ce paramètre :
$routeProvider.when('/computers', {
templateUrl : 'views/computers.html',
});


Le code ci-dessus obtiendra le contenu du fichier view/computers.html du serveur et l'insérera dans ng-view .


contrôleur :
fonction, type chaîne ou tableau, la fonction du contrôleur exécutée sur le modèle actuel, générant une nouvelle portée.


controllerAs :
type de chaîne, spécifiez un alias pour le contrôleur.


redirectTo :
L'adresse redirigée.


résoudre :
Spécifiez les autres modules dont dépend le contrôleur actuel.

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois Manuel d'utilisation d'AngularJS pour en savoir plus). Si vous avez des questions, vous pouvez laisser un message ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!