Получение [$ injector: modulerr] в консоли при настройке angular-ui-router

0

Я настраиваю страницу, используя angular.js, и использую угловой ui-router, и я сталкиваюсь с довольно простой проблемой, о которой я не могу понять. Я потребовал надлежащего CDN, и я считаю, что правильно настроил угловое число, но нахожусь в ошибке:

> angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=portfolioApp&p1=Err…oudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.5%2Fangular.min.js%3A21%3A19)

Мой app.js выглядит следующим образом:

> angular.module('portfolioApp', ['ui.router','ui.bootstrap']).config(['$stateProvider','$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) 
>{$urlRouterProvider.otherwise('/');  
> $stateProvider
>     .state('main', {
>       url: '/',
>       views: {
>         '/': {
>           templateUrl: '/views/main.html'
>         }
>       }
>     });   $locationProvider.html5Mode({
>     enabled: true,
>     requireBase: false   
>  }); 
>}]);

мой файл index.html который находится в основной папке моего приложения:

<!DOCTYPE html>
<html>
  <head>
    <title>Tammer Galal</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-route.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script> -->
    <script src="/js/app.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/style/style.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/darkly/bootstrap.css">
  </head>
  <body ng-app='portfolioApp' class="portfolioBody">
    <div class="bs-component">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <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" href="index.html">Home</a>
          </div>
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="dropdown">
                <a href="repo.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Github Repositories<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="repo.html">Repos</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
    <div ui-view><div>
    <!-- <footer class="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer> -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>

Я пытаюсь загрузить основной частичный дом, который я назвал partial-home.html который находится в моем каталоге public/views/partials.

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 text-center">

    </div>
    <div class="col-xs-12 text-center">
      <img class="img-rounded me" id="firstPicture" src="/img/me.jpg">
    </div>
    <div class="col-xs-12 text-center">

    </div>
  </div>
  <div class="row">
    <div class="col-sm-4 col-md-4">
      <div>
        <h3 class="siteHeader"><strong>Rock Paper Scissors!</strong></h3>
        <a href="rps.html"><img class="img-rounded" id="rpsPic" src="/img/rps.jpg"></a>
        <p class="siteDescrip">Play a game of Rock, Paper, Scissors! Created utilizing: <br /><strong>HTML, CSS3, Javascript, and jQuery</strong></p>
      </div>
    </div>
    <div class="col-sm-4 col-md-4">
      <h3 class="siteHeader"><strong>Face Check</strong></h3>
      <a href="http://face-check.herokuapp.com/"><img class="img-rounded" id="faceCheckPic" src="/img/faceCheckPic.jpg"></a>
      <p class="siteDescrip">A facial and emotional recognition app Created utilizing: <br /><strong>HTML, CSS3, Javascript, jQuery, AJAX, and 3 APIs</strong><br /><strong>Co-Creators: Long Phan and Evan Bates</strong></p>
    </div>
    <div class="col-sm-4 col-md-4">
      <h3 class="siteHeader"><strong>RU Fly?</strong></h3>
      <a href="http://rufly2.herokuapp.com/"><img class="img-rounded" id="faceCheckPic" src="/img/rufly.jpg"></a>
      <p class="siteDescrip">RU Fly is a Rutgers Web Flyer, where students can add their favorite restaurants and leave reviews, so everyone knows the best place to eat! Adding upcoming events soon!<br /><strong>HTML, CSS3, Javascript, Node.js, MySQL, Sequelize, Express, JawsDB</strong></p>
    </div>
  </div>
</div>

Я действительно не могу понять, что это я сделал неправильно, и я думаю о том, чтобы начать с нуля. Любая помощь будет принята с благодарностью.

  • 1
    добавьте ng-strict-di к вашему body с помощью атрибута ng-app . ng-strict-di будет принудительно внедрять Dependency Injection и сообщать вам более подробную информацию о том, какая Dependency неправильно предоставлена. Просто взглянув на это, я бы сделал предположение, что проблема в ui.bootstrap .
  • 0
    изменено на `<body ng-app = 'portfolioApp' class =" portfolioBody "ng-strict-di>` и все еще получаю ту же ошибку журнала консоли. Удалим ui-bootstrap сейчас и вернемся через 2 минуты. Обновление Удаление ui-bootstrap устранило проблему! большое спасибо.
Показать ещё 2 комментария
Теги:
angular-ui-router

1 ответ

0

Я попытался воспроизвести эту ошибку. Все работает отлично, но когда я добавил модуль ui.bootstrap в app 'portfolioApp', отобразилось такое же сообщение об ошибке. Кроме того, я не вижу ссылок на модуль "ui.bootstrap" в вашем "index.html". Попробуйте удалить 'ui.bootstrap' или добавить ссылку этого модуля в 'index.html'.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню