Maison interface Web js tutoriel Résumé des connaissances de base d'Angularjs et exemples_AngularJS

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

May 16, 2016 pm 04:18 PM
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 :





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 :




<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.

Déclaration de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Tutoriel de base de PHP : du débutant au maître Tutoriel de base de PHP : du débutant au maître Jun 18, 2023 am 09:43 AM

PHP est un langage de script open source côté serveur largement utilisé qui peut gérer toutes les tâches de développement Web. PHP est largement utilisé dans le développement Web, notamment pour ses excellentes performances en matière de traitement dynamique des données, il est donc apprécié et utilisé par de nombreux développeurs. Dans cet article, nous expliquerons les bases de PHP étape par étape pour aider les débutants à devenir compétents. 1. Syntaxe de base PHP est un langage interprété dont le code est similaire au HTML, CSS et JavaScript. Chaque instruction PHP se termine par un point-virgule ;

Les 5 derniers tutoriels Angularjs en 2022, de l'entrée à la maîtrise Les 5 derniers tutoriels Angularjs en 2022, de l'entrée à la maîtrise Jun 15, 2017 pm 05:50 PM

Javascript est un langage tout à fait unique. Il est unique en termes d'organisation du code, de paradigme de programmation du code et de théorie orientée objet. La question de savoir si Javascript est un langage orienté objet a été débattue depuis un certain temps. Il y a évidemment une réponse depuis longtemps. Cependant, même si Javascript est dominant depuis vingt ans, si vous souhaitez comprendre les frameworks populaires tels que jQuery, Angularjs et même React, il suffit de regarder le « Black Horse Cloud Classroom JavaScript Advanced Framework ». Tutoriel vidéo de conception".

Utilisez PHP et AngularJS pour créer un site Web réactif afin d'offrir une expérience utilisateur de haute qualité Utilisez PHP et AngularJS pour créer un site Web réactif afin d'offrir une expérience utilisateur de haute qualité Jun 27, 2023 pm 07:37 PM

À l’ère de l’information d’aujourd’hui, les sites Web sont devenus un outil important permettant aux individus d’obtenir des informations et de communiquer. Un site Web réactif peut s’adapter à divers appareils et offrir aux utilisateurs une expérience de haute qualité, ce qui est devenu un point chaud dans le développement de sites Web modernes. Cet article expliquera comment utiliser PHP et AngularJS pour créer un site Web réactif afin d'offrir une expérience utilisateur de haute qualité. Introduction à PHP PHP est un langage de programmation open source côté serveur idéal pour le développement Web. PHP présente de nombreux avantages, tels que la facilité d'apprentissage, la multiplateforme, la riche bibliothèque d'outils et l'efficacité du développement.

Créer des applications Web en utilisant PHP et AngularJS Créer des applications Web en utilisant PHP et AngularJS May 27, 2023 pm 08:10 PM

Avec le développement continu d'Internet, les applications Web sont devenues un élément important de la construction de l'information d'entreprise et un moyen nécessaire au travail de modernisation. Afin de faciliter le développement, la maintenance et l'extension des applications Web, les développeurs doivent choisir un cadre technique et un langage de programmation adaptés à leurs besoins de développement. PHP et AngularJS sont deux technologies de développement Web très populaires. Ce sont respectivement des solutions côté serveur et côté client. Leur utilisation combinée peut considérablement améliorer l'efficacité du développement et l'expérience utilisateur des applications Web. Avantages de PHPPHP

Mar 22, 2024 pm 09:39 PM

Le langage Go est un langage compilé à typage statique développé par Google. Ses fonctionnalités concises et efficaces ont attiré l'attention et l'amour des développeurs. Dans le processus d’apprentissage du langage Go, la maîtrise des connaissances de base sur les variables est une étape cruciale. Cet article expliquera les connaissances de base telles que la définition, l'affectation et l'inférence de type de variables dans le langage Go à travers des exemples de code spécifiques pour aider les lecteurs à mieux comprendre et maîtriser ces points de connaissances. Dans le langage Go, vous pouvez utiliser le mot-clé var pour définir une variable, qui est le format du type de variable var nom de variable.

Introduction aux bases de PHP : Comment utiliser la fonction echo pour afficher du contenu textuel Introduction aux bases de PHP : Comment utiliser la fonction echo pour afficher du contenu textuel Jul 30, 2023 pm 05:38 PM

Introduction de base à PHP : Comment utiliser la fonction echo pour générer du contenu textuel. Dans la programmation PHP, vous devez souvent afficher du contenu textuel sur une page Web. Dans ce cas, vous pouvez utiliser la fonction echo. Cet article explique comment utiliser la fonction echo pour générer du contenu textuel et fournit un exemple de code. Avant de commencer, assurez-vous d'abord d'avoir installé PHP et configuré l'environnement d'exécution. Si PHP n'est pas encore installé, vous pouvez télécharger la dernière version stable sur le site officiel de PHP (https://www.php.net).

Utilisez PHP et AngularJS pour développer une plateforme de gestion de fichiers en ligne afin de faciliter la gestion des fichiers Utilisez PHP et AngularJS pour développer une plateforme de gestion de fichiers en ligne afin de faciliter la gestion des fichiers Jun 27, 2023 pm 01:34 PM

Avec la popularité d’Internet, de plus en plus de personnes utilisent le réseau pour transférer et partager des fichiers. Cependant, pour diverses raisons, l'utilisation de méthodes traditionnelles telles que FTP pour la gestion de fichiers ne peut pas répondre aux besoins des utilisateurs modernes. Par conséquent, la création d’une plateforme de gestion de fichiers en ligne facile à utiliser, efficace et sécurisée est devenue une tendance. La plate-forme de gestion de fichiers en ligne présentée dans cet article est basée sur PHP et AngularJS. Elle peut facilement effectuer des opérations de téléchargement, de modification, de suppression et autres, et fournit une série de fonctions puissantes, telles que le partage de fichiers, la recherche,

Explication détaillée des fonctions du langage C : analyse basique à avancée et complète de l'utilisation des fonctions Explication détaillée des fonctions du langage C : analyse basique à avancée et complète de l'utilisation des fonctions Feb 18, 2024 pm 02:25 PM

Encyclopédie des fonctions du langage C : de base à avancée, explication détaillée de la façon d'utiliser les fonctions, des exemples de code spécifiques sont nécessaires Introduction : Le langage C est un langage de programmation largement utilisé, et ses fonctions puissantes et sa flexibilité en font le premier choix de nombreux développeurs. En langage C, la fonction est un concept important. Elle peut combiner un morceau de code en un module indépendant, améliorant ainsi la réutilisabilité et la maintenabilité du code. Cet article présentera l'utilisation des fonctions du langage C à partir des bases et progressera progressivement pour aider les lecteurs à maîtriser les compétences d'écriture de fonctions. 1. Définition et appel de fonctions en C

See all articles