AngularJS 中ui-view传参的实例详解

2024-02-23 01:16:28

Angular路由传参

首页

<!DOCTYPE html>
<html ng-app="app">
<head>
<title>路由传参</title> 

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css" rel="external nofollow" type="text/css"></link>
</head>
<body>
<div class="container">
  <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
  <div class="navbar-header">
    <a class="navbar-brand" href="#" rel="external nofollow" >柳絮飞祭奠</a>
  </div>
  </div>
</nav>
</div>
<div ng-click="go()" ng-controller="state_go_controller">
    $state.go传参数</div>
 <a ui-sref="param({index:'123'})">传参数</a> 

<div ui-view></div>
</body>
<script type="text/javascript" src="../../plugins/angular/angular.min-1.4.6.js"></script>
  <script type="text/javascript" src="../../plugins/angular/angular-ui-router-0.2.10.js"></script>
<script type="text/javascript">
  var app=angular.module("app",['ui.router']);
  app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
      $stateProvider.state('index1', {
        url : '/index1',
        templateUrl : '/Angular/uiview/param/index1.html'
      }).state('param',{
        url:'/param/:index',
        templateUrl: '/Angular/uiview/param/param.html'
      });
      $urlRouterProvider.otherwise('/index1');
}]).config(function($sceProvider){
  $sceProvider.enabled(false);
});
  app.controller("state_go_controller", function($state, $scope) {
    $scope.go = function() {
      $state.go('param', {
        index : 42
      });
    };
  });
app.controller("view1_controller",function($stateParams){
//接收参数
  alert($stateParams.index);
});
</script>
</html>

跳转页

<div ng-controller="view1_controller"></div> 

 接收参数
 </body>

运行

点击跳转就可以看到alert的参数。

以上就是AngularJS ui-view传参的实例详解，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

AngularJS日程表案例详解

功能:添加事件/完成事件/删除事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .note{ margin:0 auto; background: orange; color: ora
AngularJs导出数据到Excel的示例代码

公司一个新的需求导出Exce表格,研究了一下,最后终于实现,分享给大家. 1 使用FileSaver 第一次采用FileSaver.js 由于刚开始导致导出一片空白,还只能抓取网页里面的表格地址:https://github.com/eligrey/FileSaver.js HTML <div id="exportable"> <table width="100%"> <thead> <tr> <th>Na
Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）

把js的验证方法改成angular可使用的方法 AngularJS文件的写法: $scope.clearNoNum = function(obj,attr){ //先把非数字的都替换掉,除了数字和. obj[attr] = obj[attr].replace(/[^\d.]/g,""); //必须保证第一个为数字而不是. obj[attr] = obj[attr].replace(/^\./g,""); //保证只有出现一个.而没有多个. obj[attr] = o
Angularjs实现下拉框联动的示例代码

第一种联动方式,在网上看到的,感觉对于我的使用性不高,比较后端不会提供这种json... 实现截图 html <select ng-model="s1" ng-options="selectData.name for selectData in selectDatas"> <option value="">--产品类目--</option> </select> <select ng-model
AngularJS中filter的使用实例详解

AngularJS中filter的使用实例详解一.格式化数字为货币格式. <div>{{money|currency:"$"}}</div> <div>{{money|currency:"RMB"}}</div> script: app.controller("crl", function($scope, $filter) { $scope.money="4545"; });
AngularJS通过ng-Img-Crop实现头像截取的示例

最近闲着无聊,写了一个实用代码,AngularJS通过ng-Img-Crop实现头像截取,分享给大家 1.安装插件 bower install ngImgCrop 2.引入插件 <script src="ng-img-crop.js"></script> <link rel="stylesheet" type="text/css" href="ng-img-crop.css" rel="
AngularJS 中ui-view传参的实例详解

Angular路由传参首页 <!DOCTYPE html> <html ng-app="app"> <head> <title>路由传参</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" c
PHP中TP5 上传文件的实例详解

php 文件上传效果图: 实现代码: application\index\controller\Index.php <?php namespace app\index\controller; use think\Controller; use think\Request; class Index extends Controller { //文件上传表单 public function index() { return $this->fetch(); } //文件上传提交 public fu
Vue与Axios的传参方式实例详解

目录 Vue的传参方式: 1.通过name来传递参数 2.通过路径的方式进行传参,需要在在路由配置中占位 2.1.通过v-bind:to的方式进行传参采取params:{key:value}(路径传参) 2.2.直接将参数写在路径上进行传参 3.通过v-bind:to的方式进行传参采取query:{key:value}(问号传参) 4.编程式导航,这是最常用的方式 axios传递参数 1.GET传参 1.1.通过?传参 1.2.通过URL传参 1.3.通过参数传参 2.DELETE传参同GET
Vue-CLI项目中路由传参的方式详解

一.标签传参方式:<router-link></router-link> 第一种 router.js { path: '/course/detail/:pk', name: 'course-detail', component: CourseDetail } 传递层  <router-link :to="`/course/detail
python函数传参意义示例详解

目录 C++这样的语言用多了之后,在Python函数传递参数的时候,经常会遇到一个问题,我要传递一个引用怎么办? 比如我们想要传一个x到函数中做个运算改变x的值: def change(y): y += 1 x = 1 print ("before change:", x) change(x) print ("after change: ", x) 得到的结果是 before change: 1 after change: 1 完全没用~~~这是怎么回事? 我来说
C#中WPF ListView绑定数据的实例详解

C#中WPF ListView绑定数据的实例详解 WPF中ListView用来显示数据十分方便, 我们可以将它分成几个列,每一个列用来显示一条数据,但是又是在一方之中. 那么怎样实现这样的效果的呢,这就要用绑定了. 我们先来看一看他的xmal代码 <ListView Name="receiveList" Grid.Row="0"> <ListView.View> <GridView> <GridView.Columns>
FasfDFS整合Java实现文件上传下载功能实例详解

在上篇文章给大家介绍了FastDFS安装和配置整合Nginx-1.13.3的方法,大家可以点击查看下. 今天使用Java代码实现文件的上传和下载.对此作者提供了Java API支持,下载fastdfs-client-java将源码添加到项目中.或者在Maven项目pom.xml文件中添加依赖 <dependency> <groupId>org.csource</groupId> <artifactId>fastdfs-client-java</arti
java 中Excel转shape file的实例详解

java 中Excel转shape file的实例详解概述: 本文讲述如何结合geotools和POI实现Excel到shp的转换,再结合前文shp到geojson数据的转换,即可实现用户上传excel数据并在web端的展示功能. 截图: 原始Excel文件运行耗时运行结果代码: package com.lzugis.geotools; import com.lzugis.CommonMethod; import com.vividsolutions.jts.geom.Coordina
JAVA 中解密RSA算法JS加密实例详解

JAVA 中解密RSA算法JS加密实例详解有这样一个需求,前端登录的用户名密码,密码必需加密,但不可使用MD5,因为后台要检测密码的复杂度,那么在保证安全的前提下将密码传到后台呢,答案就是使用RSA非对称加密算法解决 . java代码需要依赖 commons-codec 包 RSACoder.Java import org.apache.commons.codec.binary.Base64; import javax.crypto.Cipher; import java.security.
JavaWeb实现文件上传与下载实例详解

在Web应用程序开发中,文件上传与下载功能是非常常用的功能,下面通过本文给大家介绍JavaWeb实现文件上传与下载实例详解. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择采用apache的开源工具common-fileupload这个文件上传组件.这个common-fileupload上传组件的jar包可以去apache官网上面下载,common-fileupload是依赖于c

AngularJS 中ui-view传参的实例详解

相关推荐

随机推荐