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-Router是一个强大的状态管理工具，它允许我们定义复杂的导航结构并管理页面间的路由。本文将深入讲解如何在UI-Router中使用`ui-view`进行参数传递，以及如何在目标视图中接收这些参数。 首先，...
3. **Angular-UI-Router**：虽然AngularJS原生的路由系统已经很强大，但Angular-UI-Router提供了更高级的状态管理功能。它可以处理更复杂的导航结构，如嵌套路由，允许在同一个视图中展示多个子视图，并支持命名视图...
AngularJS 嵌套路由：这是我针对同一个主题（ui-router）的第二篇文章. 如果你对第一篇文章感兴趣的话，可以访问 这里. 好了，让我们继续吧，来看看嵌套的ui-router状态是怎么回事. ui-router和同属AngularJS框架一...
UI-Router是AngularJS的一个第三方路由插件，它为AngularJS的应用提供了更高级的路由和导航管理功能。 在AngularJS中，路由是非常关键的一部分，它允许用户在不刷新整个页面的情况下跳转到不同的视图。默认的...
在AngularJS中，路由管理是实现单页面应用（SPA）的核心功能之一，通过它可以实现页面之间的无缝切换。ui-router是AngularJS中的一个路由模块，它在ng-route模块的基础上提供了更多的灵活性和强大的功能，尤其适合...
AngularJS UI.Router是一个强大的路由模块，它为AngularJS应用程序提供了更复杂的导航结构和状态管理功能。这个"angularjs ui.router嵌套路由demo"是展示如何在AngularJS项目中使用UI.Router进行多级路由配置和页面...
AngularJS中的ui-router模块是实现客户端应用程序中复杂状态管理的一个非常有用的库，它支持单页应用（SPA）中的多视图和嵌套路由管理。 在使用ui-router来实现多层嵌套路由时，开发者需要按照ui-router的状态配置...
在这里分享我做的一个使用ui-router 传参的小demo 1.首先第一步设置入口文件index.html，注意加载的顺序，先加载包，再加载自己写的控制器。 <!doctype html> <html lang="en" ng-app="routerApp"> <...
UI-Router是AngularJS的一个扩展，专注于解决更复杂的页面路由问题。 在给定的压缩包文件中，我们有三个关键文件： 1. **AngularJS 中文API参考手册.chm**：这是一个帮助文件，包含了AngularJS的中文API文档。通过...
【AngularJS ui-router (嵌套路由)】 在AngularJS中，路由是用于处理应用程序导航和视图呈现的核心机制。ui-router是AngularJS的一个第三方模块，它扩展了原生的ng-route，提供了更强大的功能，包括支持嵌套路由和...
项目使用 angularJS ui-router-tabs angular-ui-router 实现tab页切换， 1、亮点 1）tab页间切换缓存tab页数据 2）刷新页面，保留已经打开的tab页，当前活动tab为上次活动的tab 3）使用嵌套路由，实现单页面应用
AngularJS是构建SPA的理想选择，因为它提供了路由、模块化和状态管理等特性，使构建SPA变得更为便捷。 **ASP.NET MVC** ASP.NET MVC是一个用于构建Web应用程序的开源框架，它采用模型-视图-控制器设计模式。模型...
AngularJS是一种流行的前端JavaScript框架，它允许开发者利用它的MVC（模型-视图-控制器）特性来构建复杂的、单页的web应用。AngularJS的代码风格指南是用来指导开发者如何编写一致、可维护、高效的代码的一套规则和...
`UI-Router`是AngularJS的一个第三方扩展，它提供了更高级的路由功能，包括视图的嵌套、命名视图、抽象状态等。下面我们将深入探讨`UI-Router`的主要特性和用法。 1. **安装和引用** 使用`UI-Router`之前，需要在...
在AngularJS 1.6版本中，UI-Router的路由机制发生了一些变化，导致原本常见的href="#…"或href="#/…"的写法无法正常工作，而出现“#!/…”的格式。这种变化是由于AngularJS引入了一种名为HTML5 Mode的路由模式，它...
ui-router是AngularJS中用于管理复杂应用状态和路由的一个扩展模块。在使用ui-router构建单页面应用（SPA）时，经常需要刷新特定的路由或子路由，以更新视图、模型或控制器。在AngularJS应用中，刷新子页面路由是一...
UI-Router是AngularJS的一个扩展模块，提供了更高级的路由功能，如嵌套路由、命名视图和并行视图等。 标题“angular.js ui-router 用法示例demo”指的是一个展示AngularJS中UI-Router实际应用的实例。这个示例旨在...