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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
原生JavaScript实现幻灯片效果
Feb 19 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 Javascript
实例解析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 引用(&amp;)详解
2009/11/20 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
Python3读取文件常用方法实例分析
2015/05/22 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
django缓存配置的几种方法详解
2018/07/16 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
python能做什么 python的含义
2019/10/12 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
python3 re返回形式总结
2020/11/20 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
爱岗敬业演讲稿范文
2014/01/14 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
员工给公司的建议书
2019/06/24 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python