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. Git下的.DS_Store文件

    .DS_Store 是什么 使用 Mac 的用户可能会注意到,系统经常会自动在每个目录生成一个隐藏的 .DS_Store 文件..DS_Store(英文全称 Desktop Services Stor ...

  2. 访问注解（annotation）的几种常见方法

    java的注解处理器类主要是AnnotatedElement接口的实现类实现,为位于java.lang.reflect包下.由下面的class源码可知AnnotatedElement接口是所有元素的父 ...

  3. python tcp 粘包问题解决、文件下载等

    from socket import * #以下是关于tcp:服务端 和 客户端的小例子#服务端socket_server = socket(AF_INET, SOCK_STREAM) socket_ ...

  4. Linux移植之子目录下的built-in.o生成过程分析

    在Linux移植之make uImage编译过程分析中罗列出了最后链接生成vmlinux的过程.可以看到在每个子目录下都有一个built-in.o文件.对于此产生了疑问built-in.o文件是根据什 ...

  5. Varnish 入门

    本文将介绍 varnish 的工作流程,安装以及 varnish 的配置三个方面的内容.首先简单的介绍 varnish 以及其工作流程,大概了解其内部原理,然后介绍了 varnish 的安装方法,最后 ...

  6. gulp中pipe的作用和来源

    gulp的pipe方法是来自nodejs stream API的,并不是gulp本身源码所定义的. 一.pipe方法的作用 pipe跟他字面意思一样只是一个管道 例如我有一堆文件 var s = gu ...

  7. export export defalut

    require/exports 和 import/export 形式不一样 require/exports 的用法只有以下三种简单的写法: const fs = require('fs') expor ...

  8. dede 栏目及子栏目

    结果如图: <ul class="bottom_ul"> {dede:channelartlist } <li><a href="{dede ...

  9. nginx fastcgi负载均衡

    当后端某机器无法连接,或者处理fastcgi请求时异常退出,nginx会将fastcgi请求发送到另外一台机器. 配置文件 http { include mime.types; default_typ ...

  10. IOS初级：NSKeyedArchiver

    NSKeyedArchiver对象归档 首先要实现<NScoding>里面的两个代理方法initWithCoder,encodeWithCoder @property (nonatomic ...