ng-route && ui-router #8
Description
单层路由使用ng-route
ng-route.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>ng-route</title>
</head>
<body>
<div>
<a href="#/home">home</a>
<a href="#/about">about</a>
<div ng-view=""></div>
</div>
</body>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<!-- 使用id直接把页面信息放在script标签里面 -->
<script type="text/ng-template" id="home.html">
<h1>Home</h1>
</script>
<script type="text/ng-template" id="about.html">
<h1>About</h1>
</script>
<script>
var app = angular.module('myApp',['ngRoute']);
app.controller('homeCtrl',['$scope',function($scope){
}])
app.controller('aboutCtrl',['$scope',function($scope){
}])
app.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/home',{
templateUrl:'home.html',
controller:'homeCtrl'
}).when('/about',{
templateUrl:'about.html',
controller:'aboutCtrl'
}).otherwise({
redirectTo:'/home' //设置默认进入的页面
})
}])
</script>
效果图如下：
