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. nginx安装扩展 sub_filter&http_ssl_module

    nginx之所以轻,因为默认没有安装各种各样的扩展: nginx安装扩展插件: 下面列出两个可能会用到的插件 一.sub_filter内容过滤器,这个在nginx做http转发的时候会很常用 1.下载 ...

  2. 10-okHttp的同步与异步

    我的理解如下: 同步: 实时的在等待返回结果: 异步:可以不是同步执行的,放入到执行队列中. 所以建议:如果需要根绝请求的结构做些判断应当用 同步,异步可能由于时间先后出现问题. /*post异步请求 ...

  3. xshell实时跟踪日志与中文乱码设置

    1.实时跟踪日志命令 tail -f logName.log 动态查看名为logName的日志信息 ctrl+c 退出实时跟踪 2.中文乱码设置 在Xshell.putty.SSH Secure Sh ...

  4. [z]一分钟教你知道乐观锁和悲观锁的区别

    悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁.传统的关系型数据 ...

  5. code first 添加外键时，与原有的数据冲突ALTER TABLE 语句与 FOREIGN KEY 约束"FK_XXXXX"冲突

    问题的原因是新增的外键字段没有默认值,造成的,有很多方法可以解决,我这里通过修改生成的迁移文件,设定为可空,或者设置默认值即可.具体看情况使用.

  6. Linux驱动之内核加载模块过程分析

    Linux内核支持动态的加载模块运行:比如insmod first_drv.ko,这样就可以将模块加载到内核所在空间供应用程序调用.现在简单描述下insmod first_drv.ko的过程 1.in ...

  7. txt写入时报错出现:正由另一进程使用,原来是多此一举的操作

    //if (!File.Exists(newfilepath + "\\" + name + num + ".txt")) //{ // File.Create ...

  8. 2Q - Fibbonacci Number

    Your objective for this question is to develop a program which will generate a fibbonacci number. Th ...

  9. angular2.0学习笔记2.创建hello world项目

    1.打开终端命令行窗口 2.切换到指定目录 E:\cd myobject 3.创建新项目 ng new angular2-helloworld 4.创建成功后,在angular2-helloworld ...

  10. IDEA工具 常用的设置

    以下均为笔者常用的的设置. 首先选择菜单栏的选项:“File” ----> “settings” 1.字体设置 (1)代码区的字体设置 如下图的选择,"Primary font&quo ...