Angular JS 1.1: использование общего углового модуля с ng-include - PullRequest
Новая
       10

Angular JS 1.1: использование общего углового модуля с ng-include

0 голосов
/ 30 октября 2018

Я изучаю угловой JS, пока работаю над проектом. У меня есть простое окно поиска, которое я использую в качестве общего компонента на всех своих страницах. Окно поиска имеет свой собственный контроллер и службу, которые выполняют ajax-вызовы на сервер, чтобы дать рекомендации по нажатию клавиш. Все работает отлично, если я запускаю searchBox.html. Однако, если я использую его в anonymousHomePage.html, используя ng-include. Кажется, он не работает, элемент управления даже не попадает в 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)

Пожалуйста, помогите, потому что я действительно застрял. Очень жаль за длинный вопрос, но я не знаю, как еще это задать. Содержание моих файлов ниже:

anonymousHomePage.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>

anonymousHomePageController.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();

    });

searchBox.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;
    }
   }

 })

searchBoxService.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;
    })

1 Ответ

0 голосов
/ 30 октября 2018

Это может быть связано с несовместимостью угловой версии поэтому не могли бы вы заменить скрипт на следующие скрипты 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...