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= ...
随机推荐
- java基础复习二——面向对象一
面向对象三大特性:封装,继承,多态 类:对象的蓝图,生成对象的模板,是对一类事物的描述,是抽象的概念上的定义 对象:是实际存在的该类事物的每个个体,也称为实例 类之间三种关系:依赖关系(uses-a) ...
- 表单提交 多个name相同的input
<form action="{:U('Index/test')}" method="post"> <foreach name="di ...
- Python 出现错误 SNIMissingWarning: An HTTPS request has been made, but the SNI (Subject Name Indication) extension to TLS is not available on this platform.
报出SNIMissingWarning和InsecurePlatformWarning警告. 解决方法: 在cmd中输入: pip install pyopenssl ndg-httpsclient ...
- 编写一个Filter，除继承HttpServlet类外还需要（ ）。
A．继承Filter 类 B．实现Filter 接口 C．继承HttpFilter 类 D．实现HttpFilter接口 解答:B
- 每个 case 语句的结尾不要忘了加 break，否则将导致多个分支重叠
每个 case 语句的结尾不要忘了加 break,否则将导致多个分支重叠 (除非有意使多个分支重叠). #include <iostream> /* run this program us ...
- tiny210V2开发板hdmi输出到10.1寸LCD，无图像
tiny210V2开发板hdmi输出到10.1寸LCD,无图像... 用tiny210V2开发板的HDMI接口输出到的10.1寸LCD,LCD无任何现象.说明一下我的情况,我的10.1寸屏LCD是HD ...
- 中文路径-接口路径url不能传输中文解决方案
服务端:
- 详解MathType快捷键使用技巧
巧妙使用MathType数学公式编辑器可加快数学符号的录入速度和效率,这将节约大量的时间成本,本教程将详解MathType快捷键使用的诸多技巧. 在MathType界面,将鼠标轻轻的放在某个符号上,在 ...
- ADO连接数据库【msado15.dll】
Microsoft ActiveX Data Objects (ADO) 注册表查看ADO版本:HKEY_LOCAL_MACHINE\Software\Microsoft\DataAccess下有Ve ...
- linq在获取部门层级树种的应用
public string GetNavigationsJson() { AjaxA_NAVIGATIONS ajaxnavigations = new AjaxA_NAVIGATIONS(); IL ...