Comment choisir l'itinéraire pour angulaire.js-js tutoriel-php.cn

Comment choisir l'itinéraire pour angulaire.js

高洛峰

Libérer： 2017-02-06 11:41:56

original

1484 Les gens l'ont consulté

Dans une seule page, nous pouvons ajouter plusieurs modules afin que la page Web ne charge ce module qu'en cas de besoin. La commutation de module peut à peu près remplacer la commutation de page Web. Par conséquent, nous pouvons réaliser la commutation de page Web grâce à la commutation de module. Cette commutation est chargée à la demande.

Cela semble très ordinaire à première vue, mais si vous y réfléchissez bien, vous constaterez que cette idée peut résoudre beaucoup de ressources.

Par exemple, s'il existe une page qui doit afficher des informations sur 1 000 produits et que chaque produit a une forme d'expression différente (en supposant qu'ils aient leurs propres CSS et JS indépendants), alors d'une manière générale, nous avons besoin Préparez 1 000 pages Web pour charger ces informations. Cependant, en utilisant cette idée modulaire, nous pouvons simplement définir 1 000 modules différents en arrière-plan, puis charger les modules correspondants des produits requis sur une seule page selon les besoins.

Pour réaliser les fonctions présentées ci-dessus, vous devez utiliser la fonction de routage.

Idée principale :

1. Configurer plusieurs modules indépendants en arrière-plan

2. Établir un module de contrôle de routage

3. nécessaire Le module doit être chargé sur la page d'accueil

4. Pendant le chargement, masquez les autres modules.

Alors, combien d'efforts faut-il pour établir le module de routage ? En fait, c'est étonnamment simple :

Tout d'abord, écrivez le code correspondant sur la page principale :

la zone de visualisation, Ce n'est que lorsque cette balise est écrite que l'événement de routage sera déclenché :

<html ng-app="myTodo"><head>
    <meta charset="utf-8">
    <title>angularjs • TodoMVC</title>
    <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
    <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
    <style>
      .pagination {
        overflow: hidden;
        padding: 20px;
      }
      .pagination ul li {
        width: 60px;
        height: 30px;
        line-height: 30px;
        border:1px solid black;
        float: left;
        list-style-type: none;
        margin-right: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <ng-view></ng-view> <!-- 路由区域，视图区域-->
    <footer id="info">
      <p>Double-click to edit a todo</p>
      <p>Created by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </footer>
     
    <script src="node_modules/angular/angular.js"></script>
    <script src="node_modules/angular-route/angular-route.js"></script>
    <script src="js/app.js"></script>
   
 
</body>
</html>

Copier après la connexion

Tout le reste est décoration, il suffit de regarder la ligne 24.

Dans la zone de routage et la zone d'affichage, nous pouvons ajouter du contenu - même ajouter une page Web.

Ensuite, veuillez consulter le app.js correspondant.

var app = angular.module("myTodo", [&#39;ngRoute&#39;]);
//路由的配置：
app.config(function($routeProvider) {
 var routeconfig = {
    templateUrl: "body.html",
    controller: "myTodoCtrl"
    /*controller: &#39;myTodoCtrl&#39;*/
  }
 
  var ohter_config = {
    templateUrl: "other.html"
  }
 
  $routeProvider.
   when("",routeconfig).
   //status ： 它对应我们页面的hash: all completed active
   //路由规则的优先级按写法的顺序所决定的
   when("/other", ohter_config).
   when("/:aaa", routeconfig ).
   otherwise( { redirectTo: "/all" });
});
app.controller("myTodoCtrl", function($scope, $routeParams, $filter){
    console.log($routeParams);
   
});

Copier après la connexion

Si vous utilisez uniquement le routage, le code ci-dessus suffit. Cela garantira :

1. Lorsque la page reste sur la page d'accueil ou à d'autres endroits étranges, elle passera automatiquement à

/all
. .0.1:8020/finishAngularJS-mark2/index.html#/all
Faites simplement attention à ce qui vient après l'index.

2. Lorsque la direction de saut de page est /autre, passez à

http://127.0.0.1:8020/finishAngularJS-mark2/iother.html

3. Lorsqu'un saut spécifique se produit (les trois sauts spécifiés ici sont /active, /complete/all), il passera également à la page correspondante, mais il s'agit d'un saut sous l'index——

http:// 127.0.0.1:8020/finishAngularJS-mark2/index.html#/active

http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/ all

http : //127.0.0.1:8020/finishAngularJS-mark2/index.html#/complete

[Une chose à noter en particulier : sauf 2 sautera hors de cette page, les autres sauts Il est affiché dans la vue spécifiée zone et zone de routage, et le contenu de la page Web du corps sera chargé. 】

Ensuite, nous expliquons le principe :

app.config(function($routeProvider)

C'est le code utilisé pour définir l'itinéraire, il suffit de l'écrire directement

var routeconfig = {
    templateUrl: "body.html",
    controller: "myTodoCtrl"
    /*controller: &#39;myTodoCtrl&#39;*/
  }
 
  var ohter_config = {
    templateUrl: "other.html"
  }

Copier après la connexion

Ce sont deux sauts. Le saut est un objet, templateUrl, c'est-à-dire que le modèle est body.html C'est pourquoi index.html chargera body.html. un contrôleur, le nom est - myTodoCtrl. Le deuxième saut est passé car ce n'est pas important

Ce morceau de code est utilisé pour le jugement Lorsque la valeur de hachage change, exécutez l'objet de saut correspondant. Lorsque la valeur de hachage est "", c'est-à-dire que la deuxième phrase est vide, exécutez routeconfig

$routeProvider.
   when("",routeconfig).
   //status ： 它对应我们页面的hash: all completed active
   //路由规则的优先级按写法的顺序所决定的
   when("/other", ohter_config).
   when("/:aaa", routeconfig ).
   otherwise( { redirectTo: "/all" });
});

Copier après la connexion

. Lorsque la valeur de hachage est "/other", c'est-à-dire le cinquième tour, exécutez other_config

Lorsque la valeur de hachage est une variable spéciale, le nom de la variable est aaa et la valeur est X (X peut être n'importe quel pointeur défini, voici tout, complet, actif), c'est-à-dire "/active", "/complete ", "/all", exécutez routeconfig

Lorsque la valeur de hachage est dans d'autres cas, elle sautera par défaut. Lorsque la valeur de hachage est "/all", nous obtenons la valeur de hachage, exécutons l'objet suivant, retirez le modèle de l'objet, ajoutez-le à la page d'accueil, démarrez le contrôleur et tout l'itinéraire est calculé

Ce qui précède est l'intégralité du contenu de la méthode de sélection d'angular.js apportée par l'éditeur. J'espère que cela sera utile à tout le monde. Veuillez soutenir le site Web PHP chinois ~

Pour plus d'articles sur les méthodes de sélection d'itinéraire angulaire.js, veuillez faire attention au site Web PHP chinois