angular.js 路由及页面传参示例
更新时间：2017年02月24日 15:11:29 作者：GOODDEEP
本篇文章主要介绍了angular.js 路由及页面传参示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
页面传参数方法：1、$rootScope。2、（url）/user/:name/:age。
页面转换方法：1、href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" 。2、$state.Go。3、$location.path。4、ui-sref
（1）自带路由ngRoute
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例</title>
</head>
<body ng-app='routingDemoApp' ng-controller="myCtrl">
<h2>AngularJS 路由应用</h2>
名: <input type="text" ng-model="names"><br>
<ul>
<li><a href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页1</a></li>
<li><a href="#/second/2/3" rel="external nofollow" >second</a></li>
<li><a href="#/printers" rel="external nofollow" >打印机</a></li>
<li><a href="#/blabla" rel="external nofollow" >其他</a></li>
</ul>
<div ng-view></div>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
var transform =function(data){return $.param(data); }
var app=angular.module('routingDemoApp',['ngRoute']);
app.controller('myCtrl', function($scope,$http, $rootScope) {
$http({
method:'POST',
url:"http://localhost:8090/angu_demo/test.chtm",
data:{"age":20 }
})
.success(function(data,header,config,status){
//响应成功
$scope.names = data[0].age;
$rootScope.name="rrrrrr";
}).error(function(data,header,config,status){
//处理响应失败
});
});
app.controller('AboutController', function($scope,$http,$rootScope,$routeParams) {
$scope.id = $routeParams.id;
$scope.age = $routeParams.age;
$scope.name=$rootScope.name;
})
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/second/:id/:age',
{templateUrl: 'second.html',
controller: 'AboutController'}
)
.when('/printers',{template:'这是打印机页面'})
.when('/second_2',{template:'这是second_2'})
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
</html>
(2)ui-router
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例 </title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-router/1.0.0-beta.3/angular-ui-router.js"></script>
</head>
<body ng-app="routerApp" >
<div ng-controller="MainCtrl">
<ul>
<li><a href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页1</a></li>
<li><a href="#/second/" rel="external nofollow" >second</a></li>
<li><a href="#/third" rel="external nofollow" >third</a></li>
</ul>
<a href="#/fourth/42" rel="external nofollow" >href传参数</a>
<a ui-sref="fifth({'name':123,'id':256})">ui-sref传参数</a>
<button ng-click="ngclick_go()" class="btn btn-primary " >state.go传参数</button>
<button ng-click="ngclick_location()" class="btn btn-primary " >location传参数</button>
<div ui-view></div>
<div ui-view="second0"></div>
<div ui-view="second1"></div>
<div ui-view="second2"></div>
</div>
<script type="text/javascript">
/* var app = angular.module('routerApp', ['ui.router']); */
var app=angular.module('routerApp',['ui.router']);
app.controller('MainCtrl', function($scope, $state,$location) {
$scope.ngclick_go = function() {
$state.go('sixth',{name: 42}); // 跳转后的URL： #/camnpr/appManager
};
$scope.ngclick_location = function() {
$location.path('/sixth/detail/42'); // 功能也是跳转的
};
});
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/second'); //与原生的$routerProvider写法不一样的就是$urlRouterProvider先写默认路径
$stateProvider //再用$stateProvider.state('',{}).state('',{})...代替$routerProvider.when()方法
.state('second', {
url: '/second',
views: {'second0': {
templateUrl: 'second0.html' , //看到templateUrl:后面包含了很多的模板
controller: 'MainCtrl'
},
'second1': {
templateUrl: 'second1.html',
controller: 'MainCtrl'
},
'second2': {
templateUrl: 'second2.html',
controller: 'MainCtrl'
}
}
})
.state('third', {
url: '/third',
templateUrl: 'third.html' , //看到templateUrl:后面包含了很多的模板
controller: 'MainCtrl'
})
.state('fourth', {
url: '/fourth/:name',
templateUrl: 'forth.html' , //看到templateUrl:后面包含了很多的模板
controller: function ($stateParams,$scope) {
$scope.name=$stateParams.name;
alert(=$stateParams.name)
}
})
.state('fifth', {
url: '/fifth/:name/:id',
templateUrl: 'fifth.html' , //看到templateUrl:后面包含了很多的模板
controller: function ($stateParams,$scope) {
alert($stateParams.name+" "+$stateParams.id)
}
})
.state('sixth', {
url: '/sixth/detail/:name',
templateUrl: 'sixth.html' , //看到templateUrl:后面包含了很多的模板
controller: function ($stateParams,$scope) {
alert($stateParams.name)
}
})
/* .state('fourth', {
url: '/fourth/:name',
templateUrl: 'third1.html' , //看到templateUrl:后面包含了很多的模板
controller: function ($stateParams,$scope) {
$scope.name=$stateParams.name;
}
}) */
});
</script>
</body>
</html>
下载地址：angu_demo_jb51.rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
ng-include 指令用于包含外部的 HTML 文件。包含的内容将作为指定元素的子节点。下面这篇文章主要给大家介绍了Angular.Js中ng-include指令的使用与实现的相关资料，文中介绍的非常详细，需要的朋友们下面来一起看看吧。2017-05-05
这篇文章主要介绍了angularJS 中input示例分享,需要的朋友可以参考下2015-02-02
系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解，感兴趣的朋友一起学习吧2015-12-12
这篇文章主要介绍了angular ngClick阻止冒泡使用默认行为的方法,较为详细的分析了AngularJS中ngClick事件执行原理与阻止冒泡的实现技巧,需要的朋友可以参考下2016-11-11
Angular.js中$apply()和$digest()的深入理解
相信大家都知道$digest()和$apply()是AngularJS中的两个核心并且有时候容易引人误解的部分。我们需要深入理解这两者是如何运作的，从而才能理解AngularJS本身是如何运作的。本文的目的就是介绍$digest()和$apply()是如何确确实实的对你有用的。下面来一起看看吧。2016-10-10
解决angularjs service中依赖注入$scope报错的问题
今天小编就为大家分享一篇解决angularjs service中依赖注入$scope报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
Angular.js中上传指令ng-upload的基本使用教程
这篇文章主要给大家介绍了关于Angular.js中上传指令ng-upload的基本使用方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-07-07
这篇文章主要介绍了AngularJS实现标签页tab选项卡功能,结合实例形式总结分析了各种常用的tab选项卡切换操作实现技巧与相关操作注意事项,需要的朋友可以参考下2018-05-05
本文主要给大家介绍基于AngularJS实现页面滚动到底自动加载数据的功能，通过第三方控件来实现，感兴趣的朋友跟着小编一起看看具体实现代码吧2015-10-10
这篇文章主要介绍了AngularJS入门教程之AngularJS模型的相关资料,需要的朋友可以参考下2016-04-04
最新评论