Maison >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

WBOYoriginal: 2016-05-16 15:53:551514parcourir

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

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

Dans les hyperliens des pages, nous utilisons "#". Nous ne voulons pas que le navigateur pense que nous établissons réellement un lien vers about.html et contact.html.

<!-- 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>

Application angulaire

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.

Tout d'abord, nous devons créer notre modèle et notre contrôleur en javascript, nous mettons cette opération dans script.js :

Ajoutons ensuite des modèles et des contrôleurs à notre page HTML pour qu'Angular sache comment amorcer notre application. Pour tester que la fonctionnalité fonctionne, nous afficherons également la valeur d'une variable que nous avons créée appelée $scope.message.

// 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!';
});

Dans la couche div principale, nous pouvons maintenant voir le message que nous avons créé. Maintenant que nos modèles et contrôleurs sont configurés et qu'Angular fonctionne correctement, nous allons commencer à utiliser cette couche pour afficher différentes pages.

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

Configurer les itinéraires et les vues

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 :

Maintenant, nous avons défini notre itinéraire via $routeProvider. Grâce à la configuration, vous constaterez que vous pouvez utiliser des itinéraires spécifiés, des fichiers modèles et même des contrôleurs. Avec cette approche, chaque partie de notre application utilise un contrôleur angulaire et sa propre vue.

// 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 :

Pour plus d'informations sur ce processus, consultez

AJAX Crawler de Google et leur guide sur la Création d'instantanés HTML.

Déclaration：

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

Article précédent：Comment faire en sorte que setTimeout dans la chaîne de support JavaScript compétences opérations_javascriptArticle suivant：Comment faire en sorte que setTimeout dans la chaîne de support JavaScript compétences opérations_javascript

Articles Liés

Voir plus