Résumé des connaissances communes pour démarrer avec AngularJS-js tutoriel-php.cn

Résumé des connaissances communes pour démarrer avec AngularJS

巴扎黑

Libérer： 2017-07-23 15:07:36

original

1439 Les gens l'ont consulté

Avant-propos

Apprenons AngularJS avec vous aujourd'hui...

AngularJS utilise de nouveaux attributs et expressions. le format étend le HTML.

AngularJS peut créer une application d'une seule page.

AngularJS est très facile à apprendre.

1. Instructions et expressions AngularJS
一、AngularJS指令与表达式

[Instructions communes AngularJS]
1. ng-app : déclare la zone régie par Angular, généralement écrite dans le corps ou en HTML. En principe, il n'y en a qu'une par page.
2.ng-model : liez la valeur de l'élément (telle que la valeur du champ de saisie) à la variable d'application.
par exemple :
3. est lié à la vue HTML et peut être remplacé par des expressions.
par exemple :

Équivalent à

4. ng-init : initialiser les variables d'application AngularJS.
par exemple :
5. Expression : {{} } Expression de liaison, qui peut contenir des littéraux, des opérateurs et des variables.
Mais l'expression verra {{}} lorsque la page Web sera chargée, vous pouvez donc utiliser ng-bind="" à la place.
par exemple :{{ 5 + "" + 5 + ',Angular' }}

[Concept de base]
Directive : Dans AngularJS, la fonctionnalité est fournie en étendant les attributs HTML.
Ainsi, les nouveaux attributs commençant par ng- sont appelés instructions par nous.

二、AngularJS中的MVC中的作用域

2. Portée dans MVC dans AngularJS

[Architecture MVC à trois niveaux]
1. Modèle :
La partie de l'application utilisée pour traiter les données. (Enregistrer ou modifier les données dans la base de données, les variables, etc.). Le modèle dans AngularJS fait spécifiquement référence à : les données.
Affichage : la page que l'utilisateur voit pour afficher les données.
Contrôleur : la partie de l'application qui gère l'interaction de l'utilisateur. Responsable de la lecture des données de la vue, du contrôle des entrées de l'utilisateur et de l'envoi des données au modèle.

2. Principe de fonctionnement :
L'utilisateur envoie une requête depuis la couche de visualisation. Après avoir reçu la requête, le contrôleur la transmet au modèle correspondant. traitement et revient une fois le traitement du modèle terminé. Le résultat est donné au contrôleur et renvoyé à l'utilisateur au niveau de la couche View

3. Créez un module angulaire, qui est. la partie liée par ng-app Deux paramètres doivent être passés :
①Nom du module : le nom auquel ng-app doit être lié, ng-app="myApp"
②Array : Le nom du module qui doit être injecté, pas besoin d'être nul.
eg:var app=angular.module("myApp",[]);

Sur le module Angular, créez un contrôleur Controller, requis Pass deux paramètres.
①Nom du contrôleur, c'est-à-dire le nom auquel ng-controller doit être lié. ng-controller="myCtrl"
②Constructeur de Controllerd : le constructeur peut transmettre plusieurs paramètres, y compris $scope/$rootScope et divers objets intégrés au système

[Scope in AngularJS]
①$scope : la portée locale, les propriétés et les méthodes déclarées sur $scope ne peuvent être utilisées que dans le contrôleur actuel
②$ rootScope : portée racine, propriétés et méthodes déclarées sur $rootScope,
peuvent être utilisées dans n'importe quelle zone incluse dans ng-app (que ce soit avec Controller ou non, ou qu'elle soit dans la portée du Controller )

>>> Si $scope n'est pas utilisé pour déclarer des variables et que la portée de la variable liée à l'aide de ng-model directement en HTML est :
1. Si ng-model est dans un ng-controller, cette variable sera liée par défaut au $scope du contrôleur actuel
2. ng-controller, cette variable sera liée à $rootScope.

3. Filtre AngularJS

三、AngularJS过滤器

Dans AngularJS, des filtres peuvent être ajoutés aux expressions et directives à l'aide d'un caractère barre verticale (|).

>>> Filtre intégré au système :
devise : formater les nombres au format monétaire.
filtre : sélectionnez un sous-ensemble parmi les éléments du tableau.
minuscule : formate la chaîne en minuscule.
orderBy : Organise le tableau selon une expression.
majuscule : formate la chaîne en majuscule.

par exemple :

【Filtre personnalisé】

1 .filter('reverse',function(){ //可以注入依赖2 return function(text){3 if(!angular.isString(text)){4 return "您输入的不是字符串！"5 }else{6 return text.split("").reverse().join("");7 }8 }9 })

Copier après la connexion

4. Opérations http && select && DOM dans AngularJS
四、AngularJS中的 http && select && DOM操作

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

2. Select
① dans AngularJS utilise un tableau comme source de données, où x représente chaque élément du tableau.
Par défaut, x sera directement lié à la valeur de l'option, et le contenu affiché par option est déterminé par le x précédent pour....
par exemple :

② Utilisez des objets comme sources de données, où (x, y) représente des paires clé-valeur, x est la clé et y est la valeur.
Par défaut, la valeur y sera liée à la valeur de option, et le contenu affiché par option est déterminé par le x précédent pour....
par exemple :

3. Opérations DOM dans AngularJS
①ng-disabled="true/false"
Lors du passage Quand vrai, le contrôle est désactivé. Lorsque false est transmis, activé.

Êtes-vous d'accord
Xiaoxi est trop mignonne !