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. Java_7.1 ArrayList应用点名器

    1.ArrayList同样可以添加自定义的类 将学生类添加到ArrayList集合中,其中学生类包括学生姓名,年龄 自定义学生类 package demo1; public class Student ...

  2. mysql 数据库名称，中间带有中划线问题

    插入数据时候,引用了数据库名,数据库名中有横线,会提示错误: You have an error in your SQL syntax; check the manual that correspon ...

  3. JNI开发篇——报错：Flag android.useDeprecatedNdk is no longer supported and will be removed in the next……

    大概意思就是说: android.useDeprecatedNdk不再支持了 让使用CMake or ndk-build 然后还有链接 解决方法: 1.先通过SDKManager下载:CMake和LL ...

  4. Bootstrap(8) 路径分页标签和徽章组件

    一．路径组件路径组件也叫做面包屑导航.//面包屑导航 <ol class="breadcrumb"> <li><a href="#" ...

  5. ubuntu14.04 安装系统/搜狗/QT/qq/wps/CAJviewer

    1.安装ubuntu系统     http://jingyan.baidu.com/album/4dc40848491fc5c8d946f1b1.html?picindex=1 官方网站:    ht ...

  6. 微软官方的.net开发人员代码示例

    微软官方的.net开发人员代码示例,需要的同学到这里下载: https://code.msdn.microsoft.com/

  7. Pandas设置值

    1.创建数据 >>> dates = pd.date_range(', periods=6) >>> df = pd.DataFrame(np.arange(24) ...

  8. Linux系统和性能监控之CPU篇

    Linux系统和性能监控之CPU篇 性能优化就是找到系统处理中的瓶颈以及去除这些的过程.本文由sanotes.net站长tonnyom在2009年8月翻译自Linux System and Perfo ...

  9. 虚拟机安装centos7, 再安装gitlab 简单步骤

    先安装Linux centos7(朋友贡献的. Linux官网有下) 我自己用vm安装的. 未出现特殊状况 gitlab的搭建 安装基础包 yum -y install curl policycore ...

  10. VirtualBox安装android-x86-4.4-r2

    https://jingyan.baidu.com/album/a681b0de1373133b184346cf.html?picindex=10