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

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

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

Puis-je apprendre Linux à partir de zéro ? Que dois-je apprendre ? Puis-je apprendre Linux à partir de zéro ? Que dois-je apprendre ? Feb 19, 2024 pm 12:57 PM

Si vous souhaitez travailler dans l'industrie informatique, mais souhaitez apprendre la programmation, quelle technologie devriez-vous choisir ? Bien sûr, il s'agit de l'exploitation et de la maintenance de Linux ? Linux est une technologie très populaire sur le marché, avec une large gamme d'applications et de bonnes perspectives d'emploi, et appréciée par de nombreuses personnes. La question est donc : puis-je apprendre le fonctionnement et la maintenance de Linux sans aucune base ? Sur le marché des serveurs, le système Linux détient une part de marché allant jusqu'à 80 % en raison de ses avantages tels que la stabilité, la sécurité, l'open source gratuit, l'efficacité et la commodité. De là, on peut voir que les applications Linux sont très populaires. Que ce soit maintenant ou dans le futur, apprendre Linux est un très bon choix. Quant à savoir s’il est possible d’apprendre à partir de zéro ? Ma réponse est bien sûr. Le cours en présentiel Oldboy Education Linux est spécialement conçu pour les personnes n'ayant aucune connaissance de base.

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

Créez une application Web d'une seule page à l'aide de Flask et AngularJS Créez une application Web d'une seule page à l'aide de Flask et AngularJS Jun 17, 2023 am 08:49 AM

Avec le développement rapide de la technologie Web, l'application Web à page unique (SinglePage Application, SPA) est devenue un modèle d'application Web de plus en plus populaire. Par rapport aux applications Web multipages traditionnelles, le plus grand avantage de SPA est que l'expérience utilisateur est plus fluide et que la pression de calcul sur le serveur est également considérablement réduite. Dans cet article, nous expliquerons comment créer un SPA simple à l'aide de Flask et AngularJS. Flask est un Py léger

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.

See all articles