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= ...
随机推荐
- Arraylist静态初始化
new ArrayList<String>(Arrays.asList("ab","cd","ef"));
- [oracle] 如何使用myBatis在数据库中插入数据并返回主键
在MyBatis中,希望在Oracle中插入数据的同时返回主键值,而非插入的条数. ① oracle使用 selectKey. U_USER_INFO_SEQ 是在数据库中定义好的这张表关联的序列se ...
- NoSQL and Redis
转自:http://www.cnblogs.com/fxjwind/archive/2011/12/10/2283344.html 首先谈谈为什么需要NoSQL? 这儿看到一篇blog说的不错http ...
- 关于Unity中UI中的Image节点以及它的Image组件
一.图片的Inspector面板属性 Texture Type:一般是选择sprite(2D and UI) Sprite Mode:一般是选择Single Packing Tag:打包的标志值,最后 ...
- Blend for Visual Studio 2013
软件开发中为了使设计师和程序员“并行”工作并直接参与到程序的开发中来. 1.在网络程序开发团队中,草图设计后,设计师们可以使用HTML.CSS.JavaScript直接生成UI,程序员则在这个UI产生 ...
- 转载:mysql 操作总结 INSERT和REPLACE
转自:http://www.jb51.net/article/19411.htm 用于操作数据库的SQL一般分为两种,一种是查询语句,也就是我们所说的SELECT语句,另外一种就是更新语句,也叫做 ...
- gen_server的一些猜测
1. exit(Pid,Reason)貌似不会引起gen_server的terminate()的执行. 猜测依据:erlang编程指南的第十二章的272页 终止 当从 回调函数中的一个收到stop ...
- php 错误和异常处理
一.错误和异常处理 1.1 错误类型和基本的调试方法 PHP程序的错误发生一般归属于下列三个领域: 语法错误: 语法错误最常见,并且也容易修复.如:代码中遗漏一个分号.这类错误会阻止脚本的执行. 运行 ...
- Oracle从字符串资源中得到想要的数据分析
[oracle]从字符串资源中得到想要的数据分析需求:订单分析,按照游戏,帐号级别,游戏帐号职业,区服,价格区间分析各款交易数据走势 .目标:订单表(order)处理分析:订单中可以直接读到的标示有游 ...
- 深入理解bootstrap框架之第二章整体架构
标注下,正好最近关注前段框架 1. CSS-12栅格系统 把网页宽度均分为12等分(保留15位精度)——这是bootstrap的核心功能. 2.基础布局组件 包括排版.按钮.表格.布局.表单等等. 3 ...