Maison > Article > interface Web > Introduction et utilisation du 'routage' AngularJS

Introduction et utilisation du 'routage' AngularJS

巴扎黑original: 2017-07-21 14:05:301342parcourir

Voici quelques documents d'étude préparés par l'éditeur. En théorie, ils sont uniquement destinés à vos propres besoins d'étude futurs, mais ils doivent quand même être pris au sérieux

Le contenu suivant est à titre de référence uniquement. , veuillez utiliser et étudier avec prudence

Le concept déterminant de « routage » dans AngularJS

AngularJS est très populaire récemment. des collègues, des camarades de classe et des amis l'utilisent. N'est-ce pas recommandé pour moi d'apprendre, j'étais très excité quand j'ai entendu le nom

Je n'expliquerai pas ce qu'est AngularJS, cette chose est toujours très intéressant

Ici, je recommande un site d'apprentissage, un tutoriel pour débutants, bien que la plupart des tutoriels qu'il contient soient très simples et que beaucoup d'entre eux ne soient pas expliqués, c'est vraiment un bon choix pour commencer

1. Qu'est-ce que le routage AngularJS ?

Le routage AngularJS nous permet d'accéder à différents contenus via différentes URL. Grâce à AngularJS, vous pouvez implémenter une application Web multi-vues d'une seule page

1 3 5

Ce ci-dessus est sa forme de présentation. Le contenu après le signe # ressemble-t-il à la requête du serveur ? En fait, la demande sera ignorée par le navigateur. Ce dont nous avons besoin, c'est d'implémenter la fonction du contenu après le numéro # côté client. Le routage AngularJS utilise # + tag pour nous aider à distinguer différentes pages logiques et à lier différentes pages aux contrôleurs correspondants.

2. Routage instance de configuration

 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 4  5 <!--导入angular以及路由文件angular-route.js--> 6 <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js?1.1.11"></script> 7 <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js?1.1.11"></script> 8  9     <script type="text/javascript">10         //把元素值（比如输入域的值）绑定到应用程序。11         angular.module('ngRouteExample', ['ngRoute'])12         .controller('a1', function ($scope, $route) { $scope.$route = $route;})13         .controller('a2', function ($scope, $route) { $scope.$route = $route;})14         .config(function ($routeProvider) {15             $routeProvider.16             when('/a1', {17                 templateUrl: 'a1.html',18                 controller: 'a1'19             }).20             when('/a2', {21                 templateUrl: 'a2.html',22                 controller: 'a2'23             }).24             otherwise({25                 redirectTo: '/a2'26             });27         });28 </script>29 30   31 </head>32 33     <body ng-app="ngRouteExample" class="ng-scope">34           <script type="text/ng-template" id="a1.html">35               <h1> Home </h1>36           </script>37     38           <script type="text/ng-template" id="a2.html">39               <h1> About </h1>40           </script>41     42           <div> 43             <div id="navigation">  44               <a href="#/a1">这是a1</a>45               <a href="#/a2">这是a2</a>46             </div>47               48             <div ng-view="">49             </div>50           </div>51     </body>52 </html>

3. Analyse

1 //包含了ngRoute 模块的2 angular.module('routingDemoApp',['ngRoute'])

1 //使用 ngView 指令，用来显示路由切换的页面2 <div ng-view></div>

 //                // //redirectTo，重定向的地址，可以是你想最开始加载的页面

1  <script type="text/ng-template" id="a1.html">2               <h1> Home </h1>3           </script>4     5           <script type="text/ng-template" id="a2.html">6               <h1> About </h1>7           </script>8 //这里的加载内容可以使本地的HTML文件链接，然后删掉这部分js就好

Créez simplement deux fichiers HTML locaux comme a1.html et a2.html Le chemin doit être correct (voici le Dans le même répertoire. )

4. Style d'effet

Puis enfin, à quoi ça ressemble comme ?

Cliquez sur différentes balises, et les ng-view=""> suivantes chargeront différentes pages.

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!

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：Knockoutjs+select2 Partage de code de la fonction de recherche de personnelArticle suivant：Knockoutjs+select2 Partage de code de la fonction de recherche de personnel

Articles Liés

Voir plus