angularJs 路由

2016-12-03  本文已影响0人  灿若星宸

设置好请求路径所展示的网页
根据用户的请求路径,跳转到不同的页面

要先安装 angular-route

命令请看官网

demo

//使用ng官方提供的路由
//1.引包  把angular 和 angular-route 引进去
//2.创建模块同时添加依赖项ng-Route
//3.调用模块的config 方法,注入一个$routeProvider对象
//4.使用$routeProvider配置路由表
//5.以HTTP协议测试访问
angular.modular('DemoApp',['ng-Route']).config(['$routeProvider',function($routeProvider){
$routeprovider
  .when('/',{ 
      // 我们利用templateUrl 来写更多的标签
      //templateUrl:""
      template:'<h1>{{name}}</h1>',
      //页面不可能只有一个标签,所以我们添加一个控制器来管理
      controller:'IndexController'
})
  .when('/login',{
      template:'<h1>{{name}}</h1>',
      controller:'loginController'
})
  .when('/register',{
       template:'<h1>{{name}}</h1>',
       controller:'registerController'
})
}])



angular.moudle('DemoApp')
.controller('IndexController',['$scope',function($scope]){
  $scope.name='index'
 }])
 .controller('loginController',['$scope',function($scope]){
  $scope.name='login'
 }])
  .controller('registerController',['$scope',function($scope]){
  $scope.name='register'
 }])

关于测试

单页应用的url 是指#后面的路径

上一篇 下一篇

猜你喜欢

热点阅读