Angular ui-sref 和 ui-view 不能一起工作答案

【问题标题】：Angular ui-sref and ui-view do not work togetherAngular ui-sref 和 ui-view 不能一起工作
【发布时间】：2017-04-28 13:16:42
【问题描述】：

我有一个简单的 html 文件：

<div class="header">
  <div class="navbar navbar-inverse">
    <div class="container">
      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" ui-sref="main">Show view</a>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div ui-view=""></div>
</div>

在containerdiv我想设置正确的视图模板。

这是我的路线：

app.controller('DefaultCtrl', function ($route) {
  $route.reload();
});

app.config(function ($stateProvider, $httpProvider) {
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';

  $stateProvider
    .state('main', {
      url: '/',
      templateUrl: '../views/main.html',
      controller: 'DefaultCtrl'
    });
})

和 main.html 文件：

<div class="container">
 <p><h3>Other view for container</h3></p>
</div>

问题是当我点击Show view 的链接时没有任何反应。文本Other view for container 未显示。如何解决这个问题？

【问题讨论】：

标签： javascript angularjs html routing

【解决方案1】：

检查下面的代码，我已经添加了所有必需的注入器，如果你使用 templateURL，请使用你的应用目录中的路径，不要使用相对路径。

var app = angular.module('mainapp',['ngRoute','ui.router']);

app.controller('DefaultCtrl', function ($route) {
  $route.reload();
});

app.config(function ($routeProvider,$stateProvider) { 
 $stateProvider
    .state('main', {
      url: '/',
      template: '<h1> Main View </h1>',
      controller: 'DefaultCtrl'
    });
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://unpkg.com/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

<div ng-app ='mainapp'>
<div class="header">
  <div class="navbar navbar-inverse">
    <div class="container">
      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" ui-sref="main">Show view</a>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div ui-view=""></div>
</div>
</div>

【讨论】：