Angular.js之Router学习笔记

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularRouter</title>

</head>
<body>
  <!--1:-->
  <div ng-app="mymodule">
    <!--通过ui-view属性指定路由模板的填充地点-->
    <div ui-view></div>
  </div>

 

  <!--2:-->
  <div ng-app="mymodule2">
    <a href="" ui-sref="main">The first page </a>
    <a href="#/list">The page of list </a>
  </div>


  <!--3:-->
  <div ng-app="mymodule3">
    <div ui-sref="index">The first page</div>
    <div ui-sref="list">The page of list</div>
    <div ui-view></div>
  </div>


  <!--4:-->
  <div ng-app="mymodule4" ng-controller="ctrl4">
    <a href="" ui-sref="main">The first page </a>
    <a href="#/list">The page of list </a>
    <div ui-view></div>
  </div>


  <!--5:-->
  <div ng-app="mymodule5" ng-controller="ctrl5">
    <a href="" ui-sref="main">The first page </a>
    <a href="" ui-sref='list'>The page of list </a>
    <div ui-view></div>
  </div>


  <!--6:-->
  <div ng-app="mymodule6" ng-controller="ctrl6">
    <a href="" ui-sref="main">The first page </a>
    <a href="" ui-sref='list'>The page of list </a>
    <div ui-view></div>
  </div>


  <script src="http://cdn.bootcss.com/angular-ui-router/0.4.2/angular-ui-router.js"></script>
  <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
  <script type="text/javascript">
    /*Angular.js之Router:
    1:uiRouter默认路由规则操作;路由一定是在控制器之上定义!a:继承ui.router模块;b:配置路由规则,依赖注入:$stateProvider/$urlRouterProvider两个服务;c:指定ui-view位置,确定路由模板显示位置
    2:uiRouter链接上实现路由跳转方式:a:在a链接的href中指定路由规则中定义的url地址。b:在ui-sref属性中指定路由规则中定义的规则名称
    3:uiRouter路由模板设置方式
    4:uiRouter路由控制器使用方式:可以在路由中定义控制器controller,也可以在外部定义好,将controller属性定义为外部控制器的名称即可。
    5:uiRouter路由控制器或指令中执行路由跳转,借助$state服务的go方法,只需将要跳转的路由名称传入该方法即可
    6:uiRouter路由参数设置和$stateParams服务的使用,获取路由地址中的参数值,需要借助$stateParams服务,步骤:->路由地址中指定接收的参数->模板URL地址生成时,传入参数值->通过$stateParams服务获取参数值
    7:uiRouter路由定义高效的父子嵌套路由:两种方式:第一种给路由名称添加命名空间,第二种给路由添加parent属性;模板中也需要指定ui-view,用来显示子视图
    8:uiRouter路由定义超灵活的嵌套路由:给每个ui-view设置一个名称,当发生跳转时,给所有的ui-view都指定显示的模板,
    9:uirouter路由多个view下的父子级视图嵌套使用:@符号指向父级ui-view视图标签;son@main:指定的是main视图下的son子视图*/

  /*1:uiRouter默认路由规则操作;路由一定是在控制器之上定义!a:继承ui.router模块;b:配置路由规则,依赖注入:$stateProvider/$urlRouterProvider两个服务;c:指定ui-view位置,确定路由模板显示位置*/
  let mymodule=angular.module('mymodule',['ui.router']);
  //配置路由规则
  mymodule.config(['$stateProvider','$urlRouterProvider',function($state,$urlRouter){
    //定义路由规则
    $state.state('default',{
      url:'',
      template:'<h1>welcome to puDong store !</h1>'
    });
    $urlRouter.otherwise('');
  }]);

 

  /*2:uiRouter链接上实现路由跳转方式:a:在a链接的href中指定路由规则中定义的url地址。b:在ui-sref属性中指定路由规则中定义的规则名称*/
  //继承ui.router
  let mymodule2=angular.module('mymodule2',['ui.router']);
  //配置路由规则
  mymodule2.config(['$stateProvider','$urlRouterProvider',function($state,$urlRouter){
    //定义路由规则
    $state.state('default',{
      url:'',
      template:'<h1>welcome to puDong store !</h1>'
    }).state('main',{
      url:'/index',
      template:'<h2>This is a main page !</h2>'
    }).state('list',{
      url:'/list',
      template:'<h2>This is a page of list !</h2>'
    });
    $urlRouter.otherwise('');
   }]);

  /*3:uiRouter路由模板设置方式*/
  var mymodule3=angular.module('module3',['ui.router']);
  mymodule3.config(['$stateProvider','urlRouterProvider',function($state,$urlRouter){
    $state.state('default',{
      url:'',
      template:'<h1>welcome to puDong store !</h1>'
    }).state('index',{
      url:'/index',
      template:''
    }).state('list',{
      url:'/list',
      template:'<h2>This is a page of list !</h2>'
    });
    $urlRouter.otherwise('');
  }]);

  /*4:uiRouter路由控制器使用方式:可以在路由中定义控制器controller,也可以在外部定义好,将controller属性定义为外部控制器的名称即可。*/
  var mymodule4=angular.module('module4',['ui-router']);
  mymodule4.config(['$stateProvider','urlRouterProvider',function($state,$urlRouter){
    $state.state('default',{
      url:'',
      template:'<h1>welcome to puDong store !</h1>'
    }).state('index',{
      url:'/index',
      templateUrl:'router4.html',
      /*controller:['$scope',function($scope){
        $scope.title='puDong store';
      }]*/
      controller:'ctrl4'
    }).state('list',{
      url:'/list',
      template:'<h2>This is a page of list !</h2>'
    });
    $urlRouter.otherwise('');
  }]);
  mymodule4.controller('ctrl4',['$scope',function($scope){
    $scope.title='puDong store';
  }])

 

  /*5:uiRouter路由控制器或指令中执行路由跳转,借助$state服务的go方法,只需将要跳转的路由名称传入该方法即可*/
  var mymodule5=angular.module('module5',['ui-router']);
  mymodule5.config(['$stateProvider','urlRouterProvider',function($state,$urlRouter){
    $state.state('default',{
      url:'',
      template:'<h1>welcome to puDong store !</h1>'
    }).state('index',{
      url:'/index',
      templateUrl:'router5.html',
      controller:'ctrl5'
    }).state('list',{
      url:'/list',
      template:'<h2>This is a page of list !</h2>'
    });
    $urlRouter.otherwise('');
  }]);
  mymodule5.controller('ctrl5',['$scope','$state',function($scope,$state){
    $scope.go=function(){
      $state.go('list');
     }
  }])

  /*6:uiRouter路由参数设置和$stateParams服务的使用,获取路由地址中的参数值,需要借助$stateParams服务,步骤:->路由地址中指定接收的参数->模板URL地址生成时,传入参数值->通过$stateParams服务获取参数值*/
  var mymodule6=angular.module('module6',['ui-router']);
  mymodule6.config(['$stateProvider','urlRouterProvider',function($state,$urlRouter){
    $state.state('default',{
      url:'',
      template:'router6.html',
      controller:'ctrl6'
    }).state('list',{
      url:'/list/{id}',
      template:'<p>UserName:{{user.name}}</p>',
      controller:'ctrl6'
    });
    $urlRouter.otherwise('/list');
   }]);
  mymodule6.controller('ctrl6',['$scope','$http','$stateParams',function($scope,$http,$stateParams){
    $http({
      method:'get',
      url:'http://localhost/ajax.php',
      cache:true,
    }).then(function(res){
      $scope.data=res.data;
      let id=$stateParams.id;
    if(id){
      $scope.data.forEach(function(v){
        if(v.id==id) $scope.user=v;
      });
    }
  });
  }]);
</script>
</body>
</html>

posted @ 2017-02-24 21:52  焦大叔  阅读(743)  评论(0编辑  收藏  举报