<!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. bzoj 4515: [Sdoi2016]游戏

    Description Alice 和 Bob 在玩一个游戏. 游戏在一棵有 n 个点的树上进行.最初,每个点上都只有一个数字,那个数字是 123456789123456789. 有时,Alice 会 ...

  2. php-基础知识-apache服务器

    一.支持php的服务器有:iis.apache.lighted(德国制造).nginx(俄罗斯制造,功能强大[反向代理.服务器集群.流媒体服务器........].轻量) 二.今天主要分享apache ...

  3. Linux第七节随笔 diff /uniq /stat

    linux第七讲(上)1.diff link 作用:diff命令能比较单个文件或者目录内容.如果指定比较的是文件,则只有当输入为文本文件时才有效.以逐行的方式,比较文本文件的异同处. 如果指定比较的是 ...

  4. JMeter数据库操作详解

    Jmeter提供了JDBC连接的插件,通过执行SQL语句的java API,实现对数据库的访问和查询,同时可以操作一次向数据库插入上百条上千条数据. 一.安装驱动包 将需要连接JDBC的jar包放入j ...

  5. ContentResolver,ContentProvider,ContentObserver使用记录

    版权声明:本文出自汪磊的博客,转载请务必注明出处. 本篇博客只是记录一下ContentProvider的使用(这部分工作中用的比较少总是忘记),没有太深入研究.已经熟练掌握使用方式,想深入了解内部机制 ...

  6. Struts2学习笔记（1）---相关配置

    Struts 2是Struts的下一代产品,是在 struts 1和WebWork的技术基础上进行了合并的全新的Struts 2框架. 1创建action对象(三种) 1 创建普通的类,不继承任何类, ...

  7. Hibernate学习笔记（1）---hibernate快速上手与准备工作

    持久层介绍 持久化:将内存中的数据保存在磁盘等存储设备中. 持久化对象:指已经存储在数据库护着磁盘的业务对象 经典的软件应用体系结构(三层结构) 在三层结构中,由于业务逻辑除了负责业务逻辑以外,还要负 ...

  8. Yarn篇--搭建yran集群

    一.前述 有了上次hadoop集群的搭建,搭建yarn就简单多了.废话不多说,直接来 二.规划 三.配置如下 yarn-site.xml配置 <property>        <n ...

  9. Java学习笔记16---抽象类与接口的浅显理解

    抽象类是由abstract修饰的类,定义方式如public abstract class A{...}. 接口由interface修饰,定义方式如public interface B{...}. 抽象 ...

  10. 北斗时钟同步系统-GPS卫星授时设备-NTP网络校时服务器

    北斗时钟同步系统-GPS卫星授时设备-NTP网络校时服务器 北斗时钟同步系统-GPS卫星授时设备-NTP网络校时服务器 北斗时钟同步系统-GPS卫星授时设备-NTP网络校时服务器 论述当下网络时间同步 ...