Проблема с шаблоном ui-view not rendering

Я по-прежнему новичок в использовании ui-router от Angular для SPA, и у меня возникают некоторые проблемы с тем, что шаблон не отображается в браузере (я использую Firefox). Ниже мой код app.js,Проблема с шаблоном ui-view not rendering

angular.module('myApp', ['ui.router']) 

.config(function($stateProvider, $urlRouterProvider) { 

    $stateProvider 
     // route for the home page 
     .state('app', { 
      url:'/', 
      views: { 
       'header': { 
        templateUrl : 'views/header.html' 
       } 
      } 
     }); 

    $urlRouterProvider.otherwise('/'); 

})

А вот мой HTML,

<!DOCTYPE html> 
<html lang="en" ng-app="myApp"> 

<head> 
    <meta charset="utf-8"/> 
    <title>Will this work?</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
    <link rel="stylesheet" href="bower_components/bootswatch-dist/css/bootstrap.min.css"/> 
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"/> 
    <link rel="stylesheet" href="css/mystyles.css"/> 
</head> 

<body> 
    <div ui‐view="header"></div> 
</body> 

<script src="bower_components/angular/angular.min.js"></script> 
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script> 
<script src="scripts/app.js"></script> 
<script src="bower_components/jquery/dist/jquery.min.js"></script> 
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 

</html>

собирается также предоставить код для header.html,

<header> 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 
      <div class="navbar-collapse collapse" id="navbar-main"> 
       <ul class="nav navbar-nav"> 
        <li class="active"> 
         <a href=""><span class="glyphicon glyphicon-home"></span> Home</a> 
        </li> 
        <li> 
         <a href=""><span class="glyphicon glyphicon-info-sign"></span> About</a> 
        </li> 
        <li> 
         <a href=""><span class="glyphicon glyphicon-envelope"></span> Contact</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</header>

я получаю нет сообщения об ошибках в веб-консоли, просто пустой экран.

источник

2017-02-01 user13317

Вы должны сделать плункер из этого. – rakemen

@rakemen https://plnkr.co/edit/mLNxL9uBa2osqnvUn8oY?p=preview – user13317

Я просто попытался воспроизвести ваш код в одном из своих плутов, и на удивление это сработало. Я удалил некоторые вещи из таблицы стилей, намерение было сделать код работать. Я подозреваю, что что-то не так с скриптами, которые вы импортируете (bower_components). Я использовал инструмент внешних библиотек plunkr для импорта скриптов, кроме того, остальная часть кода такая же, как ваша.

Некоторые проблемы с вашим кодом:

Положите ваши сценарии импорта внутри тела тега, а не снаружи.
В плунке вы отправили в комментариях, вы импортировали Angular2, а не AngularJS.

script.js:

angular.module('myApp', ['ui.router']) 
.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('app', { 
      url:'/', 
      views: { 
       'header': { 
        templateUrl : 'header.html' 
       } 
      } 
     }); 
    $urlRouterProvider.otherwise('/'); 
})

Проверить это plunk из.

источник

2017-02-01 16:13:36 rakemen

ответ

Смежные вопросы