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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
详解Angular4中路由Router类的跳转navigate
最近一直在学习angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习. 官方地址:https://angular.cn/docs/ts/latest/api/router/index/Router-class.html 在学习的过程中路由(router)机制是离不开的,并且好多地方都要用到. 首先路由配置Route: import { NgModule } from '@angular/core'; im
-
AngularJS中的路由使用及实现代码
前 言 本章节将为大家介绍 AngularJS 路由.AngularJS 路由允许我们通过不同的 URL 访问不同的内容.通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 1.1 Angular JS路由基础知识讲解 在AngularJS中使用路由: 1. 导入路由文件:angular-route.js 2. 在主模块中注入"ngRoute". angular.module("app",[
-
Angularjs制作简单的路由功能demo
从官网下载了最新版本的Angularjs 版本号:1.3.15 做一个简单的路由功能demo 首页:index.html <!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>测试</title> <script src="./js/angular.min.js"></script> <scri
-
AngularJS监听路由变化的方法
使用AngularJS时,当路由发生改变时,我们需要做某些处理,此时可以监听路由事件,常用的是$routeStartChange, $routeChangeSuccess.完整例子如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"
-
AngularJS路由实现页面跳转实例
AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是在同一个页面动态加载不同的内容,而这里的"跳转"可以理解为是局部页面的跳转. AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置,下面是一个简单应用AngularJS路由来实现页面"跳转"的实例: 使用app.config来定义不同的lo
-
angular.js之路由的选择方法
在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块.模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的. 乍一看非常普通的东西,但是仔细想想就可以发现,这种思想可以解决非常多的资源. 例如,假如有一个页面,需要显示1000种商品的信息,每个商品的表现形式各不相同(设他们有各自独立的css和js),那么一般来说,我们就需要准备1000张网页去加载这些信息.但是,使用这种模块化思想,我们就可以仅仅在后台设定1000个各不相同的
-
AngularJS监听路由的变化示例代码
话不多说,我们下面直接来看实现的示例代码 [一]Angular 路由状态发生改变时可以通过' $stateChangeStart '.' $stateChangeSuccess '.' $stateChangeError '监听,通过注入'$location'实现状态的管理 代码示例如下: function run($ionicPlatform, $location, Service, $rootScope, $stateParams) { //路由监听事件 $rootScope.$on('$s
-
AngularJS 路由和模板实例及路由地址简化方法(必看)
最近一同事在学习AngularJS,在路由与模板的学习过程中遇到了一些问题,于是今天给她写了个例子,顺便分享出来给那些正在学习AngularJS的小伙伴们. 话说这AngularJs 开发项目非常的爽,其中爽就爽在它的开发模式,使得代码更加的清晰.更加具有可读性.更简洁.更具有维护性.但是在使用AngularJS开发的过程中也有让我头疼的地方,那就是目前前端框架更多的还是以Jquery为主,很多插件都是依赖于Jquery的,AngulaJS的插件少之又少(除了AngularUI其他的Angula
-
AngularJS 路由详解和简单实例
AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如: http://runoob.com/#/first http://r
-
使用AngularJS对路由进行安全性处理的方法
简介 自从出现以后,AngularJS已经被使用很长时间了. 它是一个用于开发单页应用(SPA)的javascript框架. 它有一些很好的特性,如双向绑定.指令等. 这篇文章主要介绍Angular路由安全性策略. 它是一个可用Angular开发实现的客户端安全性框架. 我已经对它进行了测试. 除了保证客户端路由安全性外,你也需要保证服务器端访问的安全性. 客户端安全性策略有助于减少对服务器进行额外的访问. 然而,如果一些人采用欺骗浏览器的手段访问服务器,那么服务器端安全性策略应当能够拒绝未授