angular -- ng-ui-route路由及其传递参数?script标签版
考虑到 多视图等因素,所以 angular 的路由考虑使用 ng-ui-route来做,而不使用 ng-route来做!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./js/angular.min.js"></script>
<script type="text/javascript" src="./js/angular-route.js"></script>
<script type="text/javascript" src="./js/angular-ui-router.js"></script>
<style type="text/css">
a{margin-right:30px;}
</style>
</head>
<body>
<!-- 参考: https://blog.csdn.net/zcl_love_wx/article/details/52034193-->
<!-- 传递参数: https://blog.csdn.net/smile_panda/article/details/50976777-->
<div ng-app="myApp" class="myApp" ng-controller="myAppController">
<a ng-repeat="x in navlist" ui-sref="{{x.name}}({id:{{x.id}}})">{{x.title}}</a>
<a ui-sref="pram({id:22222})">传参</a>
<div class="myAppBot" ui-view></div>
<script type="text/ng-template" id='home'>
<div ng-controller="homeController">
{{username}}
</div>
</script>
<script type="text/ng-template" id='hot'>
<div ng-controller="hotController">
{{username}}
</div>
</script>
<script type="text/ng-template" id='top'>
{{username}}
</script>
<script type="text/ng-template" id='pram'>
{{username}}
</script>
</div>
</body>
<script type="text/javascript">
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(["$stateProvider", function ($stateProvider) {
$stateProvider
.state("/",{
url: "/", //定义路由
templateUrl:"home", //定义模板 还有个是 template
controller:"homeController" // 定义控制器
})
.state("home",{
url: '/home',
templateUrl:"home",
controller:"homeController",
})
.state("hot",{
url:'/hot',
templateUrl :'hot',
controller:"homeController",
params:{'id':''}
})
.state("top",{
url:'/top',
templateUrl:'top',
controller:"topController",
params:{'id':null}
})
.state("pram",{
url:'/pram',
templateUrl :'pram',
controller:"pramController",
params:{'id':null}
})
;
}]);
myApp.controller('myAppController',['$scope',function($scope){
alert();
$scope.navlist = [
{title:'首页',name:'home',id:1},
{title:'热门',name:'hot',id:2},
{title:'推荐',name:'top',id:3},
];
}]);
myApp.controller('homeController',['$scope','$stateParams',function($scope,$stateParams){
$scope.username = "张三";
}]);
myApp.controller('hotController',['$scope','$stateParams',function($scope,$stateParams){
console.log($stateParams);
$scope.username = "这里hot控制器";
// console.log($routeParams);
}]);
myApp.controller('topController',['$scope','$stateParams',function($scope,$stateParams){
console.log($stateParams);
$scope.username = "这里top控制器";
}]);
myApp.controller('pramController',['$scope','$stateParams',function($scope,$stateParams){
console.log($stateParams);
$scope.username = "这里pram控制器";
}]); </script>
</html>
angular -- ng-ui-route路由及其传递参数?script标签版的更多相关文章
- angular -- ng-ui-route路由及其传递参数?page页面版
前面有说过 ng-ui-route 使用 script 标签来做,但是很多时候,会通过引入模板页面的方式来实现: 具体代码: <!DOCTYPE html> <html lang=& ...
- vue嵌套路由-query传递参数(三)
在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...
- angular 1.x 控制器之间互相传递参数
我们要向前方看齐,基于js引用类型的对象就不记了,所以使用基于事件的方式: angular 中 $on,$emit,$boardcast来实现父控制器和子控制器互相通讯, 其中$on表示事件监听, $ ...
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- vue嵌套路由--params传递参数
在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另一种是值不显示在url中. 1.显示在url中index.html <d ...
- Vue通过路由 query传递参数
父组件通过query来传递num参数为1,相当与在 url 地址后面拼接参数 <template> <div> <h3>首页</h3> <rout ...
- Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- angular之两种路由
安装angular npm install -g @angular/cli ng new myapp ng g component componentName 自带路由 引入:angular-rout ...
- angular路由——ui.route
angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
随机推荐
- HTML坦克大战学习02---坦克动起来
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- 【转】nginx中proxy_set_header Host $host的作用
nginx为了实现反向代理的需求而增加了一个ngx_http_proxy_module模块.其中proxy_set_header指令就是该模块需要读取的配置文件.在这里,所有设置的值的含义和http请 ...
- MVC路由机制(转)
今天我来缕一下MVC的路由机制,因为使用MVC已经快一年了,之前也只是上手,没有系统去理会.项目完了,结合实际使用,回过头来深入一下. MVC 学习索引(点击即可) 一个请求进入IIS后 传统ASP. ...
- Asakura的魔法世界
Font Size:Aa Aa Aa Description Asakura存在于一个魔法世界中.有一天,Asakura在一条魔法通道里偷懒,突然接到一个紧急任务,要高速赶往还有一条通道b去. 我们把 ...
- Wex5短信验证
调了好几天短信验证测试,终于成功,现将全部源代码发给大家,希望对各位有所帮助,少走弯路 Model.prototype.saveUserBtnClick = function(event ...
- EasyTouch的使用官方文档操作步骤
对于移动平台上的RPG类的游戏,我们常用虚拟摇杆来控制人物角色的行走和一些行为,相信我们对它并不陌生,之前尝试了EasyTouch2.5,发现并没有最新版的3.1好用,2.5版本的对于自适应没有做的很 ...
- swift开发之--UISearchBar的使用/UISearchController的使用
记录下UISearchBar的基本用法,补充:ios 8.0以后,原来的UISearchDisplayController被官方废弃,建议使用UISearchController,下面就简单的记录下这 ...
- eclipse中tomcat能正常启动,在浏览器中不能打开问题
问题原因:没有在eclipse中tomcat的server location设置到tomcat的安装目录. 解决办法:1.选择server点击右键,选择Open选项,然后在server locatio ...
- 在linux本地下载ftp中的文件
使用wget命令 -r :会在当前目录下生成192.168.30.14文件名 下面的命令就是下载这个ftp目录"/home/ftp/*"下面的所有文件 wget -r ftp:// ...
- Python 入门(十)列表生成式
生成列表 要生成list [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],我们可以用range(1, 11): >>> range(1, 11) [1, 2, 3, ...