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传参的实例详解的相关资料,这里提供实例帮助大家学习理解这部分内容，需要的朋友可以参考下
AngularJS 嵌套路由：这是我针对同一个主题（ui-router）的第二篇文章. 如果你对第一篇文章感兴趣的话，可以访问 这里. 好了，让我们继续吧，来看看嵌套的ui-router状态是怎么回事. ui-router和同属AngularJS框架一...
正在学习Angularjs和路由的Angularjs和ui-router的一个栗子(新手)
本篇文章主要介绍了详解AngularJs路由之Ui-router-resolve（预加载），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本篇文章主要介绍了AngulaJS路由 ui-router 传参实例 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本解决方案下的ui.router项目是针对angularjs ui.router嵌套路由做的一个demo，程序代码采用VS2013开发，代码齐全,可直接运行。有需要的带走吧~v~v~
AngularJS模块化开发实例--增删改查项目源码（涉及requirejs、Bootstrap、ng路由跳转等）
angularJs自身提供路由ng-router,但是ng-router不是很好用,配置项零散，好比Vue提供的组件传值一样，虽然提供给你了用法，但是开发过程中逻辑一多用着萌萌的，所以我们抛开ng-router来看ui-router。 引入ui-router ...
本篇文章主要介绍了详解AngularJS1.6版本中ui-router路由中/#!/的解决方法，非常具有实用价值，需要的朋友可以参考下
由于某些设计原因，AngularJS原生的路由模块有一些缺点，比如说不支持view的嵌套等，所以有许多社区开始自己设计路由模块，最有代表性的就是ui-route了。 ui-route是一个功能强大的路由模块，它在原生的ng-route模块...
主要介绍了AngularJS ui-router刷新子页面路由的方法，网上虽然有很多种方法，但是都不适合小编，今天小编给大家分享一个还不错的方法，需要的朋友可以参考下
背景引述我之前那篇文章开头给出的使用ui-router框架实现的简单路由, 基于我们的业务需求，需要有不同类型的导航, 一般像那种从一个页面到另外一个页面的导航
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js ...
vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参
UI-Router被认为是AngularUI为开发者提供的最实用的一个模块，它是一个让开发者能够根据URL状态或者说是'机器状态'来组织和控制界面UI的渲染，而不是仅仅只改变路由（传统AngularJS应用实用的方式）。该模块为开发者...
ui-router, 在AngularJS中，使用嵌套视图实现灵活路由的实际解决方案 AngularUI路由器 注意：这是用户界面路由器版本1的Angular 1.x 源。 如果你正在寻找路由器版本 0.2的源，那么可以在这里找到它：。 Angular 中...