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”是用来设置该视图对应的控制器；
结果如下:
