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" 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="#">柳絮飞祭奠</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传参的更多相关文章

  1. vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...

  2. Vue Router路由导航及传参方式

    路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...

  3. 关于angularjs的$state.go()与ui-sref传参问题

    上次转发过关于angularjs回退的文章,回退用到的还是js的回退功能,直接用history.back();实现功能,当时顺便提了下$state.go()有关路由跳转. 那这回就全面解析下$stat ...

  4. Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

    目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...

  5. Vue之路由跳转 传参 aixos 和cookie

    一.路由跳转 1.1 项目的初始化 vue create m-proj   >>>创建vue项目 精简vue项目的 views 视图   About(基本是删除的) Home.(可以 ...

  6. 夺命雷公狗—angularjs—22—bind改指向和传参方式

    在angularjs中的传参的jquery的方式是极度相似的噢,而且还可以通过bind来改变指向 <!DOCTYPE html> <html lang="en" ...

  7. Tornado学习笔记(二) 路由/post/get传参

    本章我们学习 Tornado 的路由传参等问题 路由 路由的匹配 Tornado的路由匹配采用的是正则匹配 一般情况下不需要多复杂的正则,正则的基本规则如下(站长之家) 举个例子 (r'/sum/(\ ...

  8. angularjs 请求数据转换为Form Data传参

    在angularjs中配置好服务,有时传参会导致后台借不到值或者后台直接报错: 这就与后台框架有关,如果后台是以public ModelAndView接收接口传过来的参数,这种情况,前台传参的形式比较 ...

  9. ionic简单路由及页面传参

    1)页面跳转及传参方法 angular.module('app.routes', [])//routes路由模型 .config(function($stateProvider, $urlRouter ...

随机推荐

  1. call指令

    CPU执行call指令时,进行两步操作: 将当前的IP或CS和IP压入栈中; 转移. call指令不能实现短转移,除此之外,call指令实现转移的方法和jmp指令的原理相同. 1)依据位移进行转移的c ...

  2. coding利用Webhook实现Push代码后的jenkins自动构建

    安装jenkins 篇:http://www.cnblogs.com/loveyouyou616/p/8714544.html 之前部署了持续集成工具jenkins.通常是开发后的代码先推到 远程代码 ...

  3. go语言中的并发

    package main; import ( "fmt" "runtime" "sync" ) //goruntine奉行通过通信来共享内存 ...

  4. 梦殇 chapter five

    一弦情殇未谱,半纸离愁难书,不记年,叹花开几度...... 蜡烛用它自己的死亡来温暖别人,奉献自己的同时,它内心是快乐的吗?那残留的蜡油是它的泪水,还是它快乐的预兆? 这个世界上除了父母家人外,会有真 ...

  5. 分析入口文件main.php

    在分析之前,需要了解php cli模式下的编程 1.了解getopt函数,php手册地址:http://php.net/manual/zh/function.getopt.php static pri ...

  6. VFIO简介 （转载）

    VFIO简介 LTCChina | Nov 20 2013 | Comment (1) | Visits (15204) 概述 VFIO是一套用户态驱动框架,它提供两种基本服务: 向用户态提供访问硬件 ...

  7. java.lang.NoClassDefFoundError: org/apache/ibatis/cursor/Cursor

    因为mybatis的版本和mybatis-spring的版本不兼容导致的,解决方法:mybatis的3.4.0及以上版本用mybatis-spring1.3.0及以上版本:mybatis的3.4.0以 ...

  8. 0 or 1,1 and 0

    最近小编遇到很头疼的的一件事 就是以下这几道运算题 ,以下结果是小编经过大量的运算得出的 一.或运算 1.0 or 1 结果为:1 2.1 or 0 结果为:1 3.1 or 2 结果为:1 4.2 ...

  9. BZOJ1233 干草堆 - 单调队列优化DP

    问题描述: 若有干个干草, 分别有各自的宽度, 要求将它们按顺序摆放, 并且每层的宽度不大于 它的下面一层 ,  求最多叠几层 题解: zkw神牛证明了: 底边最短, 层数最高         证明: ...

  10. sqrt函数倒数计算新对比

    某人发表说 雷神之锤 里面有一个 1/sqrt(x) 的函数非常了不起. 但经过实测,发现现在计算机已经优化, 该算法已经没有优势. 具体看文档: <a href="http://fi ...