<!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>　

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

  1. 路由的Resolve机制（需要了解promise）

    angular的resovle机制,实际上是应用了promise,在进入特定的路由之前给我们一个做预处理的机会 1.在进入这个路由之前先懒加载对应的 .js $stateProvider .state ...

  2. angular路由——ui.route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  3. $stateProvider

    在你的应用中大多数状态都有与其相关联的 url,路由控制不是设计完成 state 之后的事后想法,而是开始开发时就应该考虑的问题. 这里是如何设置一个基本url. 12345 $stateProvid ...

  4. angular使用总结

    一．是否有必要加入模块化框架 1.Reqruiejs seajs的主要作用 (1)模块化,让代码易于维护. angular本身就是mvc,模块化很清晰,所以这点用不到requirejs (2)可以按需 ...

  5. angularJs模块ui-router之路由控制

    在你的应用中大多数状态都有与其相关联的 url,路由控制不是设计完成 state 之后的事后想法,而是开始开发时就应该考虑的问题. 这里是如何设置一个基本url. $stateProvider .st ...

  6. AngularJS 的嵌套路由 UI-Router

    AngularJS 的嵌套路由 UI-Router 本篇文章翻译自:https://scotch.io/tutorials/angular-routing-using-ui-router 演示网站请查 ...

  7. AngularJS ui-router (嵌套路由)

    http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...

  8. 深入理解ANGULARUI路由_UI-ROUTER

    最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研究下,做个笔记,其中大部分为摘抄别人的,做个说明免得被人吐槽. Angularjs ui-router - ...

  9. angular路由

    ngRoute需要引进以下文件 <script src="http://code.angularjs.org/1.2.5/angular.min.js"></sc ...

随机推荐

  1. ArcGIS 网络分析[1.2] 利用1.1的线shp创建网络数据集/并简单试验最佳路径

    上篇已经创建好了线数据(shp文件格式)链接:点我 这篇将基于此shp线数据创建网络数据集. 在此说明:shp数据的网络数据集仅支持单一线数据,也就是说基于shp文件的网络数据集,只能有一个shp线文 ...

  2. Windows Server服务器日常管理技巧

    高效管理服务器一直离不开有效的服务器管理技巧,尽管你已经掌握了不少这方面的技巧,但服务器还有许许多多的技巧在等着你的总结,等着你的挖掘;这不,下面的一些服务器管理窍门就是笔者在最近的工作中总结出来的, ...

  3. Golang丰富的I/O 二----cgo版Hello World

    h1 { margin-top: 0.6cm; margin-bottom: 0.58cm; direction: ltr; color: #000000; line-height: 200%; te ...

  4. 封装简单的equery

    /** * Created by wang on 2016/3/23. */ //绑定操作 function bindEvent(obj,events,fn){ if (obj.addEventLis ...

  5. 5、员工上班时间的问题 - CEO之公司管理经验谈

    员工上班时间一般是根据公司的规章制度来制定的.当然,在不同的地点也有不同的做法.比如北京.上海.广州.深圳这些重点的大点的城市,加班的时间就相对比较多一些.但是按照笔者的想法,一般是一天7-8小时工作 ...

  6. PHP重要知识点

    1 获取文件名或目录路径 getcwd() :显示是 在哪个文件里调用此文件 的目录 __DIR__ :当前内容写在哪个文件就显示这个文件目录 __FILE__ : 当前内容写在哪个文件就显示这个文件 ...

  7. WPF的消息机制（二）- WPF内部的5个窗口之隐藏消息窗口

    目录 WPF的消息机制(一)-让应用程序动起来 WPF的消息机制(二)-WPF内部的5个窗口 (1)隐藏消息窗口 (2)处理激活和关闭的消息的窗口和系统资源通知窗口 (3)用于用户交互的可见窗口 (4 ...

  8. 每天学一点Docker（6）——镜像和DockerFile

    镜像的分层结构: 实际上,Docker Hub 中 99% 的镜像都是通过在 base 镜像中安装和配置需要的软件构建出来的.比如我们现在构建一个新的镜像,Dockerfile 如下: ① 新镜像不再 ...

  9. 嵌入式linux下wifi网卡的使用（四）——应用程序sub_supplicant编译

    有readme先看看readme看看有没有编译的方法 里面告诉我们安装时可能会依赖某些库事实证明会依赖openssl库,之前也使用过openssl 这个文件中有个defualtconfig,先用它做. ...

  10. Centos7下配置Python3和Python2共存，以及对应版本Ipython安装配置

    1.查看是否已经安装Python Centos7默认安装了python2.7.5 因为一些命令要用它比如yum 它使用的是python2.7.5. 使用python -V命令查看一下是否安装Pytho ...