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

结果如下:

 

查看更多关于angular JS 路由功能的详细内容...