这是我第一天真正尝试使用AngularJS而且我遇到了错误。
错误:$ injector:modulerr模块错误
AngularJS代码:
var PP = angular.module('PP', []);
PP.controller('documentController', function ($scope) {
$scope.documents = [
{
'filename': 'Untitled-1',
'content': 'Content-1'
},
{
'filename': 'Untitled-2',
'content': 'Content-2'
},
{
'filename': 'Untitled-3',
'content': 'Content-3'
},
];
});
以及HTML:
<!DOCTYPE html>
<html lang="en" ng-app="PP">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Core Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery.layout.min.css" rel="stylesheet">
<link href="custom/style.css" rel="stylesheet">
<!-- IE Support -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Main Wrapper -->
<div class="container-fluid ui-layout-center" id="wrapper" ng-controller="documentController">
<!-- Editor Tabs -->
<div class="row-fluid">
<ul class="nav nav-tabs" role="tablist" id="tabbar">
<li ng-repeat="document in documents">
<a href="#{{document.filename}}" role="tab" data-toggle="tab">
<button class="close closeTab" type="button">x</button>
{{document.filename}}
</a>
</li>
</ul>
</div>
<!-- Editor Contents -->
<div class="row-fluid content">
<div class="tab-content" style="height:100%;">
<div ng-repeat="document in documents">
<div class="tab-pane" id="{{document.filename}}">{{document.content}}</div>
</div>
</div>
</div>
<!-- Panel Tabs -->
<ul class="nav nav-tabs panel-tabs" role="tablist">
<li id="console-trigger"><a href="#console-tab" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-flash"></i></a></li>
<li id="search-trigger"><a href="#search-tab" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-search"></i></a></li>
</ul>
</div>
<!-- Panel Contents -->
<div class="ui-layout-south">
<div class="tab-content" id="panel-content">
<!-- Console -->
<div class="tab-pane fade in active" id="console-tab">
</div>
<!-- Search -->
<div class="tab-pane fade" id="search-tab">
</div>
</div>
</div>
<!-- Scripts -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.layout.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.tabdrop.min.js"></script>
<script src="js/mustache.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="extras/ace/ace.js"></script>
<script src="custom/script.js"></script>
</body>
</html>
知道发生了什么事吗?