我有一个简单的SPA，然后在关于复数视频（第二个模块）的Andrew Connel课程之后，我有一些错误。基本上，第二个模块是创建配置异常处理程序和全局配置对象。
似乎我错过了什么，但无法弄清楚到底是什么。
index.html文件
<!doctype html>
<html data-ng-app="productManagement">
<head>
<!-- Styles -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />|
<link href="../Content/App.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
</head>
<body>
<div id="pageWidth">
<div id="chrome_ctrl_container"></div>
<div id="contentBody">
<nav class="navbar navbar-inverse">
<div class="container">
<a class="navbar-brand"
ui-sref="home">Acme Product Management</a>
<div class="navbar-header">
<button type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a ui-sref="productList">Product List</a></li>
<li>
<a ui-sref="productEdit.info({productId:0})">
<i class="glyphicon glyphicon-plus"></i>
Add Product
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div ui-view></div>
</div>
</div>
</div>
<!-- Common Libraries -->
<script src="//code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="/_layouts/15/init.js"></script>
<script src="/_layouts/15/core.js"></script>
<script src="/_layouts/15/SP.UI.Controls.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js" type="text/javascript"></script>
<script src="//code.angularjs.org/1.3.2/angular-resource.min.js" type="text/javascript"></script>
<script src="//code.angularjs.org/1.3.2/angular-mocks.js" type="text/javascript"></script>
<script src="../Scripts/lib/angular-ui-router.min.js" type="text/javascript"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js" type="text/javascript"></script>
<script src="../Scripts/lib/ui-utils.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js" type="text/javascript"></script>
<script src="../Scripts/lib/angular-charts.min.js" type="text/javascript"></script>
<!-- my libraries -->
<script src="../Scripts/lib/jquery-extensions.js" type="text/javascript"></script>
<!-- App Bootstrapping -->
<script src="../Scripts/App/App.js" type="text/javascript"></script>
<script src="../Scripts/App/config.js" type="text/javascript"></script>
<script src="../Scripts/App/config.exceptionHandler.js" type="text/javascript"></script>
<!-- Services -->
<script src="../Scripts/App/Common/Services/common.services.js" type="text/javascript"></script>
<script src="../Scripts/App/Common/Services/productResource.js" type="text/javascript"></script>
<script src="../Scripts/App/Common/Services/productResourceMock.js" type="text/javascript"></script>
<script src="../Scripts/App/Common/Services/productService.js" type="text/javascript"></script>
<script src="../Scripts/App/Common/Services/productdataservice.js"></script>
<!--Controllers -->
<script src="../Scripts/App/Products/productListCtrl.js" type="text/javascript"></script>
<script src="../Scripts/App/Products/productDetailCtrl.js" type="text/javascript"></script>
<script src="../Scripts/App/Products/productEditCtrl.js" type="text/javascript"></script>
<script src="../Scripts/App/Prices/priceAnalyticsCtrl.js" type="text/javascript"></script>
<!-- App Chrome-->
<script src="../Scripts/lib/appchrome.js" type="text/javascript"></script>
</body>
</html>
App.js
(function () {
"use strict";
var app = angular.module("productManagement",
["common.services",
"ui.router",
"ui.mask",
"ui.bootstrap",
"angularCharts"]);
app.config(function ($provide) {
$provide.decorator("$exceptionHandler",
["$delegate",
function ($delegate) {
return function (exception, cause) {
exception.message = "Please contact the Help Desk! \n Message: " +
exception.message;
$delegate(exception, cause);
alert(exception.message);
};
}]);
});
app.config(["$stateProvider",
"$urlRouterProvider",
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home", {
url: "/",
templateUrl: "../Scripts/app/welcomeView.html"
})
// Products
.state("productList", {
url: "/products",
templateUrl: "../Scripts/app/products/productListView.html",
controller: "ProductListCtrl as vm"
})
.state("productEdit", {
abstract: true,
url: "/products/edit/:productId",
templateUrl: "../Scripts/app/products/productEditView.html",
controller: "ProductEditCtrl as vm",
resolve: {
productResource: "productResource",
product: function (productResource, $stateParams) {
var productId = $stateParams.productId;
return productResource.get({ productId: productId }).$promise;
}
}
})
.state("productEdit.info", {
url: "/info",
templateUrl: "../Scripts/app/products/productEditInfoView.html"
})
.state("productEdit.price", {
url: "/price",
templateUrl: "../Scripts/app/products/productEditPriceView.html"
})
.state("productEdit.tags", {
url: "/tags",
templateUrl: "../Scripts/app/products/productEditTagsView.html"
})
.state("productDetail", {
url: "/products/:productId",
templateUrl: "../Scripts/app/products/productDetailView.html",
controller: "ProductDetailCtrl as vm",
resolve: {
productResource: "productResource",
product: function (productResource, $stateParams) {
var productId = $stateParams.productId;
return productResource.get({ productId: productId }).$promise;
}
}
})
.state("priceAnalytics", {
url: "/priceAnalytics",
templateUrl: "../Scripts/app/prices/priceAnalyticsView.html",
controller: "PriceAnalyticsCtrl",
resolve: {
productResource: "productResource",
products: function (productResource) {
return productResource.query().$promise;
}
}
})
}]
);
}());
Config.js
(function () {
'use strict';
var app = angular.module('productManagement');
var events = {
controllerActivateSuccess: 'controller.activateSuccess'
};
var config = {
// config the exceptionHandler decorator
appErrorPrefix: '[SYSERR] ',
// app events
events: events,
// app version
version: '1.0.0.0',
// debug notification settings
showDebugNotiSetting: true
};
// create a global variable on app called 'config'
app.value('config', config);
// configure the angular logging service before startup
app.config(['$logProvider', function ($logProvider) {
// turn debugging off/on (no info or warn)
if ($logProvider.debugEnabled) {
$logProvider.debugEnabled(true);
}
}]);
// configure the common configuration
app.config(['commonConfigProvider', function (cfg) {
cfg.config.controllerActivateSuccessEvent = config.events.controllerActivateSuccess;
}]);
})();
ConfigExceptionHandler.js
(function () {
'use strict';
var app = angular.module('productManagement');
app.config(function ($provide) {
$provide.decorator('$exceptionHandler',
['$delegate', 'config', 'logger', extendExceptionHandler]);
});
// Extend $exceptionHandler service to display error notification
function extendExceptionHandler($delegate, config, logger) {
var appErrorPrefix = config.appErrorPrefix;
return function (exception, cause) {
$delegate(exception, cause);
if (appErrorPrefix && exception.message.indexOf(appErrorPrefix) === 0) { return; }
var errorData = {
exception: exception,
cause: cause
};
var msg = appErrorPrefix + exception.message;
logger.logError(msg, errorData, true);
};
}
})();