0

I'm new to angularJs and I created an application which uses ui-routing in it and first loads the Config file which has a default state which calls the component and this component calls the service which fetches the data from API.I took this structure from a plunker example.When I run the page it loads the page -> Config -> Component and then throws below error.When i clicked on the error message it said it was related to now declaring the injector correctly. Find the code and error message below.

Index.html enter image description here

Config File(config.js)

var myApp = angular.module('EmpList', ['ui.router', 'ui.router.visualizer']);
alert('config');
myApp.config(function($stateProvider) {
  // An array of state definitions
  var states = [
    { 
      name: 'hello', 
      url: '',
      // Using component: instead of template:
      component: 'Get',
      resolve: {
        people: function(PeopleService) {
          return PeopleService.getAllPeople();
        }
      }
    }
  ]

  // Loop over the state definitions and register them
  states.forEach(function(state) {
    $stateProvider.state(state);
  });
});

Component(people.js)

angular.module('EmpList').component('Get', {
  bindings: { people: '<' },

  template: '<h3>Some people:</h3>'
})

Service(people.js)

angular.module('EmpList').service('PeopleService', function($http) {
  var service = {
    getAllPeople: function() {
        return $http.get('http://localhost:50164/api/Employee/get').then(function(resp) {
            return resp.data;
      });
    }
  }

  return service;
})

Error enter image description here

Error Details enter image description here enter image description here

Sainath
  • 979
  • 2
  • 13
  • 22

0 Answers0