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= ...
随机推荐
- 等待事件 wait event
衡量数据库状况, 优化数据库等 当一个进程连接到数据库后, 进程所经历的种种等待就开始被记录, 并且通过一系列的性能视图进行展示, 通过等待事件用户可以很快发现数据库的性能瓶颈, 从而进行针对性能的优 ...
- mysql的navicat执行存储过程
---------------------------存储过程------------------------ BEGIN #Routine body goes here...SELECT p_in; ...
- 将DataFrame数据如何写入到Hive表中
1.将DataFrame数据如何写入到Hive表中?2.通过那个API实现创建spark临时表?3.如何将DataFrame数据写入hive指定数据表的分区中? 从spark1.2 到spark1.3 ...
- tensorflow函数学习笔记
https://www.w3cschool.cn/tensorflow_python/tensorflow_python-4isv2ez3.html tf.trainable_variables返回的 ...
- 【转】MFC 字体LOGFONT
Windows的字体LOGFONT LOGFONT是Windows内部字体的逻辑结构,主要用于设置字体格式,其定义如下:typedef struct tagLOGFONTA{ LONG ...
- Spring零散所得
Spring容器中bean的id或name,都可以有多个,且第一个为标识符(Qualifier),其余皆为别名(Alias).所以都可以通过applicationContext.getBean(&qu ...
- CString常用函数
转自:http://www.cnblogs.com/Caiqinghua/archive/2009/02/16/1391190.html CString( );例:CString csStr; CSt ...
- VS2008兼容安装
1. 直接安装出现问题:该项目的所有配置都需要系统提供对某些 平台的支持,但在此计算机上没有安装这些平台.因此无法加载该项目. 解决方法:先卸载原来安装的, 再设置安装包中的setup.exe的兼容性 ...
- 【转载】ASP.NET Core 中间件详解及项目实战
前言 在上篇文章主要介绍了DotNetCore项目状况,本篇文章是我们在开发自己的项目中实际使用的,比较贴合实际应用,算是对中间件的一个深入使用了,不是简单的Hello World,如果你觉得本篇文章 ...
- Google Analytics10条有用教程(转)
几乎每个网站都会统计自身的浏览状况:日IP.PV.跳出率.转换率.浏览者属性等等.了解这些数据有助于更好地了解浏览者的属性.知道网站在什么地方存在缺陷,为更好地提供服务.提高网站收入都有所帮助. 对于 ...