Résumé des connaissances de base d'Angularjs et exemples_AngularJS

angularjs est un framework de développement mvc front-end haut de gamme développé par Google.

Site officiel d'Angularjs : https://angularjs.org/ Le site officiel a une démo, l'accès peut nécessiter FQ

Communauté chinoise Angularjs : http://www.angularjs.cn/ Convient aux débutants

Fichier de référence : https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js

Soyez prudent lorsque vous utilisez angulaire

Citer la bibliothèque angulaire js : https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1.... Vous pouvez la télécharger depuis le github des exemples dans cette rubrique
Vous devez ajouter ng-app="appName" dans la zone que vous utilisez, ou directement ng-app (global).
Définissez le contrôleur ng-controller="Ctrl".
Veuillez noter les points suivants lors du test de l'exemple

Vous devez introduire le code angulairejs avant head. L'auteur utilise angulaire-1.0.1.min.js. Veuillez faire attention à la différence de version.
Tous les petits exemples sont exécutés dans les domaines suivants. N'oubliez pas d'ajouter ng-app dans la portée.
Ce qui suit utilise quelques petits cas pour illustrer les instructions communes par défaut et l'utilisation d'angularjs.

Programme Hello World (double liaison de données)

Utilisez ng-model={{name}} pour lier les données

Copier le code Le code est le suivant :

name:

---

bonjour :{{name || 'liteng'}}

http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html

Un petit cas d'utilisation de la liaison d'événements

Copier le code Le code est le suivant :

Prix ​​unitaire :
Quantité :

Prix ​​total : {{(prix) * (quantité)}}

Remarque :

Entrée impliquant html5 : http://www.w3school.com.cn/ html5 /att_input_type.asphttp://www.w3school.com.cn/html5/att_input_type.asp>

ng-init : définir la valeur initiale

http://2.liteng.sinaapp.com/angularjsTest/event-bind.html

ng-init : les valeurs d'attribut peuvent être spécifiées par défaut

Copier le code Le code est le suivant :

{{value}}

http://2.liteng.sinaapp.com/angularjsTest/ng-init.html

ng-repeat : utilisé pour itérer des données similaires à i pour info en js

Copier le code Le code est le suivant :

J'ai {{friends.length}} amis. Ce sont

• 
  [{{$index 1}}] : l'âge de {{friend.name}} est : {{friend.age}}
  

http://2.liteng.sinaapp.com/angularjsTest/ng-repeat.html

ng-click:événement de clic dom

Copier le code Le code est le suivant :

{{a}}

<script> Fonction ctrl($scope){<br> $scope.a='bonjour';<br> $scope.showMsg=fonction(){<br>           $scope.a='world';<br> ><br> ><br> </script>

http://2.liteng.sinaapp.com/angularjsTest/ng-click.html

ng-show : Définir l'affichage des éléments

Remarque : ng-show="!xx" : Ajoutez devant la valeur de l'attribut ! Indique une confirmation de l'affichage, s'il n'est pas ajouté ! En cas de doute, ne pas afficher

Copier le code Le code est le suivant :

ng-show="!show"

ng-show="show"

http://2.liteng.sinaapp.com/angularjsTest/ng-show.html

ng-hide : définir l'élément à masquer

Copier le code Le code est le suivant :

ng-hide="aaa"

ng-show="!aaa"

http://2.liteng.sinaapp.com/angularjsTest/ng-hide.html

Utilisez ng-show pour créer un effet bascule

Copier le code Le code est le suivant :

basculer

Afficher le logo

" alt="">

http://2.liteng.sinaapp.com/angularjsTest/ng-toggle.html

ng-style : similaire au style par défaut

Veuillez faire attention au format d'écriture ici : la chaîne doit être placée entre guillemets

Copier le code Le code est le suivant :

boîte

http://2.liteng.sinaapp.com/angularjsTest/ng-style.html

filtre : champ de filtre

Copier le code Le code est le suivant :

{{9999|numéro}}

!--9 999-->

{{9999 1 |number:2}}

{{9*9|currency}}

{{'bonjour tout le monde' | majuscule}}

http://2.liteng.sinaapp.com/angularjsTest/filter.html

ng-template : le modèle peut être chargé

Copier le code Le code est le suivant :

tpl.html

Copier le code Le code est le suivant :

bonjour

http://2.liteng.sinaapp.com/angularjsTest/show-tpl.html

$http : Une méthode de type ajax fonctionne bien

Copier le code Le code est le suivant :

Méthode de requête HTTP 1

          
• 
  {{x.Name}} {{x.Country}}
                                                                                   

Méthode 2

         
• 
  {{y.aid}} {{y.title}}
                                                                                   

<script><br> //Méthode 1<br> var TestCtrl=fonction($scope,$http){<br>         var p=$http({<br> Méthode : 'GET',<br>                                       <br>url:'json/date.json'<br><a href="'json/date.json'">           });</a>            p.success(function(response,status,headers,config){<br>                 $scope.names=response;<br>           });<br>            p.error(function(status){<br> console.log(statut);<br>           });<br> ><br> //Méthode 2<br> Fonction TestCtrl2($scope,$http){<br>            $http.get('json/yiqi_article.json').success(function(response){<br>                   $scope.info=response;<br>         });<br> ><br> </script>

http://2.liteng.sinaapp.com/angularjsTest/ajax.html

Tous les codes ci-dessus : https://github.com/litengdesign/angularjsTest

Démo implémentée : http://2.liteng.sinaapp.com/angularjsTest/index.html

Quant au routage (routeur) et à la directive (directive) d'angularjs, j'en parlerai séparément la prochaine fois.