interface Web
js tutoriel
Que savez-vous de l'introduction de base à AngularJS ? Voici une introduction détaillée à Angularjs
Que savez-vous de l'introduction de base à AngularJS ? Voici une introduction détaillée à Angularjs
Cet article présente une brève introduction au niveau intermédiaire sur angularjs, présente les applications Web d'une seule page, trois méthodes de modèles, $scope, scope, traversée, autres instructions, demande de donnéesjqLite, $regarder, $appliquer. Ensuite, lisons cet article ensemble
Caractéristiques des applications monopage : L'ensemble du site Web est constitué d'une seule page, la partie publique n'est chargée qu'une seule fois et l'actualisation partielle Ajax est utilisée pour atteindre l'objectif. but du changement de page Lorsque la page passe à un écran blanc, le point d'ancrage et la page correspondent à application Web d'une seule page.
Scénario : Les applications d'une seule page ne sont pas conviviales pour les moteurs de recherche et ne conviennent pas aux systèmes de gestion backend de sites Web à affichage public, Office OA, applications hybrides et autres applications qui n'ont pas besoin d'être recherchées par les moteurs de recherche
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<body ng-app="myApp">
<a href="#!/index">首页</a>
<a href="#!/list">列表页</a>
<div ng-view></div>
</body>
<script>
var app=angular.module('myApp',['ngRoute'])
app.config(function($routeProvider){
$routeProvider
.when('/index',{
templateUrl:'./tpl/index.html',
controller:'indexCtrl'
})
.when('/list',{
templateUrl:'./tpl/list.html',
controller:'listCtrl'
})
.otherwise('/index')
});
app.controller('indexCtrl',function($scope){
$scope.msg="我是首页msg"
})
app.controller('listCtrl',function($scope){
$scope.msg="我是列表页msg"
}) </script>Trois modèles méthodes
<script>
templateUrl:'./tpl/index.html'//localhost
template:'<div>我是首页</div>'//file|localhosst
template:'indexTpl'//file|localhosst</script>$scope
Il existe de nombreux paramètres qui peuvent être transmis, vous n'avez pas besoin de les écrire un par un
Dans Angularjs Le passage des paramètres ne peut pas s'appuyer sur l'ordre mais sur le nom
Si le nom du paramètre formel change, Angularjs ne saura pas quoi faire
Solution : écrire un tableau comme deuxième paramètre, et placez la fonction de rappel dans le tableau
Pendant la compression, la chaîne ne sera pas compressée, donc la chaîne est passée dans le tableau pour déterminer l'ordre des paramètres
<script>
angular.module("myApp",[]).controller("demoCtrl",["$scope","$timeout","$http","$location",function(a,b,c,d){
a.msg="我是msg"
}]) </script>Portée
Principe de proximité du scope
La zone contrôlée par le contrôleur dans angularjs est une scope locale,
c'est-à-dire que $scope représente la portée locale
$rootScope représente la portée globale
Les variables sont d'abord recherchées le long de $scope Si elles ne sont pas trouvées, recherchez globalement
<. 🎜>Vous pouvez monter des méthodes d'attribut public
Traverse
ng-repeat="Élément actuel dans les données pendant la boucle" et générer l'élément DOM actuel <ul>
<li ng-repeat="item in arr">{{item}}</li>
</ul>
{{person.name}}{{person.age}}
{{item}}
数组项重复，会报错
<ul>
<li ng-repeat="item in arr track by $index">{{item}}</li>
</ul>其他指令
ng-class="{'类名1':布尔值,'类名2':布尔值}"专门用来添加或者删除类名，接收的值是一个对象，布尔值为真，添加类名，布尔值为假，删除类名
复选框，ng-model用来获取复选框的值，是一个布尔值
ng-bind="数据"，将msg放到属性中进行加载，避免出现闪烁效果
ng-bind-template="{{数据1}} {{数据2}}"
ng-non-bindable直接得到插值表达式中的内容，只要与属性相关，都不执行
ng-show="布尔值"，控制元素的显示和隐藏
ng-hide="布尔值"，控制元素的显示和隐藏
ng-if="布尔值"，控制元素的显示和隐藏 true 显示 false 隐藏
ng-switch&ng-switch-when用法和switch-case类似
事件指令
onclick => ng-click
onmouseenter => ng-mouseenter
onchange => ng-change
ng-dblclick 双击事件
ng-src没有src就不会解析就不会报错，直到angularjs加载完成，解析ng-src之后再生成src
ng-href同上
ng-options用来循环下拉列表，不能单独使用，需要配合ng-model一起使用
请求数据
要请求数据需要先引入js文件
引入的js文件作为依赖文件，控制器中必须写入$http
$http-->请求的地址，相当于jQuery中的ajax
method-->type请求的方式
params-->data只用于get传参
data可以用于post传参
$http点then后面是两个回调函数
第一个回调函数是成功回调
第二个回调函数是失败回调
res是形参，表示请求回来的数据
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-sanitize.min.js"></script>
<script>
angular.module('myApp',['ngSanitize'])
.controller('demoCtrl',['$scope','$http',function($scope,$http){
$http({ url:'./test.json', method:'post',//请求方式
params:{//get传参
a:1, b:2
}, data:{ c:3, d:4
}
}).then(function(res){ //成功回调
console.log(res)
},function(){ //失败回调
}) //另外一种写法
$http.get('./test.json',{params:{a:1,b:2}}).then(function(res){ //get方式传参
console.log(res)
})
$http.post('./test.json',{c:3,d:4}.then(function(res){ //post方式传参
console.log(res)
})
}]) </script>jqLite
为了方便DOM操作，angularjs提供了一个jQuery精简版，叫做jqLite
$(原生的JS对象)将原生JS对象转换成jQuery对象，目的是为了使用jQuery对象下面提供的方法
angularjs.element(原生JS对象)将原生JS对象转换成jqLite对象，目的是为了使用jqLite对象下面提供的方法
这里angularjs.element相当于jQuery中的$
jqLite中方法的使用和jQuery高度相似
$watch
$watch用来监控数据的变化
第一个参数是要监控的数据，第二个参数是回调函数
回调函数中第一个参数newValue是用户输入的最新内容，第二个参数oldValue是上一次用户输入的内容
页面一上来的时候，回调函数会先执行一次
<script>
$scope.$watch('val',function(newValue,oldValue){ if(newValue.length>10){
$scope.tips="大于10";
}else{
$scope.tips="小于10"
}
}) </script>$apply
当通过原生JS将angularjs中的数据做了改变以后，angularjs不知道，所以需要调用$apply()方法通知angularjs更新html页面
以上就本篇关于angularjs简历的中级篇文章了，下一篇终极的在后面，大家期待吧，想学更多关于angularjs的相关知识就到PHP中文网angularjs参考手册栏目中学习。
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
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
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
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,
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.
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.
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é
