Heim > Artikel > Web-Frontend > Einführung und Verwendung des AngularJS-Routings

Einführung und Verwendung des AngularJS-Routings

巴扎黑Original: 2017-07-21 14:05:301318Durchsuche

Dies sind einige vom Herausgeber erstellte Lernmaterialien. Theoretisch sind sie nur für Ihren eigenen zukünftigen Lernbedarf gedacht, sie müssen jedoch dennoch ernst genommen werden.

Der folgende Inhalt dient nur als Referenz , bitte verwenden und studieren Sie mit Vorsicht

Das definierende Konzept des „Routings“ in AngularJS

AngularJS ist in letzter Zeit sehr beliebt Kollegen, Klassenkameraden und Freunde verwenden es nicht? Empfohlen für mich, als ich den Namen hörte.

Ich werde nicht erklären, was AngularJS ist, dieses Ding ist immer noch sehr interessant

Hier empfehle ich eine Lernwebsite, ein Tutorial für Anfänger. Obwohl viele der darin enthaltenen Tutorials sehr einfach sind und viele nicht erklärt werden, ist es wirklich eine gute Wahl für den Einstieg

1. Was ist AngularJS-Routing?

AngularJS-Routing ermöglicht uns den Zugriff auf unterschiedliche Inhalte über unterschiedliche URLs. Mit AngularJS können Sie eine einseitige Webanwendung mit mehreren Ansichten implementieren

1 3 5

Sieht der Inhalt nach dem #-Zeichen wie die Serveranforderung aus? Tatsächlich wird die Anfrage vom Browser ignoriert. Was wir brauchen, ist die Funktion des Inhalts nach der #-Nummer auf der Clientseite zu implementieren. Das AngularJS-Routing verwendet # + Tag , um uns dabei zu helfen, verschiedene logische Seiten zu unterscheiden und verschiedene Seiten an die entsprechenden Controller zu binden.

2. Routing Konfigurationsinstanz

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

Erstellen Sie einfach zwei lokale HTML-Dateien als a1.html und a2.html. Der Pfad muss korrekt sein (hier ist der Pfad im selben Verzeichnis). )

4. Effektstil

Dann endlich Wie sieht es aus? Gefällt mir?

Klicken Sie auf verschiedene Tags, und die folgenden Seiten können lokal geladen werden.

Das obige ist der detaillierte Inhalt vonEinführung und Verwendung des AngularJS-Routings. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Knockoutjs + select2 Code-Sharing für die PersonalsuchfunktionNächster Artikel：Knockoutjs + select2 Code-Sharing für die Personalsuchfunktion

In Verbindung stehende Artikel

Mehr sehen