AngularJS application coming up blank

Question

after I run the index.html file the web page seems to be blank & the console is empty as well with no errors. I'm new to this place and still learning. few tips would help me. Thanks.

I have also tried Lazyloading (typing the script tag at the end outside of ) Please help me out here.

index.html:







  
    
      
        Use md-autocomplete to search for matches from local or remote data sources.
      
      Favorite State
      
        
          {{item.display}}
        
        
          No states matching "{{ctrl.searchText}}" were found.
          Create a new one!
        
      
      

      Simulate query for results?
      Disable caching of queries?
      Disable the input?
      
        By default, md-autocomplete will cache results when performing a query.
        After the initial call is performed, it will use the cached results to eliminate unnecessary
        server requests or lookup logic. This can be disabled above.

js.js:

(function () {
  'use strict';
  angular
      .module('autocompleteDemo', ['ngMaterial'])
      .controller('DemoCtrl', DemoCtrl);

  function DemoCtrl ($timeout, $q, $log) {
    var self = this;

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

    // list of `state` value/display objects
    self.states        = loadAll();
    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;
      }
    }

    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() {
      var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
              Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
              Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
              Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
              North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
              South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
              Wisconsin, Wyoming';

      return allStates.split(/, +/g).map(function (state) {
        return {
          value: state.toLowerCase(),
          display: state
        };
      });
    }

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

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

    }
  }
})();

expecting a autocomplete application

Raghu Prasad · Accepted Answer

First add ng-app to your application
Then, you need to add angular-material, angular-animate and angular-aria dependencies to run this auto complete.










  
    
      
        Use md-autocomplete to search for matches from local or remote data sources.
      
      Favorite State
      
        
          {{item.display}}
        
        
          No states matching "{{ctrl.searchText}}" were found.
          Create a new one!
        
      
      

      Simulate query for results?
      Disable caching of queries?
      Disable the input?
      
        By default, md-autocomplete will cache results when performing a query.
        After the initial call is performed, it will use the cached results to eliminate unnecessary
        server requests or lookup logic. This can be disabled above.

AngularJS application coming up blank

Answers (1)

Related Questions