angular.js 路由及页面传参示例


Posted in Javascript onFebruary 24, 2017

页面传参数方法:1、$rootScope。2、(url)/user/:name/:age。

页面转换方法:1、href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" 。2、$state.Go。3、$location.path。4、ui-sref

(1)自带路由ngRoute

<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>AngularJS 路由实例</title> 
  </head> 
  <body ng-app='routingDemoApp' ng-controller="myCtrl"> 
    <h2>AngularJS 路由应用</h2> 
       名: <input type="text" ng-model="names"><br> 
    <ul> 
      <li><a href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页1</a></li> 
      <li><a href="#/second/2/3" rel="external nofollow" >second</a></li> 
      <li><a href="#/printers" rel="external nofollow" >打印机</a></li> 
      <li><a href="#/blabla" rel="external nofollow" >其他</a></li> 
    </ul> 
    <div ng-view></div> 
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" ></script> 
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> 
    <script> 
    var transform =function(data){return $.param(data);  }  
      var app=angular.module('routingDemoApp',['ngRoute']); 
      app.controller('myCtrl', function($scope,$http, $rootScope) { 
         $http({ 
          method:'POST', 
          url:"http://localhost:8090/angu_demo/test.chtm", 
          data:{"age":20 } 
         })  
        .success(function(data,header,config,status){ 
        //响应成功 
          $scope.names = data[0].age; 
          $rootScope.name="rrrrrr"; 
 
        }).error(function(data,header,config,status){ 
        //处理响应失败 
        }); 
      }); 
      app.controller('AboutController', function($scope,$http,$rootScope,$routeParams) { 
         
         $scope.id = $routeParams.id; 
        $scope.age = $routeParams.age;  
        $scope.name=$rootScope.name; 
       
      }) 
      app.config(['$routeProvider', function($routeProvider){ 
        $routeProvider 
        .when('/',{template:'这是首页页面'}) 
        .when('/second/:id/:age', 
          {templateUrl: 'second.html', 
          controller: 'AboutController'} 
        ) 
        .when('/printers',{template:'这是打印机页面'}) 
        .when('/second_2',{template:'这是second_2'}) 
        .otherwise({redirectTo:'/'}); 
      }]); 
       
      
    </script> 
    
    
  </body> 
</html>

(2)ui-router

<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>AngularJS 路由实例 </title> 
     <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>  
 
    <script src="http://cdn.bootcss.com/angular-ui-router/1.0.0-beta.3/angular-ui-router.js"></script>  
   
  </head> 
  <body ng-app="routerApp" > 
  <div ng-controller="MainCtrl"> 
    <ul> 
      <li><a href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页1</a></li> 
      <li><a href="#/second/" rel="external nofollow" >second</a></li> 
      <li><a href="#/third" rel="external nofollow" >third</a></li> 
    </ul> 
    <a href="#/fourth/42" rel="external nofollow" >href传参数</a> 
    <a ui-sref="fifth({'name':123,'id':256})">ui-sref传参数</a> 
    <button ng-click="ngclick_go()" class="btn btn-primary " >state.go传参数</button> 
     <button ng-click="ngclick_location()" class="btn btn-primary " >location传参数</button> 
     <div ui-view></div>  
     <div ui-view="second0"></div>  
    <div ui-view="second1"></div>  
    <div ui-view="second2"></div>  
</div> 
  <script type="text/javascript"> 
   /* var app = angular.module('routerApp', ['ui.router']); */ 
   var app=angular.module('routerApp',['ui.router']); 
   app.controller('MainCtrl', function($scope, $state,$location) { 
     $scope.ngclick_go = function() { 
       $state.go('sixth',{name: 42}); // 跳转后的URL: #/camnpr/appManager 
      }; 
      $scope.ngclick_location = function() { 
        $location.path('/sixth/detail/42'); // 功能也是跳转的 
      }; 
      
      
     
    }); 
    app.config(function($stateProvider, $urlRouterProvider) { 
      $urlRouterProvider.otherwise('/second');  //与原生的$routerProvider写法不一样的就是$urlRouterProvider先写默认路径 
      $stateProvider   //再用$stateProvider.state('',{}).state('',{})...代替$routerProvider.when()方法 
        .state('second', { 
          url: '/second', 
           views: {'second0': { 
              templateUrl: 'second0.html' ,  //看到templateUrl:后面包含了很多的模板 
              controller: 'MainCtrl'  
            }, 
            'second1': { 
              templateUrl: 'second1.html', 
              controller: 'MainCtrl' 
               
            }, 
            'second2': { 
              templateUrl: 'second2.html', 
              controller: 'MainCtrl' 
            } 
          }  
        }) 
        .state('third', { 
          url: '/third', 
          templateUrl: 'third.html' ,   //看到templateUrl:后面包含了很多的模板 
          controller: 'MainCtrl'  
        }) 
         
         .state('fourth', { 
          url: '/fourth/:name', 
          templateUrl: 'forth.html' ,    //看到templateUrl:后面包含了很多的模板 
          controller: function ($stateParams,$scope) { 
            $scope.name=$stateParams.name; 
            alert(=$stateParams.name) 
          } 
 
        }) 
         .state('fifth', { 
          url: '/fifth/:name/:id', 
          templateUrl: 'fifth.html' ,    //看到templateUrl:后面包含了很多的模板 
          controller: function ($stateParams,$scope) { 
            alert($stateParams.name+"  "+$stateParams.id) 
          } 
 
        }) 
        .state('sixth', { 
          url: '/sixth/detail/:name', 
          templateUrl: 'sixth.html' ,    //看到templateUrl:后面包含了很多的模板 
          controller: function ($stateParams,$scope) { 
            alert($stateParams.name) 
          } 
 
        }) 
        /* .state('fourth', { 
          url: '/fourth/:name', 
          templateUrl: 'third1.html' ,    //看到templateUrl:后面包含了很多的模板 
          controller: function ($stateParams,$scope) { 
            $scope.name=$stateParams.name; 
          } 
 
        }) */ 
         
    }); 
  
   </script> 
    
  </body> 
</html>

下载地址:angu_demo_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
实例解析js中try、catch、finally的执行规则
Feb 24 #Javascript
js中开关变量使用实例
Feb 24 #Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 #Javascript
js实现导航吸顶效果
Feb 24 #Javascript
canvas绘制多边形
Feb 24 #Javascript
angularjs实现多张图片上传并预览功能
Feb 24 #Javascript
Angularjs分页查询的实现
Feb 24 #Javascript
You might like
深入分析php之面向对象
2013/05/15 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
javascript测试题练习代码
2012/10/10 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
python 链接和操作 memcache方法
2017/03/04 Python
python写一个md5解密器示例
2018/02/23 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
学院书画协会部门职责
2013/11/28 职场文书
怀念母亲教学反思
2014/04/28 职场文书
七夕情人节促销方案
2014/06/07 职场文书
运动会表扬稿
2015/01/16 职场文书
交警失职检讨书
2015/01/26 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python