Comment apprendre en profondeur dans AngularJS ? La dernière expérience d'apprentissage d'introduction d'angularjs

Cet article porte sur l'expérience d'auto-apprentissage de angularjs Si vous voulez bien apprendre, lisez-en davantage sur les résultats d'apprentissage des autres, même si cela ne vous convient pas, si vous en lisez plus. , vous vous retrouverez certainement sur la route, lisons cet article maintenant

1 : Introduction à AngularJS

1. vers AngularJS : AngularJS est un framework JavaScript .

Les quatre idées fondamentales d'AngularJS : l'injection de dépendances, la modularisation, la liaison bidirectionnelle et les balises sémantiques.

2. Outils de développement et outils de débogage : sublime/webstorm ; périphérique à déboguer.

3. La première application web AngularJS : ①Introduisez le fichier angulaire.js ( js/angular.min.js ), utilisez La directive ng-app déclare les limites de gestion d'AngularJS.

②AngularJS Utilisation simple de la liaison bidirectionnelle : doubles accolades {{}}

③Commandes couramment utilisées : voir l'API officielle

④Déclarer dans : angulaire.module('app', [ ])

.controller('myctrl ' ,fonction($scope){

🎜> Autres définis avant le module js, myctrl est le nom de ng-controller, {{msg}}

2 : AngularJS avancé

1.

Conception et construction du MVC frontal AngularJS : Voir ④Le style d'écriture est un MVC simple 2. > L'instruction de liaison implémente la liaison de données bidirectionnelle

: ng-bind ou {{ }} (Remarque : comprenez la commande ng-clock) 3, Utilisation du contrôleur

: définir le contrôleur ; déclarer les variables dans le contrôleur ; utiliser ng-bind pour lier les données et afficher la portée du contrôleur ; 🎜> 4. Utilisation de variables et de méthodes dans $scope

: ①Définissez des méthodes sur $scope et effectuez des appels de liaison sur la page.

② Définissez des variables sur $scope et utilisez-les dans les méthodes : faites attention à la façon dont la méthode $scope est appelée.

3 : AngularJS Advanced - Utilisation des services et des instructions 1. Personnaliser un service Services :

① Il existe de nombreuses formes d'expression de services dans Angularjs, apprenez à utiliser les services dans Controller

②Dans Le les expressions de services dans AngularJS incluent : valeur, constante (constante), usine (équivalent au mode usine), services

2. Application des Services : Comment utiliser plusieurs partages données dans les contrôleurs

3. Utilisation des commandes courantes :

Liaison bidirectionnelle de données ng-bind (équivalent à {{ }});

ng-model lie le formulaire dans l'élément HTML to scope ;

ng-show affiche l'élément HTML spécifié lorsque l'expression est vraie, sinon il masque l'élément HTML spécifié ;

ng-hide masque l'élément HTML spécifié lorsque l'expression est vraie

ng-if l'ajoutera lorsque l'expression est vraie. Supprimez l'élément et affichez-le. Si faux, supprimez l'élément (supprimé du DOM)

ng-submit est utilisée pour exécuter la fonction spécifiée après la soumission du formulaire ;

ng-disabled L'instruction définit l'attribut désactivé du champ de saisie du formulaire (input, select ou textarea). Si l'expression renvoie vrai, le champ du formulaire est désactivé ; .

La directive ng-checkde est utilisée pour définir l'attribut checkde d'une case à cocher (case à cocher) ou d'un bouton radio (radio). Si true est renvoyé, il le sera. selected;

La directive ng-src remplace l'attribut src de l'élément > ng-herf

remplace l'attribut href de l'élément natif ; ng- class est utilisé pour lier dynamiquement une ou plusieurs classes CSS à des éléments HTML

; La directive ng-selected est utilisée pour définir l'attribut sélectionné de l'élément dans la liste 🎜>;

ng-change La directive est utilisée pour indiquer à AngularJS quoi faire lorsque la valeur d'un élément HTML change. doit être utilisé avec la directive ng-model . La directive

ng-change n'écrasera pas l'événement natif onchange Si cet événement est déclenché, ng-change Les expressions et les événements natifs onchange sont exécutés.

4. Utilisation des instructions communes ng-repeat : instruction Utilisé pour parcourir les éléments HTML un nombre de fois spécifié ( la collection doit être un tableau ou un objet) attributs uniques ($indice de tableau d'index, $first (si c'est le premier, il retournera vrai), $last) utilisez

Quatre : service intégré AngularJS - utilisation de $http

1.

Utilisez $http pour interroger les données MySql : Envoyez d'abord une requête $http et renvoyez les données MySQL au front-end via le langage de développement back-end.

2. Requête $http avec paramètres pour mettre en œuvre l'ajout, la suppression et la modification de la base de données : Cas

3 . Exemple d'autorisations de rôle utilisateur : Entraînez-vous simplement

Cinq : Advanced AngularJS - Utilisation de la directive

1. Directive pour personnaliser le composant HTML : signification et application de restrict (A : attribut, E : élément, C : nom de classe), utilisation de replace, utilisation de template

2. Plus d'utilisation nécessite de s'appeler entre les directives ; découvrez l'utilisation du lien

Six : Développement d'applications mobiles avec AngularJS

1. Front-end mobile Introduction au framework lonic ;

2. Introduction à Cordova : une plateforme front-end et un ensemble de codes peuvent être empaquetés avec elle pour devenir l'Android actuel et les plateformes IOS

3. Trouvez quelques cas sur Internet pour vous entraîner

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