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中的写法，那就比较直接简单了！