interface Web
js tutoriel
Directives de programmation pour créer des applications d'une seule page à l'aide d'AngularJS_AngularJS
Directives de programmation pour créer des applications d'une seule page à l'aide d'AngularJS_AngularJS
Aperçu
Les applications à page unique sont de plus en plus populaires de nos jours. Tout site Web qui émule le comportement d’une application monopage peut offrir la sensation d’une application mobile/tablette. Angular peut nous aider à créer facilement de telles applications
Application simple
Nous allons créer une application simple comprenant les pages d'accueil, à propos et de contact. Bien qu'Angular soit conçu pour créer des applications plus complexes que celle-ci, ce didacticiel présente de nombreux concepts dont nous aurons besoin dans des projets plus importants.
Objectif
- Candidature d'une seule page
- Aucune modification de page d'actualisation
- Chaque page contient des données différentes
Bien que les fonctions ci-dessus puissent être réalisées en utilisant Javascript et Ajax, dans notre application, Angular peut nous faciliter la tâche.
Structure du document
-
<
- - index.html - pages
- ----- home.html
- ----- à propos.html
- ----- contact.html
Cette partie est relativement simple. Nous utilisons Bootstrap et Font Awesome. Ouvrez votre fichier index.html, puis nous utilisons la barre de navigation pour ajouter une mise en page simple.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
<!-- FOOTER -->
<footer class="text-center">
View the tutorial on <a href="http://scotch.io/tutorials/angular-routing-and-templating-tutorial">Scotch.io</a>
</footer>
</body>
</html>
Modèles et contrôleurs
À ce stade, nous sommes prêts à configurer notre application. Créons d'abord le modèle angulaire et le contrôleur. Concernant les modèles et les contrôleurs, consultez la documentation pour plus d'informations.
// script.js
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', []);
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
<!-- index.html -->
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="scotchApp">
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
...
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
{{ message }}
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
Injecter la page dans la mise en page principale
ng-view est une directive angulaire utilisée pour inclure le modèle de l'itinéraire actuel (/home, /about ou /contact). Elle obtiendra le fichier en fonction de l'itinéraire spécifique et le placera dans la mise en page principale (index). .html ).
Nous ajouterons du code ng-view au site dans div#main pour indiquer à Angular où placer la page que nous rendons.
<!-- index.html --> ... <!-- MAIN CONTENT AND INJECTED VIEWS --> <div id="main"> <!-- angular templating --> <!-- this is where content will be injected --> <div ng-view></div> </div> ...
Puisque nous créons une application d'une seule page et que nous ne souhaitons pas que la page soit actualisée, nous utiliserons les capacités de routage angulaire.
Jetons un coup d'œil à nos fichiers Angular et ajoutons-les à notre application. Nous utiliserons $routeProvider dans Angular pour gérer notre routage. De cette façon, Angular gérera toutes les requêtes magiques en récupérant un nouveau fichier et en l'injectant dans notre mise en page.
AngularJS 1.2 et Routage
Après la version 1.1.6, le modèle ngRoute n'est plus inclus dans Angular. Vous devez utiliser le modèle en le déclarant au début du document. Ce tutoriel a été mis à jour pour AngularJS1.2 :
// script.js
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
URL propre : Angular mettra par défaut un signe dièse dans l'URL. Pour éviter cela, nous devons activer l'API HTML History à l'aide de $locationProvider. Elle supprimera les hachages et créera de belles URL. Notre page d'accueil extraira le fichier home.html. Les pages À propos et de contact extrairont leurs fichiers associés. Désormais, si nous visualisons notre application et cliquons sur la navigation, notre contenu changera à notre guise.
Pour réaliser ce tutoriel, il suffit de définir les pages qui seront injectées. Nous ferons également afficher à chacune d'elles les messages du contrôleur qui leur est associé.
Exécuter localement : le routage angulaire ne fonctionnera que dans l'environnement que vous avez défini. Vous devez vous assurer que vous utilisez http://localhost ou un certain type d'environnement. Sinon, Angular dira que les requêtes inter-domaines prennent en charge HTTP.
Animation pour les applications angulaires
Une fois tout le routage effectué, vous pouvez commencer à jouer avec votre site et y ajouter des animations. Pour ce faire, vous devez utiliser le module ngAnimate fourni par angulaire. animation pour changer de vue de manière animée
.
SEO sur l'application à page unique
Idéalement, cette technique pourrait être utilisée dans une application où l'utilisateur est connecté. Vous ne voulez certainement pas vraiment que les pages privées d'un utilisateur spécifique soient indexées par les moteurs de recherche. Par exemple, vous ne voudriez pas que votre compte de lecteur, votre page de connexion Facebook ou votre page CMS de blog soient indexées.
Si vous souhaitez faire du référencement pour votre application, comment rendre le référencement efficace sur les applications/sites qui utilisent js pour créer des pages. Les moteurs de recherche ont du mal à traiter ces applications car le contenu est construit dynamiquement par le navigateur ? , et Invisible pour les robots d'exploration.
Rendre votre application optimisée pour le référencement
Les techniques qui rendent les applications js monopage optimisées pour le référencement nécessitent une maintenance régulière. Selon les recommandations officielles de Google, vous devez créer des instantanés HTML. Un aperçu de son fonctionnement est le suivant :
- Le robot trouvera une URL conviviale (http://scotch.io/seofriendly#key=value)
- Ensuite, le robot demandera au serveur le contenu correspondant à cette URL (d'une manière spécialement modifiée)
- Le serveur Web utilisera un instantané HTML pour renvoyer le contenu
- Les instantanés HTML seront traités par les robots d'exploration
- Ensuite, les résultats de la recherche afficheront l'URL d'origine
AJAX Crawler de Google et leur guide sur la Création d'instantanés HTML.
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)
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 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.
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é
