interface Web
js tutoriel
Comment utiliser Angularjs ? Analyse détaillée des exemples de framework AngularJS (avec exemples complets)
Comment utiliser Angularjs ? Analyse détaillée des exemples de framework AngularJS (avec exemples complets)
Cet article présente un résumé des points de connaissance du framework de angularjs, avec des exemples complets et des explications détaillées des balises complètes. Ensuite, lisons cet article ensemble
1 AngularJSQu'est-ce que c'est ?
Il s'agit d'un framework front-end développé par Google avec une structure MVC. Dans l'application Angular, la couche de vue est DOM et le contrôleur est JavaScript Classe, les données du modèle sont stockées dans les propriétés de l'objet.
2. Liaison de données
mappe une certaine partie de l'interface aux attributs de JavaScript , leur permettant de s'exécuter automatiquement. Synchronisation, cette méthode de programmation est la liaison de données. Il n'est pas nécessaire d'enregistrer un écouteur pour le champ, et les propriétés de l'objet et l'affichage de l'interface peuvent être modifiés de manière synchrone.
3. Injection de dépendances
Il n'est pas nécessaire de recréer l'objet, vous devrez utiliser l'objet $scope ou $loaction est injecté dans le constructeur comme suit. Il s’agit d’une injection de dépendance.
function HelloController($scope, $location) {
$scope.greeting = { text: 'Hello' };
// use $location for something good here...
}4. Directives
La couche centrale du framework dispose d'un puissant moteur de conversion DOM qui vous permet d'étendre Syntaxe HTML . Le ng-controller en HTML est utilisé pour spécifier quel contrôleur servir quelle vue, ng- model lie une zone de saisie à la pièce du modèle. Nous appelons cela des directives d’extension HTML .
5. Expliquez chaque balise selon l'exemple
<!DOCTYPE html>
<html ng-app>
<head>
<base/>
<title>Your Shopping Cart</title>
<script src="../frm/angular/angular.js"></script>
</head>
<body ng-controller='CartController'>
<h1 id="Your-nbsp-Order">Your Order</h1>
<p ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'/>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)"> Remove </button>
</p>
<script>
function CartController($scope) {
////@formatter:off
$scope.items = [{
title : 'Paint pots',
quantity : 8,
price : 3.95
}, {
title : 'Polka dots',
quantity : 17,
price : 12.95
}, {
Title : 'Pebbles',
quantity : 5,
price : 6.95
}];
////@formatter:on
$scope.remove = function(index) {
$scope.items.splice(index, 1);
};
}
</script>
</body>
</html>Suivez les ci-dessus le code, expliquez le contenu clé :
1)
ng-app L'attribut indique à Angular quelle partie de la page il doit gérer. Puisque nous l'avons mis sur l'élément html, il indique à Angular de gérer la page entière. Si vous intégrez Angular à une application existante qui utilise d'autres méthodes pour gérer les pages, vous devrez peut-être placer p<🎜 dans l'application >En haut.
2)
dans Angulaire < En 🎜>, la zone de page gérée par la classe JavaScript est appelée un contrôleur. En incluant un contrôleur dans la balise body, le CartController déclaré gérera le bodyTout ce qui se trouve entre les balises. 3
)ng-repeat représente les éléments copiez chaque élément du tableau une fois dans ce p. DOM. Dans chaque copie de p, un attribut appelé item est défini pour représenter l'élément actuel, nous pouvons donc l'utiliser. Comme vous pouvez le constater, chaque p contient le nom du produit, la quantité, le prix unitaire, le prix total et un bouton de suppression. 4) {{item.title}} Comme démontré 'Hello World', la liaison de données consiste à insérer la valeur de la variable dans une certaine partie de la page via {{ }} Restez synchronisé. L'expression complète {{item.title}} récupère l'élément actuel dans l'itération, puis définit la valeur de l'attribut titre de l'élément actuel Insérez dans DOM. 5) ng-model Définition Création d'une liaison de données entre le champ de saisie et item.quantity. span{{ dans la balise
}} établit une connexion unidirectionnelle, insérez la valeur ici. Mais l’application doit savoir que lorsque l’utilisateur modifie la quantité, il peut modifier le prix total, ce que nous souhaitons. En utilisant ng-model nous garderons les modifications synchronisées avec notre modèle. ng-model déclare que la valeur de item.quantity sera insérée dans la zone de saisie chaque fois que l'utilisateur entre une nouvelle valeur. , il sera automatiquement mis à jour item.quantity. 6) {{item.price | monnaie}} Nous souhaitons que le prix unitaire soit formaté en USD. Angular est livré avec une fonctionnalité appelée filtres qui nous permet de convertir du texte, il existe un filtre appelé devise qui fera ce formatage en dollars pour nous. 7) Cliquez sur ce bouton pour appeler la fonction remove(). En même temps, $index est transmis, qui contient l'ordre d'itération de ng-repeat pour savoir quel élément supprimer. 8)function CartController($scope) { CartController Gérer la logique de ce panier. Grâce à cela, nous disons à Angular que le contrôleur a besoin d'un objet appelé $scope . $scope est utilisé pour lier des données aux éléments de l'interface. 9）$scope.remove = function(index) { $scope.items.splice(index, 1); }; 我们希望 remove()函数能够绑定到界面上，因此我们也把它增加到$scope中。对于这 个内存中的购物车版本，remove()函数只是从数组中删除了它们。因为通过ng-repeat创建 的这些 是数据捆绑的，当某项消失时，列表自动收缩。记住，无论何时用户点击移除 按钮中的一个，都将从界面上调用 remove()函数。（想看更多就到PHP中文网AngularJS开发手册中学习） 6. 调用 Angular 任何应用使用 Angular 必须做两件事： 1）加载 angular.js 2）使用 ng-app告知Angular管理哪一部分的DOM 7. 加载脚本 很简单： 推荐使用 Google 的CDN。Google的服务器是非常快的，脚本是跨应用缓存的。那就是说，如果你的用户有多个使用Angular的应用，它只下载一次。同样，如果用户访问过使用Google Angular的CDN链接，那么当他访问你的站点时没有必要再次下载。 8. 模块 在这个模板中，我们告知 ng-app 元素我们的模块名，myApp。然后我们调用了Angular对象创建一个名为myApp的模块，传递了控制器函数给模块的控制器函数。 只要记住，远离全局命名空间是一件好事。模块化这是我们通用的机制。 9. 模板和数据绑定 Angular 应用中的模板只是那些我们从服务器加载的 HTML文档或者是定义在
Application basée sur l'IA pour créer des photos de nu réalistes Outil d'IA en ligne pour supprimer les vêtements des photos. Images de déshabillage gratuites Dissolvant de vêtements AI Générez AI Hentai gratuitement. Éditeur de code facile à utiliser et gratuit Version chinoise, très simple à utiliser Puissant environnement de développement intégré PHP Outils de développement Web visuel Logiciel d'édition de code au niveau de Dieu (SublimeText3)<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<html ng-app='myApp'>
<body ng-controller='TextController'>
<p>{{someText.message}}</p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script>
var myAppModule = angular.module('myApp', []);
myAppModule.controller('TextController',
function($scope) {
var someText = {};
someText.message = 'You have started your journey.';
$scope.someText = someText;
});
</script>
</body>
</html>
Outils d'IA chauds
Undresser.AI Undress
AI Clothes Remover
Undress AI Tool
Clothoff.io
AI Hentai Generator
Article chaud
Outils chauds
Bloc-notes++7.3.1
SublimeText3 version chinoise
Envoyer Studio 13.0.1
Dreamweaver CS6
SublimeText3 version Mac
Sujets chauds
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é
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
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
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,
Comment utiliser PHP et AngularJS pour le développement front-end
May 11, 2023 pm 05:18 PM
Avec la popularité et le développement d’Internet, le développement front-end est devenu de plus en plus important. En tant que développeurs front-end, nous devons comprendre et maîtriser divers outils et technologies de développement. Parmi eux, PHP et AngularJS sont deux outils très utiles et populaires. Dans cet article, nous verrons comment utiliser les deux outils pour le développement front-end. 1. Introduction à PHP PHP est un langage de script open source populaire côté serveur. Il convient au développement Web et peut fonctionner sur des serveurs Web et divers systèmes d'exploitation. Les avantages de PHP sont la simplicité, la rapidité et la commodité
Comment utiliser AngularJS en programmation PHP ?
Jun 12, 2023 am 09:40 AM
Avec la popularité des applications Web, le framework front-end AngularJS est devenu de plus en plus populaire. AngularJS est un framework JavaScript développé par Google qui vous aide à créer des applications Web dotées de fonctionnalités d'application Web dynamiques. En revanche, pour la programmation backend, PHP est un langage de programmation très populaire. Si vous utilisez PHP pour la programmation côté serveur, utiliser PHP avec AngularJS apportera des effets plus dynamiques à votre site Web.
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
Introduction aux bases d'AngularJS
Apr 21, 2018 am 10:37 AM
Le contenu de cet article concerne l'introduction de base à AngularJS. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer.
