angularJS之路由

時間 2019-11-20

原文原文鏈接

angularJS是一種單頁面web應用（簡稱spa）,路由容許咱們經過不一樣的URL路徑來訪問不一樣的內容，在AngularJS中須要用到 # + 標記的格式；好了，咱們直接看代碼：html

【1】經過a標籤進行跳轉：web

.when("/content4",{template:"4444"})

.otherwise({redirectTo:"/content1"});
}])

</script>

</head>
<body ng-app="app">
<div ng-view></div>
<ul>
<li><a href="#/content1">111</a></li>
<li><a href="#/content2">222</a></li>
<li><a href="#/content3">333</a></li>
<li><a href="#/content4">444</a></li>
</ul>

</body>

【2】經過ng-click跳轉：

<h3>這是第三部分child3.html的頁面{{name3}}</h3>

</p>

.when("/check",{templateUrl:"child/check.html"})

.when("/clear",{templateUrl:"child/clear.html"})

.when("/info",{templateUrl:"child/info.html"})

.otherwise({redirectTo:"/content1"});
}])

</script>

app.controller("child3Controller",["$scope","$location", function ($scope,$location) {
$scope.check= function () {
$location.path("check");
};
$scope.clear= function () {
$location.path("clear");
};
$scope.info= function () {
$location.path("info");
};

}]);

</script>

經過AngularJS的來實現這種效果，寫的代碼看上去仍是比較冗餘，你們能夠學習一下onsenUI中的寫法，那就比較直接簡單了！