1
我一直在试图学习Angular 1的最近几天。这是我第一次进入任何MVC框架，所以请原谅我，如果这对你们一些更有经验的人来说显而易见。
我正在关注YouTube上的教程，但我遇到了一个我无法真正理解的错误。
Error: [$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)
我试着用搜索引擎的问题，但我无法阅读其他人的代码，并试图把它与我自己的问题（他们看起来比我的方式更先进）。
在继续之前，我应该提到，我首先遵循了一个教程，将所有内容放在一个页面上，然后我再回到自己尝试添加某种功能导航，因此为什么我的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
}
});
你的控制器在哪里？ ** portfolioController.js **这一个。我有一种感觉，你没有显示完整的代码。 – ZombieChowder
对不起，我现在也添加了该文件。 – pragmatic84
你显然缺少一个模块，问题是哪一个。你有没有包含你使用的所有脚本？ \t 如果您不确定哪个模块丢失，请使用非缩小的angular.js，它会提供可读的错误消息。 – ZombieChowder