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= ...
随机推荐
- 用isNaN函数来判断是否只能输入正负数字
isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果, 以判断它们表示的是否是合法的数字.当然也可以用 isNaN() 函数来检测算数错误,比如用 0 作除数的 ...
- ADT下载地址（含各版本）
2015/05/07 新增 ADT-23.0.6.zip2015/01/18 新增(未测试,不知下载过程中是否有问题,请网友自行测试,最好能把测试结果告知,谢谢)ADT-23.0.3.zipADT ...
- 【转】PNG图像文件格式
5.2 PNG图像文件格式 PNG是可携式网络图像(portable network graphics)的英文缩写.PNG是从网络上开始发展的,目的是替代GIF和JPG格式,PNG图像文件格式也是当 ...
- 【转】MFC 迅雷七窗体特效，使用DWM实现Aero Glass效果
从Windows Vista开始,Aero Glass效果被应用在了Home Premium以上的系统中(Home Basic不具有该效果).这种效果是由DWM(Desktop Window Mana ...
- 控制反转是Spring框架的核心。
早在2004年,Martin Fowler就提出了“哪些方面的控制被反转了?”这个问题.他总结出是依赖对象的获得被反转了.基于这个结论,他为控制反转创造了一个更好的名字:依赖注入.许多非凡的应用(比H ...
- nodejs基础 -- 交互式解析器(REPL)
------------类似在浏览器中调试js代码----------------------- Node.js REPL(交互式解释器) Node.js REPL(Read Eval Print L ...
- Stream(流)的基本操作
//把流转化为文件 public static void StreamToFile(Stream stream, string filepath) { byte[ ...
- MySQL 日期与时间的处理
1.查询当前日期时间:函数有now(),localtime(),current_timestamp(),sysdate(). mysql> select now(),localtime(),cu ...
- 上传文件到 Sharepoint 的文档库中和下载 Sharepoint 的文档库的文件到客户端
文件操作应用场景: 如果你的.NET项目是运行在SharePoint服务器上的,你可以直接使用SharePoint服务器端对象模型,用SPFileCollection.Add方法 http://msd ...
- [转]JVM性能调优监控工具
http://my.oschina.net/feichexia/blog/196575?p=1#comments JDK本身提供了很多方便的JVM性能调优监控工具,除了集成式的VisualVM和jCo ...