angular -- ng-ui-route路由及其传递参数？page页面版
前面有说过 ng-ui-route 使用 script 标签来做，但是很多时候，会通过引入模板页面的方式来实现：
具体代码：
<!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/yangjvn/article/details/47703973 -->
<div ng-app="myApp" ng-controller="myAppController">
<a ui-sref="home">首页</a>
<a ui-sref="hot">热门</a>
<a ui-sref="top">TOP</a>
<div ui-view></div>
</div> <script type="text/javascript">
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(["$stateProvider",function($stateProvider){
$stateProvider
.state("home",{
url: '/home',
template:"page/home.html"
})
.state("hot",{
url:'/hot',
templateUrl :'page/hot.html',
controller:"hotController"
})
.state("top",{
url:'/top',
templateUrl:'page/top.html',
controller:"topController"
});
}]);
myApp.controller("myAppController",['$scope',function($scope){
$scope.username = "张三";
}]);
myApp.controller("hotController",['$scope',function($scope){ }]);
</script>
</html>
在做一些测试的时候，很容易报这个错误：
看上面有个 ...Controller ：说明是控制器加载的错误。
原因：看上面的代码，可以看到每个模块是有一个控制器在控制的，所以在新建的模板上就必须要有和这个控制器。
我的错误：
在上面的模板构建中，访问 top 的时候，使用到 topController 这个控制器，但是我们 page/top.html模板上没有 topController这个控制器，所以就会报错。
angular -- ng-ui-route路由及其传递参数？page页面版的更多相关文章
- vue嵌套路由-query传递参数（三）
在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...
- angular 1.x 控制器之间互相传递参数
我们要向前方看齐,基于js引用类型的对象就不记了,所以使用基于事件的方式: angular 中 $on,$emit,$boardcast来实现父控制器和子控制器互相通讯, 其中$on表示事件监听, $ ...
- angular -- ng-ui-route路由及其传递参数？script标签版
考虑到 多视图等因素,所以 angular 的路由考虑使用 ng-ui-route来做,而不使用 ng-route来做! <!DOCTYPE html> <html lang=&qu ...
- 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= ...
随机推荐
- A/libc:fatal signal 11(SIGSEGV).code 1, fault addr 0x0 in tid 26488 (VideoEncoder)
在调试Camera模块:发现相同的代码在厂家提供的环境里边编译.就是ok的,在我们的源码树中编译,将HAL库推进去后.就会signal 11退出. 一.现象 F/libc ( ): Fatal sig ...
- 【面试】hibernate n+1问题
Hibernate中常会用到set,bag等集合表示1对多的关系, 在获取实体的时候就能根据关系将关联的对象或者对象集取出, 还可以设定cascade进行关联更新和删除.这不得部说hibernate的 ...
- adb调试功能
参考: http://www.cnblogs.com/meil/archive/2012/05/24/2516055.html http://www.biemmeitalia.net/blog/and ...
- 第三百零九节，Django框架,models.py模块，数据库操作——F和Q()运算符：|或者、&并且——queryset对象序列化
第三百零九节,Django框架,models.py模块,数据库操作——F()和Q()运算符:|或者.&并且 F()可以将数据库里的数字类型的数据,转换为可以数字类型 首先要导入 from dj ...
- ffplay的音视频同步分析
以前工作中参与了一些音视频程序的开发,不过使用的都是芯片公司的SDK,没有研究到更深入一层,比如说音视频同步是怎么回事.只好自己抽点时间出来分析开源代码了,做音视频编解码的人都知道ffmpeg,他在各 ...
- MVC后台与前台交互的问题。。。
后台: viewbag.sb/*这是一个sb路径*/=@"\gao\shou"; 前台js: var sb='@viewbag.sb'; alert(sb); 结果就是gaocon ...
- Spring-注入外部值
Spring注入需要初始化,但前面均使用硬编码注入,如: JavaConfig配置: package soundSystem; import org.springframework.stereotyp ...
- write solid code 零散（原文）
整理下目录,看了这个文件,幸好未删除. 以下是<write solid code>中的原文摘录. 1.How could I have prevented this bug? 2.How ...
- ORACLE expdp/impdp导出实例
服务器上以sys或system超级管理员登录. SQL>create directory expdp_dir as '/home/oracle/dmpdata';(dmpdata 需要建立.赋予 ...
- EasyUI 扩展自定义EasyUI校验规则 验证规则
$.extend($.fn.validatebox.defaults.rules, {CHS: {validator: function (value, param) {return /^[\u039 ...