Introduction et utilisation du 'routage' AngularJS-Tutoriel H5-php.cn

Introduction et utilisation du 'routage' AngularJS

巴扎黑

Libérer： 2017-07-21 14:05:30

original

1369 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

3. Analyse

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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就好

Copier après la connexion

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