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 ...
随机推荐
- SDP（0）：Streaming-Data-Processor - Data Processing with Akka-Stream
再有两天就进入2018了,想想还是要准备一下明年的工作方向.回想当初开始学习函数式编程时的主要目的是想设计一套标准API給那些习惯了OOP方式开发商业应用软件的程序员们,使他们能用一种接近传统数据库软 ...
- mysql5.7-Group Replication
什么是Group Replication 基于组的复制(Group-based Replication)是一种被使用在容错系统中的技术.Replication-group(复制组)是由能够相互通信的多 ...
- git正确的删除远程仓库的文件并用.gitignore忽略提交此文件
我向远程仓库提交了如下文件src/ pom.xml target/ WebContent/,发现没必要提交target目录. 于是做了如下操作: git rm -r --cached target g ...
- find 命令详解
find 作用:用于在文件树种查找文件,并作出相应的处理 (硬盘) 格式:find pathname -options [-print -exec -ok ...] 格式参数:pathname: fi ...
- bat检测文件大小并邮件报警
rem 获取当前日期 set TimeName=%date:~0,4%%date:~5,2%%date:~8,2% rem 获取文件名 set file=%TimeName% rem 获取文件大小 ...
- 初识JavaScript(一)
初识JavaScript(一) 最近由于工作的需要的原因,我从一个写后台的现在让我转到写前端,再加上我的js部分特别的差,所以我现在开始学习js部分的知识. 我的第一篇博文就这样开始写了.俗话说,千里 ...
- JavaScript Array 对象方法 以及 如何区分javascript中的toString()、toLocaleString()、valueOf()方法
1.concat() 2.join() 3.pop() 4.push() 5.reverse() 6.shift() 7.unshift() 8.slice() 9.sort() 10.splice( ...
- requireJS对文件合并与压缩（二）
requireJS对文件合并与压缩 RequireJS提供了一个打包与压缩工具r.js,r.js的压缩工具使用UglifyJS进行压缩的或Closure Compiler.r.js下载 require ...
- 前端开发chrome console的使用 ：评估表达式 – Break易站
本文内容来自:chrome console的使用 :评估表达式 – Break易站 从 DevTools 控制台使用它的某个评估功能查看页面上任意项目的状态. DevTools 控制台让您可通过特定方 ...
- C#winform程序关闭计算机的正确姿势
/// <summary> /// 计算机电源控制类 /// </summary> public class EnvironmentCheckClass { [DllImpor ...