angularJS的router用法简单介绍
本章节将分享一段关于angular的router代码实例，有需的朋友可以做一下参考。
下面就分别把相关代码列举出来:
一.index.html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/ajax/libs/html5shiv/3.6.2pre/html5shiv.js"></script>
<script src="cdnjs.cloudflare/ajax/libs/json2/20121008/json2.js"></script>
<div ng-view></div>
<script src="localhost:81/js/angular.min.js"></script>
<script>
var routeApp = angular.module('routeApp',[]);
routeApp.config(['$routeProvider',function ($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: 'list.html',
controller: 'RouteListCtl'
})
.when('/list/:id', {
templateUrl: 'detail.html',
controller: 'RouteDetailCtl'
})
.otherwise({
redirectTo: '/list'
});
}]);
//controller
routeApp.controller('RouteListCtl',function($scope) {
});
routeApp.controller('RouteDetailCtl',function($scope, $routeParams) {
$scope.id = $routeParams.id;
});
</script>
</body>
</html>二list.html相关:
运行下面代码:
<hr/>
<h3>Route : List.html</h3>
<ul>
<li ng-repeat="id in [1, 2, 3 ]"><a href="#/list/{{ id }}"> ID{{ id }}</a></li>
</ul>三.detail.html相关:
运行以下代码:
<hr/>
<h3>Route <span style="color: red;">{{id}}</span>: detail.html </h3>
声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至201542412@QQ.com举报，一经查实，本站将立刻删除。
相关推荐
-
阻止点击回车提交表单效果代码实例
本章节介绍一下如何阻止点击回车提交表单效果。在默认情况下，如果表单或者表单元素获取焦点的话，点击回车就会提交表单。但是在实际应用中，往往需要只点击提交按钮才能够提交表单。代码实例如下:
-
在页面上能够自动变动的带有星期的时间日期代码
在不少网站页面都有这样的效果，那就是在页面的某一个位置会有一个能够自动变动的时间日期效果。当然这个功能是否能够给用户起到实际作用不得而知，因为电脑本身就有这样的功能。代码实例: ht
-
js模拟实现StringBuffer类功能代码实例
JvScrit并没有内置的StringBuffr()方法，下面就通过代码实例来模拟实现它的功能。代码实例如下:function StringBuffr() { this.__strings
-
将十六进制颜色值转换为RGB颜色值代码实例
本章节分享一段代码实例它能够实现将十六进制颜色值转换为RGB颜色值代码实例。如果从RGB颜色值转换为十六进制颜色值可以参阅jQury如何将获取的颜色值转换为十六进制形式一章节。代码实例:!DOCT
-
点击方向键实现文本框焦点切换代码实例
本章节介绍一下如何实现点击方向键即可实现切换文本框的焦点的效果。代码实例如下:
