Question

我可以在AngularJS中拥有页面的一些常量部分，例如徽标，侧边菜单，面包屑吗？

问题是如何使任何部分保持不变并仅导航内容部分？

唯一的方法是包含html片段吗？

Answer 1

＆＃13;

<html>

<head>
</head>

<body ng-app="">
  <div>
    <p>CONSTANT PART</p>
  </div>
  <div ui-view>
    content use ui router for changing content configure routes in app.js
  </div>
</body>
</html

＆＃13;

使用ui-router，ui-view中的内容根据状态发生变化

https://github.com/angular-ui/ui-router

Answer 2

Angular Route Segment

bower install angular-route-segment

该库提供了两段代码：$ routeSegment服务和app-view-segment指令。两者都放在他们自己的模块中，您必须在app模块中包含它们作为依赖项：

var app = angular.module('app', ['ngRoute', 'route-segment', 'view-segment']);

$routeSegmentProvider.segment('s1', {
    templateUrl: 'templates/section1.html',
    controller: MainCtrl});

$routeSegmentProvider.within('s1').segment('home', {
    templateUrl: 'templates/section1/home.html'});

$routeSegmentProvider.within('s1').segment('itemInfo', {
    templateUrl: 'templates/section1/item.html',
    controller: Section1ItemCtrl,
    dependencies: ['id']});

$routeSegmentProvider.within('s1').within('itemInfo').segment('overview', {
    templateUrl: 'templates/section1/item/overview.html'});

然后，DOM中的任何app-view-segment标记（类似于内置ng-view）将填充相应的路径段项。您必须提供段索引作为此指令的参数，以使其了解应该链接到树中的哪个段级别。

的index.html：

<ul>
    <li ng-class="{active: $routeSegment.startsWith('s1')}">
        <a href="/section1">Section 1</a>
    </li>
    <li ng-class="{active: $routeSegment.startsWith('s2')}">
        <a href="/section2">Section 2</a>
    </li>
</ul>
<div id="contents" app-view-segment="0"></div>

其中ul代码是静态的，将显示在每个页面上

我可以在AngularJS中拥有页面的一些常量部分吗？

2 个答案: