世界只因有你2017-05-15 16:59:47
Use ui-router
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap.css" media="all">
<script src="angular.min.js"></script>
<script src="angular-ui-router.min.js"></script>
</head>
<body>
<p class='container'>
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
<p class="row">
<p class="span12">
<p class="well" ui-view></p>
</p>
</p>
</p>
<script type="text/javascript">
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/state1");
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
controller: function($scope) {
$scope.items = ["one","two"];
}
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "partials/state2.list.html",
controller: function($scope) {
$scope.things = ["three",'four'];
}
});
});
</script>
</body>
</html>
迷茫2017-05-15 16:59:47
Because templateurl here is equivalent to initiating an asynchronous request. Maybe because of this, you can try to cache the template that needs to be loaded first. It is recommended to use ui-router