javascript - Angular JS 1.1：使用带有 ng-include 的共享 Angular 模块

问题描述

我在做一个项目时正在学习 Angular js。我有一个简单的搜索框，我将其用作所有页面上的共享组件。搜索框有自己的控制器和服务，它们对服务器执行 ajax 调用，以提供按键建议。如果我运行 searchBox.html，一切都会完美运行。但是，如果我使用 ng-include 在anonymousHomePage.html 中使用它。它似乎不起作用，控件甚至没有出现在 searchBoxController.js 中，也没有出现任何建议。另外，我在加载 anonymousHomePage.html 时看到以下错误。

Uncaught Error: Unknown provider: $compileProvider from ngAnimate
at <anonymous>:2765:19
at Object.getService [as get] (<anonymous>:2891:39)
at <anonymous>:2843:45
at Array.forEach (<anonymous>)
at forEach (<anonymous>:148:11)
at loadModules (<anonymous>:2833:5)
at <anonymous>:2838:38
at Array.forEach (<anonymous>)
at forEach (<anonymous>:148:11)
at loadModules (<anonymous>:2833:5)

请帮忙，因为我真的被卡住了。真的很抱歉这个长问题，但我不知道还能问这个问题。我的文件内容如下：

匿名主页.html：

    <!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">


       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
     <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.js"></script>
       <script src="/BookBox/components/anonymousHomePage/anonymousHomePageService.js"></script>
       <script src="/BookBox/components/anonymousHomePage/anonymousHomePageController.js"></script>
       <script src="/BookBox/shared/searchBox/searchBoxService.js"></script>
      <script src="/BookBox/shared/searchBox/searchBoxController.js"></script>
      <style>

      </style>

    </head>
    <body ng-app="anonymousHomePageCtrl" ng-controller="anonymousHomeCtrl">
        <ng-include src="'/BookBox/shared/anonymousToolbar/anonymousToolbar.html'"></ng-include>
        <ng-include src="'/BookBox/shared/searchBox/searchBox.html'"></ng-include>
    </body>
</html>

匿名主页控制器.js：

 var anonymousHomePageController=angular.module("anonymousHomePageCtrl", 
 ["ngAnimate","anonymousHomePageService","searchBoxCtrlModule","searchBoxServiceModule"])
    .controller("anonymousHomeCtrl", function($scope,anonymousService){
        $scope.userInfo;
        $scope.getUserInfo=function(){debugger;
            anonymousService.getAnonymousUserInfo().
            success(function (users) {debugger
            $scope.userInfo = users;
             })
            .error(function (error) {
                 alert(error);
        });


        }
        //$scope.getUserInfo();

    });

搜索框.html：

<html>
    <head>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
       <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.js"></script>
      <script src="/BookBox/shared/searchBox/searchBoxService.js"></script>
      <script src="/BookBox/shared/searchBox/searchBoxController.js"></script>

      <style>

      </style>

    </head>
    <body ng-app="searchBoxCtrlModule" ng-controller="searchBoxCtrl">
        <div class='d-flex justify-content-center'>
         <div class="row" > 
          <md-select ng-style="{'height':'42px','border':'1px solid #CCCCCC','background':'#f2f2f2'}" ng-model="selectedType" placeholder="Type" required md-no-asterisk="false"
                      md-on-close="setSelectedType(selectedType)">
          <md-option value="Title">Title</md-option>
          <md-option value="Author">Author</md-option>
          <md-option value="Publisher">Publisher</md-option>
        </md-select>     
        <div ng-style="{'width':'600px','margin-top':'20px'}">

      <!-- <form name="autocompleteForm"> -->
        <md-autocomplete

                  md-menu-class="decreaseWidth"
                  ng-disabled = "false"
                  md-no-cache = "true"
                  md-selected-item = "selectedItem"

                  md-search-text = "searchText"
                  md-items = "item in getSearchResults(searchText)"
                  md-item-text = "item.title"
                  md-min-length = "4"
                  placeholder = "Type to search">

                  <md-item-template>
                     <span md-highlight-text = "searchText"
                        md-highlight-flags = "^i">{{item.title}}</span>
                  </md-item-template>

                  <md-not-found>
                     No Books matching "{{searchText}}" were found.

                  </md-not-found>
               </md-autocomplete>

       <!--</form> -->
        </div>
             <a class="btn btn-success" ng-style={'margin-top':'20px','height':'42px'} href="#" role="button"><img src="/BookBox/assets/img/open-iconic/svg/magnifying-glass.svg" height="15"></a>
        </div> 
       </div>     
    </body>
</html>

searchBoxController.js：

var searchBoxCtrlModule=angular.module("searchBoxCtrlModule",['ngMaterial','searchBoxServiceModule'])
    .controller("searchBoxCtrl", function($scope,$timeout,$q,searchBoxService){
        $scope.searchText;
        $scope.searchResult=[];
        $scope.selectedItem;
        $scope.selectedType='None';


        $scope.getSearchResults=function(searchText){debugger;
            if(searchText.length >= 4){
            $scope.searchResult.length=0;         
            searchBoxService.getSearchSuggestions(searchText,$scope.selectedType).
            success(function (books) {debugger
            $scope.searchResult = books;
             })
            .error(function (error) {
                 alert(error);
        });
        var deferred = $q.defer();
        $timeout(function () { deferred.resolve( $scope.searchResult ); }, Math.random() * 1000, false);
        return deferred.promise;
    }
   }

 })

搜索框服务.js：

var searchBoxServiceModule=angular.module("searchBoxServiceModule",[])
    .service("searchBoxService", function($http){
        var searchBoxService={};
       searchBoxService.getSearchSuggestions=function(key, searchType){
           return $http.get("http://localhost:8081/BookBoxAPI/actions/search/"+key+"/"+searchType);
       }
       return searchBoxService;
    })

标签： javascripthtmlangularjs

javascript - Angular JS 1.1：使用带有 ng-include 的共享 Angular 模块

问题描述

解决方案

推荐阅读