Question

我正在制作SPA。我想为Navigation，Section和footer创建一个单独的组件。当我转到主页或关于页面时，导航和页脚必须显示每个页面，只有该部分应该更改。我创建了两个组件，但只显示了导航组件，而没有显示页脚组件。请有人帮助我。

<body>
<div class="container">
  <navigation></navigation>
  <ui-view></ui-view>
  <footer></footer>
</div>

这是我的plunker链接

plunkr link

Answer 1

从index.html取消注释页脚组件链接。它有

<md-autocomplete
    md-no-cache="true"
    md-search-text= "query"
    md-items="sugg in getSuggestions(query)"
    md-item-text="sugg.suggestion"
    md-delay="0"
    md-min-length="1"
    placeholder="Search">
   <md-item-template>
        <div ng-if="$index == 0">
            <div ng-value="item.suggestion" ng-repeat="item in sugg">{{item.suggestion}}</div> 
        </div>
        <div ng-if="$index==1">
            <span>
                <b>Popular products:</b>
                <div ng-value="pp.price" ng-repeat="pp in sugg ">
                    {{pp.price}}
                </div>
            </span>
        </div>
    </md-item-template>
</md-autocomplete>

Answer 2

您ui-view可以stateProvider

<div ui-view="Head"></div>
<div ui-view="Root"></div>
<div ui-view="Foot"></div>

$stateProvider
  .state('Home', {
    url: '/home',
    views: {
            'Head': {
        templateUrl: 'Head.tmpl.html',
        controller: 'HeadController'
      },
      'Root': {
        templateUrl: 'Root.tmpl.html',
        controller: 'RootController'
      },
      'Foot': {
        templateUrl: 'Foot.tmpl.html',
        controller: 'FootController'
      }
    }
  })

如何在Angularjs的每个页面中显示导航和页脚？

2 个答案: