angular JS 路由功能

AngularJS支持通过在单个页面上的多个视图的单页应用。要做到这一点AngularJS提供ng-view 和 ng-template指令，以及 $routeProvider 服务。

<!DOCTYPE html>

<html ng-app="myapp">

<head>

<meta charset="UTF-8">

<title></title>

<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>

<script src="js/angular-route.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div class="box" ng-controller="control">

  <a href="#add">添加学生</a>

  <a href="#show">显示学生</a>

</div>

<div ng-view></div>

<script type="text/ng-template" id="add.html">

<h3>添加学生信息</h3>

{{message}}

</script>

<script type="text/ng-template" id="show.html">

<h3>显示学生信息</h3>

{{message}}

</script>

</body>

</html>

<script type="text/javascript">

var app=angular.module("myapp",["ngRoute"]);

//angularjs 1.6.0 以上版本需要配置

app.config(["$locationProvider",function($locationProvider){

$locationProvider.hashPrefix("");

}]);

 

app.config(function($routeProvider){

$routeProvider.when("/add",{templateUrl:"add.html",controller:"control"}).

when("/show",{templateUrl:"show.html",controller:"control2"}).

otherwise({templateUrl:"show.html",controller:"control2"});

})

app.controller("control",function($scope){

$scope.message="这是增加学生信息的页面";

})

app.controller("control2",function($scope){

$scope.message="这是展示学生信息的页面";

})

</script>

 

以下是在上面的例子中需要考虑的重要问题:

  • $routeProvider被定义为使用关键字作为'$routeProvider“下mainapp模块的配置功能；

  • $routeProvider当定义了URL“/add”映射到“add.html”。 add.html应存在于相同的路径主要的html 页面。如果htm页面没有定义，那么ng-template被id=“add.html”使用。我们已经使用了ng-template；

  • “otherwise”是用来设置的默认视图；

  • “controller”是用来设置该视图对应的控制器；

结果如下:

 

posted @ 2017-01-04 17:27  ShineRain  阅读(726)  评论(0)  编辑  收藏  举报