interface Web
js tutoriel
Introduction à l'application de la fonction d'affichage d'AngularJS_AngularJS
Introduction à l'application de la fonction d'affichage d'AngularJS_AngularJS
AngularJS prend en charge les applications à page unique via plusieurs vues sur une seule page. Pour ce faire, AngularJS fournit les directives ng-view et ng-template, ainsi que le service $routeProvider.
ng-view
ng-view crée simplement un espace réservé pour une vue correspondante (vue HTML ou ng-template) qui peut être placée en fonction de la configuration.
Utilisez
Définissez une div et une ng-view dans le module principal.
<div ng-app="mainApp"> ... <div ng-view></div> </div>
ng-template
La directiveng-template est utilisée pour créer des vues HTML à l'aide de balises de script. Il contient un attribut "id" pour la vue du contrôleur mappée par $routeProvider.
Utilisez
Définissez le type en tant que bloc de script pour ng-template dans le module principal.
<div ng-app="mainApp">
...
<script type="text/ng-template" id="addStudent.html">
<h2> Add Student </h2>
{{message}}
</script>
</div>
$routeProvider
$routeProvider est une configuration qui regroupe les URL, les mappe à la page HTML ou au modèle ng correspondant et attache un contrôleur au service en utilisant la même clé.
Utilisez
Définissez le type en tant que bloc de script pour ng-template dans le module principal.
<div ng-app="mainApp">
...
<script type="text/ng-template" id="addStudent.html">
<h2> Add Student </h2>
{{message}}
</script>
</div>
Utiliser
Définissez le bloc de script du module principal et définissez la configuration du routage.
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.html',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.html',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
Les éléments suivants sont des questions importantes à prendre en compte dans l'exemple ci-dessus
- $routeProvider est défini comme une fonction de configuration du module mainApp sous '$routeProvider' à l'aide de mots-clés ;
- $routeProvider mappe l'URL "/addStudent" à "addStudent.html" lorsqu'elle est définie. addStudent.html doit exister dans le même chemin que la page HTML principale. Si la page htm n'est pas définie, alors ng-template est utilisé avec id="addStudent.html". Nous avons utilisé ng-template ;
- « sinon » est la vue par défaut utilisée pour définir
- « conlloer » est utilisé pour définir le contrôleur correspondant à la vue
Exemple
L'exemple suivant démontrera toutes les commandes ci-dessus.
testAngularJS.html
<html>
<head>
<title>Angular JS Views</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp">
<p><a href="#addStudent">Add Student</a></p>
<p><a href="#viewStudents">View Students</a></p>
<div ng-view></div>
<script type="text/ng-template" id="addStudent.html">
<h2> Add Student </h2>
{{message}}
</script>
<script type="text/ng-template" id="viewStudents.html">
<h2> View Students </h2>
{{message}}
</script>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.html',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.html',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
});
mainApp.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
});
</script>
</body>
</html>
Résultats
Ouvrez textAngularJS.html dans votre navigateur Web. Voir les résultats comme suit :
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
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 !
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)
Le mode veille d'iOS 17 transforme un iPhone en chargement en hub domestique
Jun 06, 2023 am 08:20 AM
Dans iOS 17, Apple introduit le mode veille, une nouvelle expérience d'affichage conçue pour charger les iPhones en orientation horizontale. Dans cette position, l'iPhone est capable d'afficher une série de widgets en plein écran, le transformant en un hub domestique utile. Le mode veille s'active automatiquement sur un iPhone sous iOS 17 placé horizontalement sur le chargeur. Vous pouvez afficher l'heure, la météo, le calendrier, les commandes musicales, les photos et bien plus encore. Vous pouvez faire glisser votre doigt vers la gauche ou la droite parmi les options de veille disponibles, puis appuyer longuement ou glisser vers le haut/bas pour personnaliser. Par exemple, vous pouvez choisir entre une vue analogique, une vue numérique, une police à bulles et une vue lumière du jour, où la couleur d'arrière-plan change en fonction du temps qui passe. Il existe quelques options
Comment implémenter des tables modifiables dans Vue
Nov 08, 2023 pm 12:51 PM
Les tableaux sont un composant essentiel dans de nombreuses applications Web. Les tableaux contiennent généralement de grandes quantités de données. Ils nécessitent donc certaines fonctionnalités spécifiques pour améliorer l'expérience utilisateur. L'une des fonctionnalités importantes est la possibilité de modification. Dans cet article, nous explorerons comment implémenter des tables modifiables à l'aide de Vue.js et fournirons des exemples de code spécifiques. Étape 1 : préparer les données Tout d'abord, nous devons préparer les données pour le tableau. Nous pouvons utiliser un objet JSON pour stocker les données de la table et les stocker dans la propriété data de l'instance Vue. Dans ce cas
Comprendre les différences et les comparaisons entre SpringBoot et SpringMVC
Dec 29, 2023 am 09:20 AM
Comparez SpringBoot et SpringMVC et comprenez leurs différences Avec le développement continu du développement Java, le framework Spring est devenu le premier choix pour de nombreux développeurs et entreprises. Dans l'écosystème Spring, SpringBoot et SpringMVC sont deux composants très importants. Bien qu'ils soient tous deux basés sur le framework Spring, il existe certaines différences dans les fonctions et l'utilisation. Cet article se concentrera sur la comparaison de SpringBoot et Spring
Comment utiliser le framework CodeIgniter4 en php ?
May 31, 2023 pm 02:51 PM
PHP est un langage de programmation très populaire et CodeIgniter4 est un framework PHP couramment utilisé. Lors du développement d'applications Web, l'utilisation de frameworks est très utile. Elle peut accélérer le processus de développement, améliorer la qualité du code et réduire les coûts de maintenance. Cet article expliquera comment utiliser le framework CodeIgniter4. Installation du framework CodeIgniter4 Le framework CodeIgniter4 peut être téléchargé depuis le site officiel (https://codeigniter.com/). Vers le bas
Développement Laravel : Comment générer des vues avec Laravel View ?
Jun 14, 2023 pm 03:28 PM
Laravel est actuellement l'un des frameworks PHP les plus populaires et ses puissantes capacités de génération de vues sont impressionnantes. Une vue est une page ou un élément visuel affiché à l'utilisateur dans une application Web, qui contient du code tel que HTML, CSS et JavaScript. LaravelView permet aux développeurs d'utiliser un langage de modèle structuré pour créer des pages Web et générer les vues correspondantes via les contrôleurs et le routage. Dans cet article, nous explorerons comment générer des vues à l'aide de LaravelView. 1. Quoi
Quelles sont les opinions de Word ?
Mar 19, 2024 pm 06:10 PM
Je suppose que de nombreux étudiants souhaitent acquérir les compétences de composition de Word, mais l'éditeur vous dit secrètement qu'avant d'acquérir les compétences de composition, vous devez comprendre clairement les vues de mots. Dans Word2007, 5 vues sont proposées aux utilisateurs. les vues incluent la vue pages, la vue mise en page de lecture, la vue mise en page Web, la vue plan et la vue normale. Découvrons ces 5 vues de mots avec l'éditeur aujourd'hui. 1. Vue de page La vue de page peut afficher l'apparence du résultat d'impression du document Word2007, qui comprend principalement les en-têtes, les pieds de page, les objets graphiques, les paramètres de colonne, les marges de page et d'autres éléments. Il s'agit de la vue de page la plus proche du résultat d'impression. 2. Mode de lecture Le mode de lecture affiche les documents Word2007 et Office dans le style de colonne d'un livre.
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.
