The example in this article describes the usage of AngularJS multi-view switching. Share it with everyone for your reference, the details are as follows:
In AngularJS applications, we can write the html fragments in a separate file, and then load the fragments in other pages. If there are multiple fragment files, we can also dynamically load different fragments in the controller based on user operations to achieve the effect of switching views.
Let’s first take a look at a case written by the author:

These two poems are actually two html fragments, written in page1.html and page2.html respectively. The following is the content of these two files:
<!--page1.html內(nèi)容-->
<div>
<p>《南鄉(xiāng)子·登京口北固亭有懷》</p>
<p>何處望神州?滿眼風(fēng)光北固樓。千古興亡多少事,悠悠,不盡長(zhǎng)江滾滾流。</p>
<p>年少萬(wàn)兜鍪,坐斷東南戰(zhàn)未休。天下英雄誰(shuí)敵手,曹劉。生子當(dāng)如孫仲謀。</p>
</div>
<!--page2.html內(nèi)容-->
<div>
<p>《蝶戀花》</p>
<p>佇倚危樓風(fēng)細(xì)細(xì),望極春愁,黯黯生天際。草色煙光殘照里,無(wú)言誰(shuí)會(huì)憑闌意。</p>
<p>擬把疏狂圖一醉,對(duì)酒當(dāng)歌,強(qiáng)樂(lè)還無(wú)味。衣帶漸寬終不悔,為伊消得人憔悴。</p>
</div>
Next, let’s see how to switch between these two fragments.
<!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()">上一頁(yè)</button>
<button ng-click="nextPage()">下一頁(yè)</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>
Here we need to use the routing module ngRoute of AngularJs. The module code is encapsulated in the angular-route.js file. Like the previous section, we need to introduce it.
<script type="text/javascript" src="angular-1.3.0.14/angular-route.js"></script>
Then inject it into our module, the code is as follows:
var routeMod = angular.module('routeMod', ['ngRoute']);
The next work is to configure the access path of the html fragment. We need to call the config method of the module to configure the $routeProvider service, the code is as follows:
routeMod.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/1',{
templateUrl:'tutorial07/page1.html',
controller:'MultiViewController'
})
.when('/2',{
templateUrl:'tutorial07/page2.html',
controller:'MultiViewController'
})
}])
We define a view through the ng-view directive, and call the $location.path() method in the controller to specify which fragment to load in the view.