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