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

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 à

{{name}}

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 :

{{"aBcDeF"|uppercase}}

{{"aBcDeF"|minuscules}}

{{123456|currency}}

【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 })

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 !

Cliquez sur moi !

②ng-show
Affiché par défaut lorsque true est transmis dans

>
Spectacle ?

Cliquez sur moi !

③ng-hide
Par défaut Montrer que le vrai entrant est masqué

Est-il caché ?

Cliquez sur moi !

④ng-click
définit l'événement de clic dans AngularJS .
ne peut déclencher que des propriétés et des méthodes liées à la portée angulaire.

Cliquez sur moi !

{{ count }}

 

DOM操作附录：
eg:
先导入JS文件angular.js！！！

<script src="libs/angular.js?1.1.11"></script>

JS代码：

1 angular.module("app",[])2 .controller("ctrl",function($scope,$rootScope){3 $scope.count = 10;4 $scope.func = function(){5 alert("小希真萌！");6 }7 })

 

五、AngularJS中的表单验证

1、表单中常见的验证操作：
$dirty:表单有填写记录
$valid:字段内容合法的
$invalid:字段内容是非法的
$pristine:表单没有填写记录
$error:表单验证不通过的错误信息

2、验证时需给表单及需要验证的input，设置name属性；
给form及input设置name后，会将form表单信息，默认绑定到$scope作用域中，故可以使用formName.inputName.$验证操作 得到验证结果；
eg:
formName.inputName.$dirty="true" 表单被填写过
formName.inputName.$invalid="true" 表单输入不合法
formName.inputName.$error.required="true" 表单必填但未填
$error支持的验证有：required/minlength/maxlength/pattern/email/number/data
/url等……

3、为避免冲突，例如使用type="email"时，H5也会进行验证操作。
如果只想使用AngularJS验证，可以使用

属性，禁用H5自带验证功能。

 

六、AngularJS中的动画 

Utilisation de l'animation dans AngularJS :
fournit des effets d'animation et peut être utilisé avec CSS.

1. Pour utiliser l'animation dans AngularJS, vous devez introduire la bibliothèque angulaire-animate.js !

2. S'il n'y a pas de module personnalisé (ng-app) dans la page, vous pouvez directement lier le module système ng-app="ngAnimate"; S'il y a déjà un module personnalisé dans la page, vous pouvez injecter le module "ngAnimate" après le module personnalisé.
eg:angular.module("app",["ngAnimate"])

3. Lorsque les instructions pertinentes sont appelées pour contrôler l'affichage et masquage des éléments, il ajoutera automatiquement la classe correspondante

ng-show/ng-hide supprimera/ajoutera ng-hide
ng-if/ng- switch/ng- Pour d'autres instructions telles que la répétition, vous devez définir le style de classe après l'affichage et le masquer respectivement
Après l'affichage : .ng-enter-active,.ng-leave{}
Après masquage : .ng-enter,.ng-leave-active{}

7. Routage dans AngularJS

1. Chargez le fichier js qui implémente le routage : angulaire-route.js.

2. Contient le module ngRoute en tant que module dépendant du module d'application principal.
eg:angular.module("app",["ngRoute"])

3. Changez le lien hypertexte au format route :
par exemple :page1

4. Dans la configuration, injectez $routeProvider pour la configuration du routage :
$routeProvider
.when('/',{template:'Ceci est la page d'accueil'})
when(' /page1',{template:'Ceci est la page1'})
.when('/page2',{template:'Ceci est la page2'})
.when('/page3',{template:'This is page3'})
.otherwise({redirectTo:'/'});
})
5. Ajoutez ng-view à l'emplacement approprié sur la page pour héberger la page ouverte

ng-view>

[Attributs facultatifs dans l'objet de paramètre de routage]
1. modèle : modèle HTML personnalisé, qui sera être chargé dans ng-view
2.tempalteUrl : Importer un modèle HTML externe Afin d'éviter tout conflit avec du HTML externe, il vous suffit de conserver le code à l'intérieur du corps
3.redirectTo : rediriger vers une certaine page, généralement utilisée dans .otherwise();
4.controller : fonction de contrôleur exécutée sur le modèle actuel, générer une nouvelle portée

Les connaissances théoriques d'aujourd'hui seront d'abord partagées ici, j'espère que cela pourra vous aider~~~ Je suis un débutant, merci pour votre soutien !

Auteur : Xizhao Hope

Source :

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn