Maison > Article > interface Web > AngularJS utilise ui-route pour implémenter le routage imbriqué multicouche

AngularJS utilise ui-route pour implémenter le routage imbriqué multicouche

小云云original: 2018-01-11 13:13:332056parcourir

Cet article présente principalement l'exemple d'AngularJS utilisant ui-route pour implémenter le routage imbriqué multicouche. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

1. Résultats attendus :

https://liyuan-meng.github.io/uiRouter-app/index.html

( Projet adresse : https://github.com/liyuan-meng/uiRouter-app)

2. Analysez les exigences du problème, donnez les dépendances et construisez le projet

1. service :

(1) Interrogez les données des personnes checkPeople.service selon les conditions. Si aucune condition n'est donnée, interrogez tout.

(2) Obtenez des informations de routage getStateParams.service.

2. composants :

(1) bonjour module : cliquez sur le bouton pour modifier le contenu.

(2) module peopleList : affiche la liste des personnes, cliquez sur les personnes pour afficher les détails des personnes. Dépend du module checkPeople.service.

(3) module peopleDetail : affiche les détails des personnes et s'appuie sur le module checkPeople.service et le module getStateParams.service.

3. Construisez le projet :

Comme le montre la figure : le répertoire des composants est utilisé pour enregistrer tous les modules de service et modules métier, et la lib Le répertoire enregistre les références externes (I (angular.js1.5.8 et ui-route0.2.18 sont utilisés), le fichier app.config.js est utilisé pour configurer le routage et index.html est utilisé comme fichier d'entrée.

3. Implémentez cet exemple

1. Accueil index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./lib/angular.js"></script>
  <script src="./lib/angular-ui-route.js"></script>
  <script src="./app.config.js"></script>
  <script src="./components/core/people/checkPeople.service.js"></script>
  <script src="./components/core/people/getStateParams.service.js"></script>
  <script src="./components/hello/hello.component.js"></script>
  <script src="./components/people-list/people-list.component.js"></script>
  <script src="./components/people-detail/people-detail.component.js"></script>
</head>
<body ng-app="helloSolarSystem">
<p>
  <a ui-sref="helloState">Hello</a>
  <a ui-sref="aboutState">About</a>
  <a ui-sref="peopleState">People</a>
</p>

<ui-view></ui-view>

</body>
</html>

(1) Importez les fichiers dans lib et tous les fichiers de services et de composants utilisés.

(2) ng-app="helloSolarSystem" spécifie que l'analyse commence à partir du module helloSolarSystem.

(3) Définir la vue5643c5c8ec46989a1440c123e54787f3142226fc0f7a4611fbee3f36258ad78a

2. Configurer le routage app.config.js

&#39;use strict&#39;;

angular.module("helloSolarSystem", [&#39;peopleList&#39;, &#39;peopleDetail&#39;, &#39;hello&#39;,&#39;ui.router&#39;]).

  config([&#39;$stateProvider&#39;, function ($stateProvider) {

    $stateProvider.state(&#39;helloState&#39;, {
      url: &#39;/helloState&#39;,
      template:&#39;<hello></hello>&#39;

    }).state(&#39;aboutState&#39;, {
      url: &#39;/about&#39;,
      template: &#39;<h4>Its the UI-Router Hello Solar System app!</h4>&#39;

    }).state(&#39;peopleState&#39;, {
      url: &#39;/peopleList&#39;,
      template:&#39;<people-list></people-list>&#39;

    }).state(&#39;peopleState.details&#39;, {
      url:&#39;/detail/:id&#39;,
      template: &#39;<people-detail></people-detail>&#39;
    })
  }
]);

(1) Nom du module : helloSolarSystem ;

(2) Injectez les modules 'peopleList', 'peopleDetail', 'hello', 'ui.router'.

(3) Configurez le contrôle de vue du service stateProvider, par exemple, le premier contrôleur de vue nommé helloState : lorsque ui-sref == "helloState", la route est mise à jour à la valeur de l'url #/helloState , Et le contenu affiché dans 5643c5c8ec46989a1440c123e54787f3142226fc0f7a4611fbee3f36258ad78a est le contenu analysé par le composant 5d31ad12eb7f2467fa10436b397d69f6ce2196d7bcfa28427152ee3efb4b3e34

(4) Implémentation du routage imbriqué : Le contrôleur de vue nommé peopleState est la route parent. Le contrôleur de vue nommé peopleState.details est une route enfant. Il s'agit d'une méthode de routage relatif. La route parent correspondra à.../index.html#/peopleState/, et la route enfant correspondra à.../index.html#/peopleState/detail/x (x est /detail/. :id la valeur de id dans ). Si vous le changez en routage absolu, il vous suffit d'écrire url:'^/detail/:id', alors la sous-route correspondra à.../index.html#/detail/x (x est dans /detail/ :id) valeur d'identifiant).

4. Implémentez checkPeople.service (trouver des personnes en fonction des conditions)

checkPeople.sercice.js

&#39;use strict&#39;;

//根据条件（参数）查找信息。
angular.module(&#39;people.checkPeople&#39;, [&#39;ui.router&#39;]).
  factory(&#39;CheckPeople&#39;, [&#39;$http&#39;, function ($http) {
    return {
      getData: getData
    };
    function getData(filed) {
      var people;
      var promise = $http({
        method: &#39;GET&#39;,
        url: &#39;./data/people.json&#39;
      }).then(function (response) {
        if (filed) {
          people = response.data.filter(function (value) {
            if (Number(value.id) === Number(filed)) {
              return value;
            }
          })
        } else {
          people = response.data;
        }
        return people;
      });
      return promise;
    }
  }]);

(1 ) Dans la fonction getData, nous voulons renvoyer un tableau qui enregistre les informations sur les personnes, mais lors de l'utilisation du service $http().then(), il s'agit d'une requête asynchrone. Nous ne savons pas quand la requête se terminera, donc la. le monde revient Il y a quelque chose qui ne va pas avec le tableau des personnes. Nous avons remarqué que $http().then() est un objet Promise, nous pouvons donc penser à renvoyer cet objet directement, afin de pouvoir utiliser "result of function.then(function(data))" pour obtenir la requête asynchrone. données à venir.

3. Implémentez getStateParams.service (obtenir des informations de routage)

getStatePatams.service.js

"use strict";

angular.module("getStateParams", [&#39;ui.router&#39;]).
  factory("GetStateParams", ["$location", function ($location) {
    return {
      getParams: getParams
    };
    function getParams() {
      var partUrlArr = $location.url().split("/");
      return partUrlArr[partUrlArr.length-1];
    }
}]);

(1) ici La fonction getParams renvoie les dernières données des informations de routage, qui sont l'identifiant de la personne. Ce service est quelque peu spécial et pas assez universel. Il devra peut-être être optimisé pour être plus raisonnable. Mais cela n’affecte pas nos besoins.

4. Implémenter le module bonjour

hello.template.html

<p>
  <p ng-hide="hideFirstContent">hello solar sytem!</p>
  <p ng-hide="!hideFirstContent">whats up solar sytem!</p>
  <button ng-click="ctlButton()">click</button>
</p>

hello.component.js

&#39;use strict&#39;;

angular.module("hello", [])
  .component(&#39;hello&#39;, {
    templateUrl: &#39;./components/hello/hello.template.html&#39;,
    controller: ["$scope", 
      function HelloController($scope) {
        $scope.hideFirstContent = false;
        $scope.ctlButton = function () {
          this.hideFirstContent = !this.hideFirstContent;
        };
      }
    ]
  });

5. Implémenter le module peopleList :

peopleList.template.html

<p>
  <ul>
    <a ng-repeat="item in people" ui-sref="peopleState.details({id:item.id})">
      <li>{{item.name}}</li>
    </a>
  </ul>
  <ui-view></ui-view>
</p>

(1 ) Le 5643c5c8ec46989a1440c123e54787f3142226fc0f7a4611fbee3f36258ad78a ici est utilisé pour afficher le sous-composant pepleDetail

peopleList.component.js

&#39;use strict&#39;;

angular.module("peopleList", [&#39;people.checkPeople&#39;])
  .component(&#39;peopleList&#39;, {
    templateUrl: &#39;./components/people-list/people-list.template.html&#39;,
    controller: [&#39;CheckPeople&#39;,&#39;$scope&#39;,
      function PeopleListController(CheckPeople, $scope) {
        $scope.people = [];
        CheckPeople.getData().then(function(data){
          $scope.people = data;
        });
      }
    ]
  });

6. Implémenter le module peopleDetail

peopleDetail.template.html

<ul ng-repeat="item in peopleDetails track by $index">
  <li>名字： {{item.name}}</li>
  <li>介绍： {{item.intro}}</li>
</ul>

peopleDetail.component.js

&#39;use strict&#39;;

angular.module("peopleDetail", [&#39;people.checkPeople&#39;, &#39;getStateParams&#39;])
  .component(&#39;peopleDetail&#39;, {
    templateUrl: &#39;./components/people-detail/people-detail.template.html&#39;,
    controller: [&#39;CheckPeople&#39;, &#39;GetStateParams&#39;, &#39;$scope&#39;,
      function peopleDetailController(CheckPeople, GetStateParams, $scope) {
        $scope.peopleDetails = [];
        CheckPeople.getData(GetStateParams.getParams()).then(function(data){
          $scope.peopleDetails = data;
        });
      }
    ]
  });

7. Code source : https://github.com/liyuan-meng/uiRouter-app

Recommandations associées :

Exemple de code pour l'utilisation du module de routage Ui-router dans AngularJS

Une brève analyse des modules ui-router et ng-grid dans angulaireJS

ui -Utilisation de router_html/css_WEB-ITnose

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!

html angular JS function 对象 promise 异步 github http https ui

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：Explication détaillée de la limite de numéro de connexion de la limite de vitesse nginxArticle suivant：Explication détaillée de la limite de numéro de connexion de la limite de vitesse nginx

Articles Liés

Voir plus