Comment utiliser AngularJS ? Introduction détaillée à l'utilisation d'angularjs

Cet article parle principalement des détails d'utilisation de angularjs. Il contient quelques brèves descriptions fonctionnelles d'angularjs. Voyons maintenant ensemble

.

Récemment, AngularJS a été utilisé dans le projet, je l'ai étudié pendant le week-end et je l'ai partagé avec tout le monde.

1. Brève introduction à AngularJS
La documentation officielle d'AngularJS le présente ainsi.
Entièrement écrit à l'aide de la technologie côté client JavaScript. Fonctionne avec d'autres technologies Web traditionnelles (HTML, CSS
et JavaScript) pour rendre le développement d'applications Web plus facile et plus rapide que jamais.
AngularJS rend le développement d'applications Web très simple, tout en réduisant la difficulté de créer des applications complexes. Il fournit une série de fonctionnalités avancées que les développeurs utilisent souvent dans les applications Web modernes, telles que :
Découplage de la logique d'application, des modèles de données et des vues
Service Ajax
Injection de dépendances
Historique de navigation (crée des signets ; et les boutons avant et arrière fonctionnent comme dans les applications Web normales);
Tests
Plus de fonctionnalités.

2. Structure du répertoire Angularjs
La dernière version est angulaire2.0, qui est assez différente de angulaire1.x. La version que j'utilise est la version 1.3.

Lors de l'utilisation des fonctions de base, il vous suffit d'importer le fichier angulaire.js ou angulaire.min.js. D'autres fichiers js sont des fonctions séparées d'angularjs, comme angulaire-route.js, qui est un fichier de script sur le routage. Dans la version 1.2, il n'est pas nécessaire d'écrire un fichier angulaire-route.js distinct pour utiliser le routage, mais après la version 1.3. , le chemin d'utilisation doit importer angulaire-route.js séparément

3. Angularjs utilise essentiellement

pour créer un projet Web (à l'aide de Hbuilder) et importer le js file

Les principales fonctionnalités de base d'AngularJs : liaison de données modulaire MVC, balises sémantiques (instructions), injection de dépendances, etc.
MVC
Le concept de base de MVC est de séparer le code qui gère les données (modèle), le code logique de l'application (contrôleur) et le code qui affiche les données (vue).
Dans les applications angulaires, la vue est le DOM, le contrôleur est JavaScript et les données du modèle sont stockées dans les propriétés de l'objet.

J'ai écrit un petit exemple :

Code HTML

Code JS

Dans ce cas, ng-app est une directive angulaire (généralement toutes les directives commençant par ng- dans angulaire), qui est utilisée pour décrire que la page entière est propriétaire de l'application angulaire. {{msg}} Il est utilisé pour afficher des données sur la page. Vous pouvez également utiliser ng-bind pour lier des données et les afficher sur la page.

Liaison de données bidirectionnelle
Dans le framework js traditionnel, il mélange le code html avec les données et l'envoie à l'utilisateur Lorsqu'il est affiché, Angular peut mapper certaines parties de l'interface utilisateur aux propriétés JavaScript, puis les laisser se synchroniser elles-mêmes. C'est ce qu'on appelle la liaison de données :

I. Je viens d'ajouter la phrase au code ci-dessus. Ensuite, je constaterai que lorsque le contenu de la zone de texte change, les informations dans la vue changeront automatiquement sans moi. ajout d'opérations d'événement dans le code. Cette fonctionnalité s'applique également aux mises à jour du serveur. (Si vous souhaitez en savoir plus, rendez-vous sur le site PHP chinois Manuel de développement AngularJS)

Modularisation
Dans le code ci-dessus , j'ai déclaré une fonction globale demo1Controller dans le fichier js. Dans le développement js, il n'est pas recommandé de définir des fonctions ou des variables globales. Cela pollue l'espace global. En angulaire je peux utiliser le module (modularisation pour résoudre ce problème)
J'ai modifié le code ci-dessus comme suit :
Code HTML

,

Code JS

Le résultat de l'exécution du code est inchangé, mais j'ai défini un module via angulaire.module. Angular.module("myapp",[ ]), le "[ ]" derrière indique si le module myapp actuel est lié à d'autres modules. S'il n'est pas lié, vous n'avez pas besoin d'écrire de code dans [ ], mais [ ] Il faut qu'il existe. S'il n'existe pas, sa signification est différente.
Remarque : tout dans Angularjs commence par des modules.

Injection de dépendances
Dans le code ci-dessus, tout le monde doit avoir une question : qui a créé le $scope que j'ai utilisé dans le code js et pourquoi puis-je l'utiliser ? En fait, tout se fait en s'appuyant sur l'injection de dépendances fournie par angulaire. J'ai déjà été exposé au concept d'injection de dépendances lors de l'apprentissage de Spring, mais dans le développement front-end, c'est la première fois que j'utilise l'injection de dépendances.
AngularJS utilise $injetor (service d'injection) pour gérer les requêtes de dépendances et l'instanciation.
En fait, $injetor est responsable de l'instanciation de tous les composants dans AngularJS, y compris les modules d'application, les directives et les contrôleurs. Au moment de l'exécution, $injetor sera chargé d'instancier n'importe quel module au démarrage et de transmettre toutes les dépendances dont il a besoin. En développement, ce que j'apprends le plus est de transmettre les paramètres là où c'est nécessaire.
L'injection dans Angularjs est généralement divisée en trois types :
Injection inférentielle

Injection d'affichage (injection d'annotation)

Injection en ligne (injection en ligne)

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site PHP chinoisAngularJS Manuel d'utilisation pour apprendre), 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!