angular $stateProvider 路由的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="libs/angular/angular.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/angular-route/angular-ui-router.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.active{
				color:red;
				font-size: 30px;
			}
		</style>
	</head>
	<body ng-app=‘app‘ ng-controller=‘controller‘>
		<a ui-sref=‘page1‘ href=‘‘ ng-click=‘change(1)‘ ng-class=‘{"active":num == 1}‘>页面1</a>   //ui-sref进行状态的跳转,点击后触发page1的状态,状态触发后才会执行控制器函数;
		<a ui-sref=‘page2‘ ng-click=‘change(2)‘ ng-class=‘{"active":num == 2}‘>页面2</a>
		<a ui-sref=‘page3‘ ng-click=‘change(3)‘ ng-class=‘{"active":num == 3}‘>页面3</a>
		<a ui-sref=‘page4‘ ng-click=‘change(4)‘ ng-class=‘{"active":num == 4}‘>页面4</a>
		<a ui-sref=‘page5‘ ng-click=‘change(5)‘ ng-class=‘{"active":num == 5}‘>页面5</a>
		<h1 ng-click=‘goTo()‘>go to p5</h1>
		<h1 ui-view></h1>        //ui-view 状态跳转的页面会在这里展示
		<h1>index</h1>
		<script type="text/javascript">
			var app=angular.module(‘app‘,[‘ui.router‘]);  //注入ui.router路由模块
			app.config(function($stateProvider,$urlRouterProvider){
				$urlRouterProvider.when(‘‘,‘/page1‘);   //$urlRouterProvider初始化跳转的状态,首先想展示哪一个页面
				$stateProvider.state(‘page1‘,{  //定义状态,出发此状态,将会跳转templateurl页面
					url:‘/page1/:id‘,       //:id定义参数;定义方式三种 1./page1/:id/:name 2./page1/{id}/{name}/ 3./page1?id&name 在跳转页面用$stateParams接收
					templateUrl:"page1.html",
				}).state(‘page2‘,{
					url:‘/page2‘,
					templateUrl:"page2.html"
				}).state(‘page3‘,{
					url:‘/page3‘,
					templateUrl:"page3.html"
				}).state(‘page4‘,{
					url:‘/page4‘,
					templateUrl:"page4.html"
				}).state(‘page5‘,{
					url:‘/page5/{id}/{name}‘,
					templateUrl:"page5.html"                       controller:function($stateParams){                                                                       alert($stateParams.id);}});         //这里可以写控制器函数。
			  });
			app.controller(‘controller‘,function($stateParams,$scope,$state){
				console.log($stateParams);
				$scope.change=function(num){
					$scope.num=num;
				};
				$scope.goTo=function(){
						$state.go(‘page5‘,{id:10,name:‘wang‘})	; //$state.go()跳转触发某一状态,并传入一个对象;
				}
			});
			app.controller(‘page1‘,function($stateParams){
				console.log($stateParams);    // 这里将接受到传入的参数对象
			});
			app.controller(‘page2‘,function($stateParams){
				console.log($stateParams);
			});
			app.controller(‘page3‘,function($stateParams){
				console.log($stateParams);
			});
			app.controller(‘page4‘,function($stateParams){
				console.log($stateParams);
			});
			app.controller(‘page5‘,function($stateParams){
				console.log($stateParams);
			});
		</script>
	</body>
</html> 
时间: 2024-10-20 06:31:20

angular $stateProvider 路由的使用的相关文章

【angular.js】UI-Router之angular路由学习

AngularJs中的路由,应用比较广泛,主要是允许我们通过不同的url访问不同的内容,可实现多视图的单页web应用.下面看看具体怎么使用. 关于路由 通常我们的URL形式为http://jtjds.cn/first/page,但在单页web应用中angularjs通过#+标记实现,比如下面的页面,将是下文中的路由列子. http://192.168.1.109:8000/angular-program/src/main.html#/pagetable/page1 http://192.168.

路由的Resolve机制(需要了解promise)

angular的resovle机制,实际上是应用了promise,在进入特定的路由之前给我们一个做预处理的机会 1.在进入这个路由之前先懒加载对应的 .js 1 $stateProvider 2 .state('owner_detail_room',{ 3 url: '/owner_detail_room/{id:[0-9]{1,10}}', 4 views:{ 5 'main' : { 6 templateUrl:function() { return 'templates/owner_det

AngularJS路由系列(6)-- UI-Router的嵌套State

本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两个部分视图分别对应state1和state2,那state与state1和state2形成了嵌套关系. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新.查看路由,路由事件和URL格式,获取路由参数,路由的Resolv

AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI-Router的onEnter和onExit事件 AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新.查看路由,路由事件和URL格式,获取路由参数,路由的Resolve3.AngularJS路由系列(3)-- UI-Rou

AngularJS路由系列(3)-- UI-Router初体验

本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新.查看路由,路由事件和URL格式,获取路由参数,路由的Resolve3.AngularJS路由系列(3)-- UI-Router初体验4.AngularJS路由系列(4)-- UI-Router的$state服务.路由事件.获取路由参数5.AngularJS路由系列(5)-- UI-Router的路由

AngulaJS路由 ui-router 传参

在这里分享我做的一个使用ui-router 传参的小demo 1.首先第一步设置入口文件index.html,注意加载的顺序,先加载包,再加载自己写的控制器. <!doctype html> <html lang="en" ng-app="routerApp"> <head> <meta charset="utf-8"> <meta name="viewport" cont

半小时入门Angular 2

本文首发于由电子工业出版社出版<揭秘Angular 2>一书,基于第5章概览改写. 作者简介:广发证券互联网金融技术团队,是Angular早期坚定的践行者.作为全新一代的证券业 IT 研发组织,团队致力于用更新更好的技术打造行业方案.支持业务创新. 责编:陈秋歌,寻求报道或者投稿请发邮件至chenqg#csdn.net,或加微信:Rachel_qg. 了解更多前沿技术资讯,获取深度技术文章推荐,请关注CSDN研发频道微博. Angular 2.0 于去年 9 月正式发布. 尽管同一时间里 Re

angularJs模块ui-router之路由控制

原文地址:http://bubkoo.com/2014/01/02/angular/ui-router/guide/url-routing/ 在你的应用中大多数状态都有与其相关联的 url,路由控制不是设计完成 state 之后的事后想法,而是开始开发时就应该考虑的问题. 这里是如何设置一个基本url. $stateProvider .state('contacts', { url: "/contacts", templateUrl: 'contacts.html' }) 当我们访问i

ionic路由(页面切换)

ui-router 的工作原理非常类似于 Angular 的路由控制器,但它只关注状态. • 在应用程序的整个用户界面和导航中,一个状态对应于一个页面位置 • 通过定义controller.template和view等属性,来定义指定位置的用户界面和界面行为 • 通过嵌套的方式来解决页面中的一些重复出现的部位 最简单的形式 模板可以通过下面这种最简单的方式来指定 <!-- in index.html --> // in app-states.js (or whatever you want t