angularjs 多个布局模板的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 3507 天前的主题，其中的信息可能已经有所发展或是发生改变。

新手，刚学angularjs ,我知道ng-view可以实现多个视图，但如果我要根据url实现不同的url对应不同的模板，例如#/map 这个页面我需要的模板与其它页面都不一样，如果实现呢？

app/index.html
<html lang="en" ng-app="phonecat">
<head>
...
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>

<div ng-view></div>

</body>
</html>
默认使用这个模板，/map使用另外的模板，比如
app/index2.html

<html lang="en" ng-app="phonecat">
<head>
</head>
<body>
<p> tempalte 2</p>
<div ng-view></div>

</body>
</html>

不知道能否明白我的意思，希望多多指教。

script

div

模板

9 条回复 • 2015-05-17 17:56:53 +08:00

crs0910

2015-05-16 00:23:09 +08:00 via iPhone

路由啊

dawnLuke

2015-05-16 00:47:54 +08:00

没太懂你要做什么你看看这个最后面的那个例子吧可能对你有帮助
https://docs.angularjs.org/api/ngRoute/directive/ngView

sbmzhcn

2015-05-16 01:17:23 +08:00 via iPhone

不是上面文档里的，我要另外一个URL换个模版，头部，尾部都不一样。我知道ng-view可以用路由加载不同的内容。

Narcissu5

2015-05-16 01:27:56 +08:00 via Android

侦听路由事件，控制p标签的显示与隐藏
其实我觉得你的场景刷新一下页面可能更好

rokeyzki

2015-05-16 01:30:14 +08:00

1，NG的官方不推荐多个ng-view入口，统一在index里根据路由和控制器加载不同模板，因为index的ng-view其实本身就是空内容

2，看你这个代码
```
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
```

没有看到有引入angular-route.min.js，这样你能实现NG路由？

SliceOnion

2015-05-16 08:10:29 +08:00

试试 angular-ui-router 的 view 嵌套

比如：

index.html
<div ui-view></div>

other.html
<p> tempalte 1</p>

map.html
<div>
<p> tempalte 2</p>
<div ui-view></div>
</div>

map.detail.html
<map></map>

ui-view 类似 ng-view

请求 /index 的时候, index.html 中的ui-view 加载 other.html

请求 /map 的时候, index.html 中的 ui-view 加载 map.html

请求 /map/1/detail 的时候,index.html 中的 ui-view 先加载 map.html ,然后 map.html 中的 ui-view 加载 map.detail.html

这样应该能满足 html 结构的不同

ijse

2015-05-16 08:27:34 +08:00

去看下uiRoute或ngRoute模块

arzusyume

2015-05-16 11:11:06 +08:00

$routeProvider的templateUrl支持function,

$routeProvider.when('/:xxx', {
templateUrl: function (params){
if (params.xxx === 'map') {return xxx;} else {return yyy;}
}
})

sbmzhcn

2015-05-17 17:56:53 +08:00

谢谢大家的回复，我再了解下这方面的知识，本身我有这个需要求是希望显示地图的这个页面时，不显示导航栏及footer，而且是全屏的，所以与其它页面的模板都不一样。