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. Struts2把数据封装到集合中之封装到map中

    struts框架封装数据可以封装到集合中也可以封装到map中,该篇博客主要讲解将数据封装到map中. 1. 封装复杂类型的参数(集合类型 Collection .Map接口等) 2. 需求:页面中有可 ...

  2. mvc中webapi添加后没法访问 解决办法

    原因:原先项目中没有webapi,后来添加的. 然后就没法正常访问,百度了下发现是 App_Start/WebApiConfig.cs中路由配置多了个api 而且没有加{action}, 然后修改成: ...

  3. 12. pt-index-usage

    pt-index-usage h=192.168.100.101,P=3306,u=admin,p=admin /data/mysql3306/data/slow.log 根据slow log来判断i ...

  4. Intellij IDEA 快捷键整理-鬼畜版（全键盘开发指南）

    一 .何为鬼畜? 鬼畜一词在ACG爱好者中也代指通过影片(或音讯)剪辑,用频率极高的重复画面(或声音)组合而成的一段节奏配合音画同步率极高的一类影片,而这类鬼畜影片多见于NICONICO.AcFun和 ...

  5. Composer 中文镜像 Lavavel-china 公益项目

    『Composer 中国全量镜像』是由 Laravel China 社区联合 又拍云 与 优帆远扬 共同合作推出的公益项目,旨在为广大 PHP 用户提供稳定和高速的 Composer 国内镜像服务. ...

  6. Python之路(第六篇)Python全局变量与局部变量、函数多层嵌套、函数递归

    一.局部变量与全局变量 1.在子程序中定义的变量称为局部变量,在程序的一开始定义的变量称为全局变量.全局变量作用域是整个程序,局部变量作用域是定义该变量的子程序. 全局变量没有任何缩进,在任何位置都可 ...

  7. js实现环形菜单效果

    点击中间的圆点,会弹出环形菜单,效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  8. Eclipse编辑XML自动提示（zz）

    Eclipse编辑XML自动提示 博客分类: j2se XMLEclipseiBATISSpringSQL  IED Eclipse Java EE IDE for Web Developers: D ...

  9. 【C++】c++中栈 队列 的应用

    C++中提供了STL模板statck 在使用的时候更为方便 除了一般的队列外 还有STL更有双向队列可以使用 #include<deque> 声明:deque <type > ...

  10. Mac版Java安装与配置

    一.下载并安装JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 双击下载的 ...