Question

我是angularjs的新手，我无法理解$ stateprovider的概念我想创建一个包含菜单和徽标的标题，当相应点击菜单项时，正文内容应该会更改，代码如下，请检查并回答我的查询

HTML

<div ui-view = "header"></div> <div ui-view = "content"></div>

JS

var App=angular.module('test', ["ui.router", "App.controllers", "ui.bootstrap"]);

App.config(function ($stateProvider){
    $stateProvider
        .state('test', {
          url: '',
          views: {
            'header': { templateUrl: '/templates/header.html'}

         }
      });
})

谢谢

Answer 1

由于您有两个观看次数，一个针对header，另一个针对content，

<div ui-view = "header"></div>
<div ui-view = "content"></div>

路线也应该有两条不同的命名路线。

views: {
            'header': { templateUrl: '/templates/header.html'},
            'content': { templateUrl: '/templates/content.html'}
         }

从此，

<div ui-view = "header"></div>打开header.html，<div ui-view = "content"></div>打开content.html

这是代码，

var App=angular.module('test', ["ui.router", "App.controllers", "ui.bootstrap"]);

App.config(function ($stateProvider){
    $stateProvider
        .state('test', {
          url: '',
          views: {
            'header': { templateUrl: '/templates/header.html'},
            'content': { templateUrl: '/templates/content.html'}
         }
      });
})

在HTML中，

<ul class="nav nav-pills main-menu right">
   <li role="presentation"><a ui-sref="test" class="active">Home</a></li>
   <li role="presentation"><a href="#/bus_chart">Bus Chart</a></li>
   <li role="presentation"><a href="#/bookings">My Bookings</a></li>
   <li role="presentation"><a href="#/review">Reviews</a></li>
   <li role="presentation"><a href="#/contact">Contact</a></li>
</ul>

第一次li点击转到路线中给出的test state。

Here is the documentation for the same

Answer 2

在配置文件

中

// State definitions
$stateProvider
  .state('test', {
    abstract: true,
    views: {
    'main@': {
        templateUrl: 'app/../../full-view.html'
      },
      'header@test': {
        templateUrl: '/templates/header.html' // correct path to the template
        //  controller: 'HeaderController as vm'   if needed
      },
      'footer@test': {
        templateUrl: '/templates/footer.html' // correct path to the template
        //  controller: 'FooterController as vm'   if needed
      }
    }
  });

<强> HTML

在content-only.html

中

<div>
     <div ui-view = "content"></div>
</div>

在full-view.html中

<div class="container">
  <div ui-view="header"></div>
  <div>
    <div ui-view="content"></div>
  </div>
  <div ui-view="footer"></div>
  </div>

index.html中的

<body>
    <div ui-view="main"></div>
  </body>

在其他模块中（例子）

views: {
        'content@test': {
          templateUrl: 'app/main/policies/policies.html'
        //  controller: 'PoliciesController as vm'   if needed
        }
      }

所以无论你追加到内容@test，都将归入ui-view =“content”

用于路由避免使用href=""，请使用ui-sref=""，因为您使用的是 ui-router

示例ui-sref="app.home" or ui-sref="app.about"而非使用href="#/home" or href="#/about"

AngularJS $ stateprovider

2 个答案: