Question

第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>

我使用Grunt将我的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，但我们都必须从某个地方开始。请教我

Answer 1

那一定是最快的，我在问了一个问题之后发现了什么。所以上面的代码有很多问题。

一个。我呼吁ngAnimate但不包括js。这是导致错误消息的主要问题。咄。在<head>中添加以下内容解决了该问题。

https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js

B中。我的ngInclude指令编写不正确。请注意缺少src属性以及双引号内缺少单引号。两者都会导致文件不被包含。正确的代码如下：

<div ng-include src="'templates/sidebar.html'"></div>

℃。我的样式表没有被宣布正确。正确的方法：

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" />

我将开始另一个关于我遇到此问题的新问题。

尝试在AngularJs中使用ui.bootstrap时未捕获错误：[$ injector：modulerr]

1 个答案: