Angularjs
发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angular ng-route路由相关参数配置，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。 通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 #! 标记 实现，例如：
@H_
419_4@127.0.0.1:8080/#!/index
127.0.0.1:8080/#!/list
127.0.0.1:8080/#!/article
- 新建tpl文件夹下有三件html页面：
-
index.html
@H_419_4@我是首页{{ msg }}
-
article.html
@H_419_4@我是详情页
-
list.html
@H_419_4@<ul>
<li><a href="#!/article/1/我是第1篇文章">我是第1篇文章</a></li>
<li><a href="#!/article/2/我是第2篇文章">我是第2篇文章</a></li>
<li><a href="#!/article/3/我是第3篇文章">我是第3篇文章</a></li>
<li><a href="#!/article/4/我是第4篇文章">我是第4篇文章</a></li>
</ul>
当前html下
@H_
419_4@<body ng-app="myApp">
<a href="#!/index">
首页</a>
<a href="#!/list">
列表页</a>
<div ng-view></div>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script>
var app = angular.module('myApp',['ngRoute']
);
// angularjs是根据形参的名字去传递参数的
app.con
fig(function($routeProvider)
{
// 路由的具体配置需要写
在这个
函数当中
// 当...时候
$routeProvider
.when("/index",
{
templateUrl:'./t
PL/index.html',controller:'indexCtrl'
})
.when("/list",
{
templateUrl:'./t
PL/list.html',controller:'listCtrl'
})
//参数占位符
.when("/article/:id/@R_67_
6964@",
{
templateUrl:'./t
PL/article.html',controller:'articleCtrl'
})
//
.otherwise('/index')
otherwise(
{
//或者@L_
696_35@也可以
redirectTo: '/home'
}
);
})
app.controller('indexCtrl',function($scop
E){
$scope.msg = "我是
首页中的数据";
})
app.controller('listCtrl',function($scop
E){
$scope.msg = "我是
列表页中的数据";
})
app.controller('articleCtrl',function($scope,$routeParams)
{
console.log($routeParam
s.id
);
console.log($routeParam
s.titlE);
}
);
</script>
</body>
总结：以上只是angular路由最基本的思想的小demo,体会angular单页面的实现方式
大佬总结
以上是大佬教程为你收集整理的angular ng-route路由相关参数配置全部内容，希望文章能够帮你解决angular ng-route路由相关参数配置所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
