AngularJS Komponente und Controller

Question

Ich habe Winkelkomponente erstellt und der Code sieht unter:

(function() { 
 
    'use strict'; 
 
    angular 
 
     .module('App', ['ngMaterial']).component('autoComplete', { 
 
      template: '<div layout="column" ng-cloak>\ 
 
         <md-content class="md-padding">\ 
 
          <form ng-submit="$event.preventDefault()">\ 
 
           <md-autocomplete ng-disabled="$ctrl.isDisabled"\ 
 
            md-no-cache="$ctrl.noCache"\ 
 
            md-selected-item="$ctrl.selectedItem"\ 
 
            md-search-text-change="$ctrl.searchTextChange($ctrl.searchText)"\ 
 
            md-search-text="$ctrl.searchText"\ 
 
            md-selected-item-change="$ctrl.selectedItemChange(item)"\ 
 
            md-items="item in $ctrl.querySearch($ctrl.searchText)"\ 
 
            md-item-text="item.display"\ 
 
            md-min-length="0"\ 
 
            placeholder="Search State">\ 
 
           <md-item-template>\ 
 
           <span md-highlight-text="$ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>\ 
 
           </md-item-template>\ 
 
           <md-not-found>\ 
 
           No states matching "{{$ctrl.searchText}}" were found.\ 
 
           <a ng-click="$ctrl.newState($ctrl.searchText)">Create a new one!</a>\ 
 
           </md-not-found>\ 
 
           </md-autocomplete>\ 
 
           <br />\ 
 
          </form>\ 
 
         </md-content>\ 
 
        </div>', 
 
      controller: function DemoCtrl($timeout, $q, $log, $http) { 
 
       $log.info('Called'); 
 
       var self = this; 
 

 
       self.simulateQuery = false; 
 
       self.isDisabled = false; 
 

 
       // list of `state` value/display objects 
 
       self.states = loadAll($http); 
 
       self.querySearch = querySearch; 
 
       self.selectedItemChange = selectedItemChange; 
 
       self.searchTextChange = searchTextChange; 
 

 
       self.newState = newState; 
 

 
       function newState(state) { 
 
        alert("Sorry! You'll need to create a Constitution for " + state + " first!"); 
 
       } 
 

 
       // ****************************** 
 
       // Internal methods 
 
       // ****************************** 
 

 
       /** 
 
       * Search for states... use $timeout to simulate 
 
       * remote dataservice call. 
 
       */ 
 
       function querySearch(query) { 
 
        //var results = query ? self.states.filter(createFilterFor(query)) : self.states, 
 
        // deferred; 
 
        //if (self.simulateQuery) { 
 
        // deferred = $q.defer(); 
 
        // $timeout(function() { deferred.resolve(results); }, Math.random() * 1000, false); 
 
        // return deferred.promise; 
 
        //} else { 
 
        // return results; 
 
        //} 
 
        var allStates; 
 
        return $http.get("/Home/GetStates", { params: { q: query } }) 
 
        .then(function (response) { 
 
         allStates = response; 
 
         return allStates.data.split(/, +/g).map(function (state) { 
 
          return { 
 
           value: state.toLowerCase(), 
 
           display: state 
 
          }; 
 
         }); 
 
        }) 
 
        //$http({ 
 
        // method: 'GET', 
 
        // url: '/Home/GetStates' 
 
        //}).then(function successCallback(response) { 
 
        // allStates = response; 
 

 
        //}, function errorCallback(response) { 
 
        // alert(response); 
 
        // return false; 
 
        //}); 
 
       } 
 

 
       function searchTextChange(text) { 
 
        $log.info('Text changed to ' + text); 
 
       } 
 

 
       function selectedItemChange(item) { 
 
        $log.info('Item changed to ' + JSON.stringify(item)); 
 
       } 
 

 
       /** 
 
       * Build `states` list of key/value pairs 
 
       */ 
 
       function loadAll($http) { 
 
        //var allStates; 
 
        //$http({ 
 
        // method: 'GET', 
 
        // url: '/Home/GetStates' 
 
        //}).then(function successCallback(response) { 
 
        // allStates = response; 
 
        // return allStates.split(/, +/g).map(function (state) { 
 
        //  return { 
 
        //   value: state.toLowerCase(), 
 
        //   display: state 
 
        //  }; 
 
        // }); 
 
        //}, function errorCallback(response) { 
 
        // alert(response); 
 
        // return false; 
 
        //});    
 
       } 
 

 
       /** 
 
       * Create filter function for a query string 
 
       */ 
 
       function createFilterFor(query) { 
 
        var lowercaseQuery = angular.lowercase(query); 
 

 
        return function filterFn(state) { 
 
         return (state.value.indexOf(lowercaseQuery) === 0); 
 
        }; 
 

 
       } 
 
      } 
 
     }) 
 
})();

und ich habe einen einen weiteren Controller in neuen JavaScript-Datei, und es sieht unten erstellt.

(function() { 
 
    var app = angular.module("App", []); 
 
    var TestController = function ($scope) { 
 
     $scope.Display = "Test Display"; 
 
    }; 
 
    app.controller("TestController", ["$scope", TestController]); 
 
}());

Hier ist mein HTML

<html ng-app="App" ng-cloak> 
 
<head> 
 
    <meta name="viewport" content="width=device-width" /> 
 
    <title>Index</title> 
 
    <script src="~/Scripts/angular.min.js"></script> 
 
    <!-- Angular Material requires Angular.js Libraries --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
 

 
    <!-- Angular Material Library --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
 

 
    <script type="text/javascript"> 
 
     /** 
 
     * You must include the dependency on 'ngMaterial' 
 
     */ 
 
     angular.module('App', ['ngMaterial']); 
 
     
 
    </script> 
 
    <script src="~/Scripts/TestAngular.js"></script> 
 
    <script src="~/Scripts/Component/auto-complete.component.js"></script> 
 
    <!-- Your application bootstrap --> 
 

 
    
 

 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
 
</head> 
 
<body> 
 
    <div ng-controller="TestController"> 
 
     <input type="text" ng-model="Display" /> 
 
     {{Display}} 
 
    </div> 
 
    <auto-complete></auto-complete> 
 
    
 
</body> 
 
</html>

wenn HTML zu laufen versucht, ich bin Testcontroller Registrierung Fehler. Aber wenn ich auto-complete.component.js entferne, dann funktioniert TestController gut. Bitte helfen Sie mir, dieses Problem zu lösen.

Answer 1

Sie verwirren Ihre Moduldeklaration, deklarieren sie entweder einmal oder machen Sie es richtig.

tun es richtig

Sobald Sie Ihr Modul deklariert haben, können Sie darauf zugreifen mit

angular.module('App') 

Also in Ihrem HTML-Datei ändert sich nichts, aber in beide andere Dateien ersetzen angular.module('App',[..]) by Winkel .Modul ('App').

Dies ist die beste Praxis ist es zu erreichen, um jede Komponente in isolierten (function(){ .. })() Blöcke getrennt halten

es einmal Deklarieren

Für Ihr Problem, ich durch eine Änderung der ersten genannt Skript (inline in html) gelöst :

var app = angular.module('App', ['ngMaterial']); 

diese Variable Dann habe ich stattdessen ein neues Modul jedes Mal neu zu definieren:

(function(app){ 
    // controller or component here 
}(app)); 

Dies hat den Trick, aber dies migth sein etwas kompliziertere Modul überschreiben.

(function (app) { 
 
    var TestController = function ($scope) { 
 
     $scope.Display = "Test Display"; 
 
    }; 
 
    app.controller("TestController", ["$scope", TestController]); 
 
}(app));

Mein zur automatischen Vervollständigung Komponente:

(function (app) { 
 
    'use strict'; 
 
    app.component('autoComplete', { 
 
     // ... 
 
    }) 
 
})(app);

Answer 2

Fehler: Darüber hinaus sollten Sie globale Variable als solche

Mein Testcontroller vermeiden Modul erstellt werden soll nur o nce in der ganzen Anwendung.

Sie haben ein Modul für eine Komponente und auch für den Controller erstellt, der falsch ist. Erstellen Sie für einen und verwenden Sie in der Sekunde.

In Ihrem Controller,

var app = angular.module("App", []);

sein sollte,

var app = angular.module("App");

Controller:

(function() { 
    var app = angular.module("App"); 
    var TestController = function ($scope) { 
     $scope.Display = "Test Display"; 
    }; 
    app.controller("TestController", ["$scope", TestController]); 
}()); 

Überprüfen Sie die Linie,

var app = angular.module("App");