javascript - Angular 1.6错误:[$ injector:modulerr]

最近几天，我一直在尝试学习Angular 1。这是我首次尝试使用任何MVC框架，因此如果您对某些经验丰富的人显而易见的话，请原谅我。

我正在关注youtube上的教程，但遇到了我无法理解的错误。

错误：[$ injector：modulerr]
http://errors.angularjs.org/1.6.4/ $ injector / modulerr？p0 = ngPortfolio＆p1 = Erro ... ogleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.6.4％2Fangular.min.js％3A41％3A476）

我曾尝试使用Google搜索该问题，但在阅读别人的代码并将其与自己的问题联系起来时遇到了麻烦（它们似乎都比我先进得多）。

在继续之前，我应该提到的是，我首先遵循了一个教程，将所有内容放到一页上，现在我要自己重新尝试添加某种功能正常的导航，因此为什么我的HTML可能看起来有点像地点。

这是我到目前为止所得到的

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <title></title>
</head>
<body >
    <div class="container" ng-app="ngPortfolio" ng-controller="portfolioController">
      <div ng-include="'templates/nav.html'"></div>
      <div ui-view>

      </div>
      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron" ng-repeat="asset in assets">
        <img ng-src="{{asset.image}}" alt="{{asset.name}}">
        <p>{{asset.welcome}}</p>
      </div>

      <div class="well" ng-repeat="project in projects">
        <h1>{{ project.name }}</h1>
        <img ng-src="{{ project.image }}" alt="{{ project.name }}">
        <p>{{ project.description }}</p>
        <a href="{{ project.url }}">View</a>
      </div>
    </div> <!-- /container -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js" charset="utf-8"></script>
<script src="app.js" charset="utf-8"></script>
<script src="scripts/portfolioController.js" charset="utf-8"></script>
<script src="scripts/assetFactory.js" charset="utf-8"></script>
<script src="scripts/portfolioFactory.js" charset="utf-8"></script>
</html>

nav.html

<!-- Static navbar -->
<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="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">fabio-felizzi.com</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">CV</a></li>
        <li><a href="#">Contact</a></li>
        <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Change Versions <span class="caret"></span></a>
         <ul class="dropdown-menu">
           <li><a href="#">Angular 2</a></li>
           <li><a href="#">Angular 4</a></li>
           <li><a href="#">React</a></li>
           <li><a href="#">Classic</a></li>
         </ul>
       </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div><!--/.container-fluid -->
</nav>

app.js

angular.module('ngPortfolio', ['ui.router','ui.bootstrap'])
  .config(['$urlRouterProvider', '$stateProvider'], function($urlRouterProvider, $stateProvider) {
      $urlRouterProvider.otherwise('/');
  })

PortfolioController.js

angular
  .module('ngPortfolio')
    .controller('portfolioController', function($scope, assetFactory, portfolioFactory) {
      $scope.projects;

      portfolioFactory.getProjects().then(function(data) {
        $scope.projects = data.data;
      }, function(error) {
        console.log(error);
      });

      assetFactory.getAssets().then(function(data) {
        $scope.assets = data.data;
      }, function(error) {
        console.log(error);
      });
    });

PortfolioFactory.js

angular
  .module('ngPortfolio')
    .factory('portfolioFactory', function($http) {

      function getProjects() {
        return $http.get('data/projectData.json');
      }
      return {
        getProjects: getProjects
      }
    });

assetFactory.js

angular
  .module('ngPortfolio')
.factory('assetFactory', function($http) {

  function getAssets() {
    return $http.get('data/assetData.json');
  }
  return {
    getAssets: getAssets
  }
});

最佳答案

感谢你的帮助。这个问题更基本了。

这是原始的app.js

angular.module('ngPortfolio', ['ui.router','ui.bootstrap'])
  .config(['$urlRouterProvider', '$stateProvider'], function($urlRouterProvider, $stateProvider) {
      $urlRouterProvider.otherwise('/');
  })

这是固定版本

angular.module('ngPortfolio', ['ui.router','ui.bootstrap'])
  .config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
      $urlRouterProvider.otherwise('/');
  }])

为了使您不必遍历每个字符，我必须将.config（）中的所有内容括在方括号中，而不仅仅是$ urlRouterProvider和$ stateProvider。我以为函数是在数组之后。

关于javascript - Angular 1.6错误:[$ injector:modulerr]，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44045697/