Support de cours complet avec exemples pour demarrer avec Angular JS

Table des matières

À propos 1

Chapitre 1: Démarrer avec AngularJS 2

Remarques 2

Versions 2

Examples 9

 Commencer 9

 Présentation de toutes les constructions angulaires courantes 11

 L'importance de la portée 12

 Le plus simple possible Angular Hello World. 14

ng-app 14

Directives 14

 Minification en angulaire 15

 AngularJS Pour commencer Didacticiels vidéo 16

Chapitre 2: Angulaire MVC 19

Introduction 19

Examples 19

 La vue statique avec contrôleur 19

démo mvc 19

Définition de la fonction de contrôleur 19

Ajout d'informations au modèle 19

Examples  20

Angularjs affiche les données avec filtre, pagination  20

Chapitre 4: AngularJS des pièges et des pièges  21

Examples  21

La liaison de données bidirectionnelle cesse de fonctionner  21

Exemple  21

Choses à faire lors de l'utilisation de html5Mode  22

7 péchés capitaux d'AngularJS  23

Chapitre 5: Chargement paresseux 28

Remarques 28

Examples 28

 Préparer votre projet pour un chargement paresseux 28

 Usage 28

 Utilisation avec routeur 29

UI-Router: 29 ngRoute: 29

 Utiliser l'injection de dépendance 29

 Utiliser la directive 30

Chapitre 6: Comment fonctionne la liaison de données 31

Remarques 31

Examples 31

 Exemple de liaison de données 31

Chapitre 7: Composants 34

Paramètres 34

Remarques 35

Examples 35

Composants de base et crochets LifeCycle  35

Qu'est-ce qu'un composant?  35

Utilisation de données externes dans le composant: 35

Utilisation des contrôleurs dans les composants 36

Utiliser "require" comme objet 37

 Composants en JS angulaire 37

Chapitre 8: Contrôleurs 39

Syntaxe 39

Examples 39

 Votre premier contrôleur 39

 Création de contrôleurs 41

 Créer des contrôleurs, sécuriser la minification 41

L'ordre des dépendances injectées est important 41

 Utilisation de contrôleurs dans JS angulaire 42

 Création de contrôleurs angulaires sécuritaires 43

 Contrôleurs imbriqués 44

Chapitre 9: Contrôleurs avec ES6 45

 Examples 45

 Manette 45

Chapitre 10: Décorateurs 46

 Syntaxe 46

 Remarques 46

 Examples 46

 Décorer service, usine 46

 Directive décorer 47

 Décorer le filtre 48

Chapitre 11: Demande $ http 49

 Examples 49

 Utiliser $ http dans un contrôleur 49

 Utiliser la requête $ http dans un service 50

 Calendrier d'une requête $ http 51

Chapitre 12: Des filtres 53

 Examples 53

 Votre premier filtre 53

 Javascript 53

 HTML 54

 Filtre personnalisé pour supprimer des valeurs 54

 Filtre personnalisé pour formater les valeurs 54

 Effectuer un filtre dans un tableau enfant 55

 Utilisation de filtres dans un contrôleur ou un service 56

 Accéder à une liste filtrée depuis l'extérieur d'une répétition 57

Chapitre 13: Des promesses angulaires avec le service $ q 58

Examples58

 Utiliser $ q.all pour gérer plusieurs promesses 58

 Utiliser le constructeur $ q pour créer des promesses 59

 Report des opérations en utilisant $ q.defer 60

 Utiliser des promesses angulaires avec le service $ q 60

 Utiliser des promesses sur appel 61

 Propriétés 61

 Enveloppez la valeur simple dans une promesse en utilisant $ q.when () 63

 $ q.when et son alias $ q.resolve 63

 Évitez les $ q Anti-Pattern différé 64

 Éviter ce anti-pattern 64

Chapitre 14: digestion en boucle 65

 Syntaxe 65

 Examples 65

 liaison de données bidirectionnelle 65

$ digest et $ watch 65 l'arbre $ scope 66

Chapitre 15: directive classe ng 69

 Examples 69

 Trois types d'expressions de classe ng 69

1. ficelle 69
2. objet 69
3. tableau 70

Chapitre 16: Directives intégrées 71

 Examples 71

 Expressions angulaires - Texte vs Nombre 71

 ngRépéter 71

 ngShow et ngHide 75

ngOptions 76 ngModèle 78 ngClass 79

 ngIf 79

JavaScript 80

Vue 80 DOM si currentUser n'est pas currentUser 80

DOM si currentUser est currentUser 80

Promesse de fonction 80

ngMouseenter et ngMouseleave 81

ngDisabled 81 ngDblclick 82

Directives intégrées Cheat Sheet 82

ngClick 84

ngRequired 85

ng-model-options 85

ngCloak 86

ngInclude 86

ngSrc 87

ngPattern 87 ngValue 87 ngCopy 88

Empêcher un utilisateur de copier des données 88

ngPaste 88 ngHref 88 ngList 89

Chapitre 17: Directives sur mesure 91

Introduction 91

Paramètres  91

Examples  93

Création et consommation de directives personnalisées  93

Modèle d'objet de définition de directive  94

Exemple de directive de base 95

Comment créer des composants utilisables à l'aide de directives  96

Directive de base avec modèle et une portée isolée 98

Construire un composant réutilisable  99

Décorateur de directive  100

 Héritage de directive et interopérabilité 101

Chapitre 18: Directives utilisant ngModelController  103

Examples  103

Un contrôle simple: note  103

Un couple de contrôles complexes: éditer un objet complet 105

Chapitre 19: Distinguer Service vs Usine 109

Examples 109

 Usine VS Service une fois pour toutes 109

Chapitre 20: Événements 111

Paramètres 111

Examples 111

 Utiliser un système d'événements angulaires 111

$ scope. $ emit 111

$ scope. $ broadcast 111

Syntaxe: 112

Evénement enregistré propre à AngularJS 112

Usages et signification 113

Toujours désinscrire $ rootScope. $ Sur les écouteurs de l'événement scope $ destory 115

Chapitre 21: Filtres personnalisés116

Examples 116

 Exemple de filtre simple 116

  116

Production attendue  116

Utiliser un filtre dans un contrôleur, un service ou un filtre 116

Créer un filtre avec des paramètres  117

Chapitre 22: Filtres personnalisés avec ES6 118

Examples  118

Filtre FileSize utilisant ES6  118

Chapitre 23: Fonctions d'assistance intégrées  120

 116 Examples 120

angular.equals 120

angular.isString 120

angular.isArray 121

angular.merge 121

 angular.isDefined et angular.isUndefined 121

angular.isDate 122

angular.isNumber 122

 angular.isFunction 123

angular.toJson 123

angular.fromJson 124

angular.isObject 125

angular.isElement 125

copie angulaire 125

angular.identity 126

chaque 126

Chapitre 24 : Fournisseurs 128

Syntaxe 128

Remarques 128

Examples 128

 Constant 128

 Valeur 129

 Usine 129

 Un service 130

 Fournisseur 130

Chapitre 25 : Impression 132

Remarques 132

Examples 132

 Service d’impression 132

Chapitre 26 : Injection de dépendance 134

Syntaxe 134

Remarques 134

Examples  134

Les injections 134

Injections dynamiques  135

$ inject Propriété Annotation 135

Charger dynamiquement le service AngularJS en JavaScript vanilla  135

Chapitre 27: Intercepteur HTTP  137

Introduction  137

Examples  137

Commencer  137

HttpInterceptor générique pas à pas  137

Message Flash sur la réponse à l'aide de l'intercepteur http 138

Dans le fichier de vue 138

Fichier de script  139

Pièges communs  139

Chapitre 28: Le débogage  141

Examples  141

Débogage de base dans le balisage  141

Utilisation de l'extension chrome ng-inspect 142

Obtenir la portée de l'élément  145

Chapitre 29: Le moi ou cette variable dans un contrôleur  147

Introduction147

Examples 147

 Comprendre le but de la variable auto 147

Chapitre 30: Les constantes 149

Remarques 149

Examples 149

Créez votre première constante  149

Cas d'utilisation  149

Chapitre 31: Migration vers Angular 2+  152

Introduction  152

Examples  152

Conversion de votre application AngularJS en une structure orientée composants 152

Commencez à décomposer votre application en composants Qu'en est-il des contrôleurs et des routes?  152

Et après? 154

Conclusion 155

Présentation des modules Webpack et ES6 155

Chapitre 32: Modules 156

Examples 156

 Modules 156

 Modules 156

Chapitre 33: ng-repeat 158

Introduction 158

Syntaxe 158

Paramètres 158

Remarques 158

Examples 158

 Itération sur les propriétés de l'objet 158

 Suivi et doublons 159

 ng-repeat-start + ng-repeat-end 159

Chapitre 34: ng-style 161

Introduction 161

Syntaxe 161

Examples 161

 Utilisation de style ng 161

Chapitre 35: ng-view 162

Introduction 162

Examples 162 ng-view 162

 Enregistrement de navigation 162

Chapitre 36: Options de liaisons AngularJS (`=`, `@`, `&` etc.) 164

Remarques164

Examples 164

 @ liaison unidirectionnelle, liaison d'attribut. 164

 = liaison bidirectionnelle. 164

 & liaison de fonction, liaison d'expression. 165

 Liaison disponible via un échantillon simple 165

 Attribut facultatif de liaison 166

Chapitre 37: Partage de données 167

Remarques 167

Examples  167

Utiliser ngStorage pour partager des données  167

Partage de données d'un contrôleur à un autre en utilisant le service  168

Chapitre 38: Portées angulaires  169

Remarques  169

Examples  169

Exemple de base de l'héritage $ scope  169

Éviter d'hériter des valeurs primitives  169

Une fonction disponible dans toute l'application  170

Créer des événements $ scope personnalisés  171

Utiliser les fonctions $ scope 172

Comment pouvez-vous limiter la portée d'une directive et pourquoi le feriez-vous?  173

Chapitre 39: Préparez-vous à la production - Grunt 175

Examples  175

Afficher le préchargement  175

Optimisation de script  176

Chapitre 40: Prestations de service  179

Examples  179

Comment créer un service  179

Comment utiliser un service  179

Créer un service avec angular.factory  180

$ sce - assainit et rend le contenu et les ressources dans des modèles  180

Comment créer un service avec des dépendances en utilisant la "syntaxe de tableau"  181

Enregistrement d'un service  181

Différence entre service et usine  182

Chapitre 41: Profilage de performance 186

Examples 186

 Tout sur le profilage 186

Chapitre 42: Profilage et performance 189

Examples 189

 7 améliorations simples de la performance 189

1) Utilisez ng-repeat avec parcimonie 189

2) Lier une fois 189

3) Les fonctions de portée et les filtres prennent du temps 190

4 spectateurs 191

5) ng-if / ng-show 192

6) Désactiver le débogage 192

7) Utiliser l'injection de dépendance pour exposer vos ressources 192

 Lier une fois 193

 Fonctions et filtres de portée 194

 Observateurs 194

 Alors, qu'est-ce que l'observateur? 195

 ng-if vs ng-show 196

ng-if 196

ng-show 197 Exemple 197

Conclusion 197

 Structure du répertoire 199

Trier par type (à gauche) 199

Trier par élément (à droite) 200

Chapitre 44: Routage à l'aide de ngRoute 202

Remarques 202

Examples  202

Exemple de base  202

Exemple de paramètres de route  203

Définir un comportement personnalisé pour des itinéraires individuels  205

Chapitre 45: SignalR avec AngularJs  207

Introduction  207

Examples  207

SignalR et AngularJs [ChatProject]  207

Chapitre 46: Stockage de session  211

Examples  211

Gestion du stockage de session via le service à l'aide d'angularjs  211

Service de stockage de session:  211

Dans le contrôleur:  211

Chapitre 47: Tâches Grunt  212

Examples  212

Exécutez l'application localement  212

Chapitre 48: Tests unitaires  215

Remarques  215

Examples  215

Unité teste un filtre  215

Unité teste un composant (1.5+)  216

Unité teste un contrôleur  217

Unité teste un service 217

Unité teste une directive  218

Chapitre 49: ui-routeur  220

Remarques  220

Examples  220

Exemple de base  220

Vues multiples  221

Utilisation des fonctions de résolution pour charger des données  223

 Vues imbriquées / États 224

Chapitre 50: Utilisation de directives intégrées 226

Examples 226

Masquer / Afficher les éléments HTML  226

Chapitre 51: Utiliser AngularJS avec TypeScript  228

Syntaxe  228

Examples  228

Contrôleurs angulaires en caractères dactylographiés  228

Utilisation du contrôleur avec la syntaxe ControllerAs  229

 Utilisation de groupage / minification 230

 Pourquoi la syntaxe ControllerAs? 231

Fonction du contrôleur 231

Pourquoi les contrôleurs? 231

Pourquoi $ scope 232

Chapitre 52: Validation de formulaire 233

Examples 233

 Validation de formulaire de base 233

 États de formulaire et d'entrée 234

Classes CSS 234 ngMessages 235

Approche traditionnelle 235

Exemple 235

Validation de formulaire personnalisé 236

Formulaires imbriqués 236

Validateurs asynchrones 237

Crédits 238

À propos

You can share this PDF with anyone you feel could benefit from it, downloaded the latest version from: angularjs

It is an unofficial and free AngularJS ebook created for educational purposes. All the content is extracted from , which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official AngularJS.

The content is released under Creative Commons BY-SA, and the list of contributors to each chapter are provided in the credits section at the end of this book. Images may be copyright of their respective owners unless otherwise specified. All trademarks and registered trademarks are the property of their respective company owners.

Use the content presented in this book at your own risk; it is not guaranteed to be correct nor accurate, please send your feedback and corrections to

Chapitre 1: Démarrer avec AngularJS

Remarques

AngularJS est un framework d’application Web conçu pour simplifier le développement d’applications côté client. Cette documentation concerne , le prédécesseur de Angular plus moderne, ou la documentation de Stack Overflow pour Angular 2 .

Versions

Version	Date de sortie
1.2.28	2014-12-16
1.3.7	2014-12-15
1,3.6	2014-12-09
1.3.5	2014-12-02
1.3.4	2014-11-25
1.2.27	2014-11-21
1.3.3	2014-11-18
1.3.2	2014-11-07
1.3.1	2014-10-31
1.3.0	2014-10-14
1,3.0-rc.5	2014-10-09
1.2.26	2014-10-03
1.3.0-rc.4	2014-10-02
1.3.0-rc.3	2014-09-24
1.2.25	2014-09-17
1.3.0-rc.2	2014-09-17
1.2.24	2014-09-10
1.3.0-rc.1	2014-09-10
1.3.0-rc.0	2014-08-30
1.2.23	2014-08-23
1.3.0-beta.19	2014-08-23
1.2.22	2014-08-12
1.3.0-beta.18	2014-08-12
1.2.21	2014-07-25
1.3.0-beta.17	2014-07-25

Examples

Commencer

Créez un nouveau fichier HTML et collez le contenu suivant:

 Hello, Angular

 Name

 Hello, {{ name }}!

Démo en direct

Lorsque vous ouvrez le fichier avec un navigateur, vous verrez un champ de saisie suivi du texte Hello, World! . L'édition de la valeur dans l'entrée mettra à jour le texte en temps réel, sans avoir besoin de rafraîchir la page entière.

Explication:

1. Chargez la structure angulaire à partir d'un réseau de distribution de contenu.
2. Définir le document HTML en tant qu'application angulaire avec la directive ng-app
3. Initialiser la variable de name utilisant ng-init

Notez que ng-init doit être utilisé à des fins de démonstration et de test uniquement. Lors de la création d'une application réelle, les contrôleurs doivent initialiser les données.

4. Lier les données du modèle à la vue des contrôles HTML. Lier un à la propriété name avec ng-model
5. Afficher le contenu du modèle en utilisant des accolades doubles {{ }}

Hello, {{ name }}

6. Une autre manière de lier la propriété name consiste à utiliser ng-bind au lieu du guidon "{{

}}"

Les trois dernières étapes établissent la . Les modifications apportées à l'entrée mettent à jour le modèle , ce qui se reflète dans la vue .

Il y a une différence entre l'utilisation de guidons et de ng-bind . Si vous utilisez des guidons, vous pouvez voir le bon Hello, {{name}} lors du chargement de la page avant que l'expression ne soit résolue (avant le chargement des données) alors que si vous utilisez ng-bind , seules les données seront affichées. est résolu. Comme alternative, la directive ng-cloak peut être utilisée pour empêcher l'affichage des guidons avant leur compilation.

Présentation de toutes les constructions angulaires courantes

L'exemple suivant montre les constructions AngularJS courantes dans un fichier:

Chaque ligne du fichier est expliquée ci-dessous:

ng-app="myDemoApp" , l'application et indique à angular qu'un élément DOM est contrôlé par un angular.module spécifique nommé "myDemoApp" ;

{{ 'Hello' + 'World' }}

J'ai maintenant demandé à l'élément body d'être le template racine. Tout ce qu'il contient sera compilé.

Directives

Les directives sont des directives de compilation. Ils étendent les capacités du compilateur Angular DOM. C'est pourquoi Misko , le créateur d'Angular, décrit Angular comme:

"Un navigateur Web aurait été conçu pour les applications Web.

Nous créons littéralement de nouveaux attributs et éléments HTML et les compilons dans une application. ng-app est une directive qui active simplement le compilateur. Les autres directives incluent:

• • ng-click , qui ajoute un gestionnaire de clic,
• • ng-hide , qui cache conditionnellement un élément, et qui ajoute un comportement supplémentaire à un élément de formulaire HTML standard.

Bas du formulaire

Angular est livré avec environ 100 directives intégrées qui vous permettent d'accomplir les tâches les plus courantes. Nous pouvons également écrire les nôtres, et ceux-ci seront traités de la même manière que les directives intégrées.

Nous construisons une application Angular à partir d'une série de directives, reliées par HTML.

Minification en angulaire

Qu'est-ce que la minification?

C'est le processus de suppression de tous les caractères inutiles du code source sans changer sa fonctionnalité.

Syntaxe normale

Si nous utilisons une syntaxe angulaire normale pour écrire un contrôleur, après avoir minifié nos fichiers, cela va casser notre fonctionnalité.

Contrôleur (avant minification):

var app = angular.module('mainApp', []);

app.controller('FirstController', function($scope) {

 $= 'Hello World !';

});

Après avoir utilisé l'outil de minification, il sera minifié comme ci-dessous.

var app=angular.module("mainApp",[]);app.controller("FirstController",function(e){e.name= 'Hello World !'})

Ici, la minification a supprimé les espaces inutiles et la variable $ scope du code. Donc, lorsque nous utilisons ce code minifié, il ne va rien imprimer. Parce que $ scope est un élément crucial entre le contrôleur et la vue, qui est maintenant remplacé par la petite variable "e". Donc, lorsque vous exécutez l'application, elle va donner une erreur de dépendance "e" au fournisseur inconnu.

Il y a deux manières d'annoter votre code avec des informations de nom de service qui sont sécurisées par minification:

Syntaxe d'annotation en ligne

var app = angular.module('mainApp', []); app.controller('FirstController', ['$scope', function($scope) {

 $scope.message = 'Hello World !';

}]);

Syntaxe d'annotation de propriété $ inject

Après minification, ce code sera

var app=angular.module("mainApp",[]);app.controller("FirstController",["$scope",function(a){a.message="Hell

World !"}]);

Ici, angular considérera la variable 'a' comme étant $ scope, et affichera la sortie 'Hello World!'.

AngularJS Pour commencer Didacticiels vidéo

Lire Démarrer avec AngularJS en ligne:

Chapitre 2: Angulaire MVC

Introduction

Dans AngularJS, le modèle MVC est implémenté en JavaScript et en HTML. La vue est définie en HTML, tandis que le modèle et le contrôleur sont implémentés en JavaScript. Il existe plusieurs manières de regrouper ces composants dans AngularJS, mais la forme la plus simple commence par la vue.

Examples

La vue statique avec contrôleur

démo mvc

Bonjour le monde

Définition de la fonction de contrôleur

var indexController = myApp.controller("indexController", function ($scope) {

 // Application logic goes here

});

Ajout d'informations au modèle

var indexController = myApp.controller("indexController", function ($scope) {

 // controller logic goes here

 $scope.message = "Hello Hacking World"

});

Lire Angulaire MVC en ligne:

Chapitre 3: angularjs avec filtre de données, pagination, etc.

Introduction

Exemple de fournisseur et requête sur les données d'affichage avec filtre, pagination, etc. dans Angularjs.