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>
angular $stateProvider 路由的使用的更多相关文章
- 路由的Resolve机制（需要了解promise）
angular的resovle机制,实际上是应用了promise,在进入特定的路由之前给我们一个做预处理的机会 1.在进入这个路由之前先懒加载对应的 .js $stateProvider .state ...
- angular路由——ui.route
angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- $stateProvider
在你的应用中大多数状态都有与其相关联的 url,路由控制不是设计完成 state 之后的事后想法,而是开始开发时就应该考虑的问题. 这里是如何设置一个基本url. 12345 $stateProvid ...
- angular使用总结
一．是否有必要加入模块化框架 1.Reqruiejs seajs的主要作用 (1)模块化,让代码易于维护. angular本身就是mvc,模块化很清晰,所以这点用不到requirejs (2)可以按需 ...
- angularJs模块ui-router之路由控制
在你的应用中大多数状态都有与其相关联的 url,路由控制不是设计完成 state 之后的事后想法,而是开始开发时就应该考虑的问题. 这里是如何设置一个基本url. $stateProvider .st ...
- AngularJS 的嵌套路由 UI-Router
AngularJS 的嵌套路由 UI-Router 本篇文章翻译自:https://scotch.io/tutorials/angular-routing-using-ui-router 演示网站请查 ...
- AngularJS ui-router (嵌套路由)
http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...
- 深入理解ANGULARUI路由_UI-ROUTER
最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研究下,做个笔记,其中大部分为摘抄别人的,做个说明免得被人吐槽. Angularjs ui-router - ...
- angular路由
ngRoute需要引进以下文件 <script src="http://code.angularjs.org/1.2.5/angular.min.js"></sc ...
随机推荐
- spring boot入门 -- 介绍和第一个例子
"越来越多的企业选择使用spring boot 开发系统,spring boot牛在什么地方?难不难学?心动不如行动,让我们一起开始学习吧!" 使用Spring boot ,可以轻 ...
- ArcGIS 网络分析[4] 网络数据集深入浅出之连通性、网络数据集的属性及转弯要素
前面介绍完了如何创建网络数据集.如何使用网络分析功能,当然还有的读者会迷惑于一些更深层次的问题,比如网络数据集的连通性问题等. 因为不可能面面俱到,我只能挑重点来阐述,我觉得网络数据集的连通性.属性和 ...
- Cat 客户端采用什么策略上报消息树
策略分类 目前搞清楚两种 第一种(蓝色):默认服务器列表中选一个,算法核心是根据应用名的哈希值取模.也就是说同一个应用始终打到同一台服务器上,如果这台服务器挂了,另选一台服务器. 第二种(红色):应用 ...
- 安装Linux桌面后无法显示登录桌面
安装完图形后无法显示图形界面,只有命令行模式界面 . 猜测原因可能跟电脑位有关,在BIOS中开启虚拟化技术, 电脑开启设置F2 /Security/Virtualization, 选择Enable. ...
- python 算法学习部分代码记录篇章1
# -*- coding: utf-8 -*- # @Date : 2017-08-19 20:19:56 # @Author : lileilei '''那么算法和数据结构是什么呢,答曰兵法''' ...
- .net 框架
目录 API 应用框架(Application Frameworks) 应用模板(Application Templates) 人工智能(Artificial Intelligence) 程序集处理( ...
- 进程管理工具Supervisor(二)Events
supervisor可以当做一个简单的进程启动.重启.控制工具使用,也可以作为一个进程监控框架使用,作为后者,需要使用supervisor的Events机制. Event Listeners supe ...
- 快速开发基于 HTML5 网络拓扑图应用--入门篇（一）
计算机网络的拓扑结构是引用拓扑学中研究与大小,形状无关的点.线关系的方法.把网络中的计算机和通信设备抽象为一个点,把传输介质抽象为一条线,由点和线组成的几何图形就是计算机网络的拓扑结构.网络的拓扑结构 ...
- 消费五分钟，小白也能了解的经典技术：关于IP负载均衡（LVS之NAT）
这里准备以两篇文章来大概讲述一下LVS负载均衡 NAT TUN/DR和共享存储 前言: 为什么搭建LVS: 若一台服务器只能支持10人在线.那么有100人访问,则需要多少台服务器. 这个不言而喻:10 ...
- HTTP 错误 500.19 - Internal Server Error 0x80070005 0x80070003
IIS发布时错误 错误代码 0x80070005 一.权限:设置文件权限--属性-安全-添加everyone的读取权限(注意是给整个发布文件设置权限而不是config) 二.查看物理路径中是否存在中文 ...