Question

过去几天我一直在努力学习Angular 1。这是我第一次涉足任何MVC框架，所以请原谅我，如果对于一些经验丰富的人来说这是显而易见的。

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

错误：[$ injector：modulerr] http://errors.angularjs.org/1.6.4/ $注射器/ modulerr P0 = ngPortfolio＆安培; P1 = ERRO ... ogleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.6.4％2Fangular.min.js％3A41％3A476）

我试过谷歌搜索这个问题，但我在阅读其他人的代码时遇到了麻烦，并试图将其与我自己的问题联系起来（他们似乎都比我更先进）。

在继续之前我应该先提一下，我首先按照一个教程，将所有内容放在一个页面上，然后我现在回过头来尝试添加某种功能导航，这就是为什么我的HTML看起来似乎到处都是。

这是我到目前为止所做的事情

的index.html

＆＃13;

<!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>

＆＃13;

nav.html

＆＃13;

<!-- 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>

＆＃13;

app.js

＆＃13;

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

＆＃13;

portfolioController.js

＆＃13;

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);
      });
    });

＆＃13;

portfolioFactory.js

＆＃13;

angular
  .module('ngPortfolio')
    .factory('portfolioFactory', function($http) {

      function getProjects() {
        return $http.get('data/projectData.json');
      }
      return {
        getProjects: getProjects
      }
    });

＆＃13;

assetFactory.js

＆＃13;

angular
  .module('ngPortfolio')
.factory('assetFactory', function($http) {

  function getAssets() {
    return $http.get('data/assetData.json');
  }
  return {
    getAssets: getAssets
  }
});

＆＃13;

Answer 1

感谢您的帮助。这个问题更加基本。

这是原始的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。我以为这个函数是在数组之后发生的。

Angular 1.6错误：[$ injector：modulerr]

1 个答案: