在过去的几天里，我一直在尝试学习Angular 1。这是我第一次尝试任何MVC框架，所以如果这对你们中一些更有经验的人来说很明显，请原谅我。
我正在 youtube 上学习教程，但我遇到了一个我无法真正理解的错误。
错误： [$injector：模块] 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 可能看起来有点到处都是。
这是我到目前为止得到的
索引.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>导航.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>应用.js
angular.module('ngPortfolio', ['ui.router','ui.bootstrap'])
.config(['$urlRouterProvider', '$stateProvider'], function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
})投资组合控制器.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);
});
});投资组合工厂.js
angular
.module('ngPortfolio')
.factory('portfolioFactory', function($http) {
function getProjects() {
return $http.get('data/projectData.json');
}
return {
getProjects: getProjects
}
});资产工厂.js
angular
.module('ngPortfolio')
.factory('assetFactory', function($http) {
function getAssets() {
return $http.get('data/assetData.json');
}
return {
getAssets: getAssets
}
});感谢您的帮助。这个问题是更基本的。
这是原始应用程序.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。我以为函数是在数组之后出现的。