AngularJS-Einführungs-Tutorial – Beispiel für die Verwendung des Multi-View-Switchings
- 高洛峰Original
- 2016-12-08 10:39:581232Durchsuche
Das Beispiel in diesem Artikel beschreibt die Verwendung der AngularJS-Mehrfachansichtsumschaltung. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
In AngularJS-Anwendungen können wir die HTML-Fragmente in eine separate Datei schreiben und die Fragmente dann auf andere Seiten laden. Wenn mehrere Fragmentdateien vorhanden sind, können wir basierend auf Benutzervorgängen auch dynamisch verschiedene Fragmente in den Controller laden, um den Effekt eines Ansichtswechsels zu erzielen.
Werfen wir zunächst einen Blick auf einen vom Autor geschriebenen Fall:
Diese beiden Wörter sind eigentlich zwei HTML-Fragmente, die jeweils auf Seite 1 geschrieben sind Seite2.html. Das Folgende ist der Inhalt dieser beiden Dateien:
<!--page1.html内容--> <div> <p>《南乡子·登京口北固亭有怀》</p> <p>何处望神州？满眼风光北固楼。千古兴亡多少事，悠悠，不尽长江滚滚流。</p> <p>年少万兜鍪，坐断东南战未休。天下英雄谁敌手，曹刘。生子当如孙仲谋。</p> </div>
<!--page2.html内容--> <div> <p>《蝶恋花》</p> <p>伫倚危楼风细细，望极春愁，黯黯生天际。草色烟光残照里，无言谁会凭阑意。</p> <p>拟把疏狂图一醉，对酒当歌，强乐还无味。衣带渐宽终不悔，为伊消得人憔悴。</p> </div>
Als nächstes wollen wir sehen, wie man zwischen diesen beiden Fragmenten wechselt.
<!DOCTYPE html>
<html ng-app="routeMod">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<script type="text/javascript" src="angular-1.3.0.14/angular-route.js"></script>
<link type="text/css" href="css/tutorial07.css" rel="stylesheet">
<title>tutorial07.html</title>
</head>
<body>
<header>
Header
</header>
<div id="content" ng-controller="MultiViewController">
<div id="myView" ng-view="myView" ng-init="init()">
</div>
<div id="btnDiv">
<button ng-click="prePage()">上一页</button>
<button ng-click="nextPage()">下一页</button>
</div>
</div>
<footer>
Copyright:Rongbo_J
</footer>
<script>
var routeMod = angular.module('routeMod', ['ngRoute']);
routeMod.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/1',{
templateUrl:'tutorial07/page1.html',
controller:'MultiViewController'
})
.when('/2',{
templateUrl:'tutorial07/page2.html',
controller:'MultiViewController'
})
}])
routeMod.controller("MultiViewController",function($scope,$log,$location){
$scope.init = function () {
$location.path("/1");
}
$scope.prePage = function () {
$log.info("prePage");
$location.path("/1");
};
$scope.nextPage = function () {
$log.info("nextPage");
$location.path("/2");
};
});
</script>
</body>
</html>
Hier müssen wir das Routing-Modul ngRoute von AngularJs verwenden. Der Modulcode ist wie im vorherigen Abschnitt gekapselt muss es vorstellen.
<script type="text/javascript" src="angular-1.3.0.14/angular-route.js"></script>
Dann fügen Sie es in unser Modul ein. Der Code lautet wie folgt:
var routeMod = angular.module('routeMod', ['ngRoute']);
Die nächste Arbeit besteht darin, den Zugriffspfad des HTML-Fragments zu konfigurieren. Wir müssen das aufrufen config-Methode des Moduls Um den $routeProvider-Dienst zu konfigurieren, lautet der Code wie folgt:
routeMod.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/1',{
templateUrl:'tutorial07/page1.html',
controller:'MultiViewController'
})
.when('/2',{
templateUrl:'tutorial07/page2.html',
controller:'MultiViewController'
})
}])Wir definieren eine Ansicht über die ng-view-Direktive und rufen die Methode $location.path() im auf Controller, um anzugeben, welches Fragment in der Ansicht geladen wird.