1
第4天，我學習了AngularJs。所以我決定把AngularUI Bootstrap添加到我的小項目中，因爲如果你還不知道Bootstrap是非常棒的。當然，這並不是一蹴而就的。我遇到了標題中提到的錯誤，控制檯並沒有告訴我其他什麼。
尋找其他有類似問題的人告訴我，這可能與我的標記的<head>中加載的腳本的順序有關。好吧，我試着按照我讀過的指示重新安排它，但沒有多大幫助。這是我的代碼，它有什麼問題？
index.html
<!DOCTYPE html>
<html ng-app="navApp" ng-strict-di>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<script src="~/Areas/AngularTest/scripts/app.js"></script>
</head>
<body ng-cloak>
<div ng-controller="menuController">
<div ng-include="scripts/templates/sidebar.html"></div>
</div>
</body>
</html>
我使用的咕嚕聲到我的js文件所以在這裏組合成一個app.js是獨立的部分。
scripts/controllers/navController.js
var navApp = angular.module('navApp', [
'ngResource',
'ui.bootstrap',
'ngAnimate'
]);
navApp.controller('menuController', [
'$scope',
'navSectionList',
'navGetCategories',
function ($scope, navSectionList, navGetCategories) {
$scope.navSectionList = navSectionList.query();
$scope.getSectionID = function (event) {
var sectionID = event.currentTarget.attributes["data-id"].value;
$scope.sectionID = sectionID;
$scope.navGetCategories = navGetCategories
.getResource(sectionID)
.query();
};
}
],
function ($scope) {
$scope.oneAtATime = true;
$scope.status = {
isFirstOpen: true,
isFirstDisabled: false
};
}
);
scripts/services/navService.js
navApp.factory('navSectionList', [
'$resource', function ($resource) {
return $resource('/api/navigation/section/list', {}, {
query: { method: 'GET', params: {}, isArray: true }
});
}
]);
navApp.factory('navGetCategories', ['$resource', function ($resource) {
var service = {
getResource: function (sectionID) {
return $resource('/api/navigation/category/' + sectionID, {}, {
query: { method: 'GET', params: {}, isArray: true }
});
}
};
return service;
}]);
templates/sidebar.html
<div class="sidebar">
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" heading="Products" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
<ul>
<li>New Arrivals</li>
<li>On Sale</li>
</ul>
</div>
<div uib-accordion-group class="panel-default" heading="{{section.name}}" ng-click="getSectionID($event)" ng-repeat="section in navSectionList" data-id="{{section.id}}">
<ul>
<li ng-repeat="categories in navGetCategories">
{{categories.name}}
</li>
</ul>
</div>
</uib-accordion>
</div>
發現任何問題？那當然有什麼問題，否則我們不會在這裏。
我不知道從哪裏開始進行調試，因爲在我學習的這個時間點，我主要在做cargo-cult programming，但是我們都必須從某處開始。請教我。