angularjs - Angular JS Dependency Error -

getting error

error: [$injector:unpr] unknown provider: studstudentserviceprovider <- studstudentservice <- studentctrl

my main.js looks this:

require.config({     //baseurl: '/scripts/',      paths: {     'jquery': 'scripts/jquery-2.2.0.min',     'angular': 'scripts/angular',     'ngstorage': 'scripts/ngstorage',     'ngcookies': 'scripts/angular-cookies',     'ui-router': 'scripts/angular-ui-router',      'bootstrap': 'scripts/bootstrap',     'service': 'services/service',     'studentctrl': 'controllers/studentctrl',     //'homectrl': "controllers/homectrl",     //'accountctrl': "controllers/accountctrl",     //'filter': "filters/filter",     },     shim: {     ngstorage: {         deps: ['angular'],         exports: 'angular'      },      ngcookies: {         deps: ['angular'],         exports: 'angular'       },     'ui-router': {         deps: ['angular'],         exports: 'angular'       },       angular: {         exports: 'angular'       },      bootstrap: {         deps: ['jquery']      }      },      deps: ['app']      });     require([       "app",      "bootstrap",      "studentctrl"       ],     function (app) {     //bootstrapping app     app.init();     }     ); 

my app.js looks this:

define(['ui-router', 'ngstorage', 'ngcookies'], function () {      //defining angularjs module     var app = angular.module("app", ['ui.router', 'ngcookies', 'ngstorage']);      //global service     app.constant("utility",         {             baseaddress: "http://localhost:15985/api/"         });      //manual bootstrap     app.init = function () {         angular.bootstrap(document, ['app']);     };      //defining routes     app.config(function ($stateprovider, $urlrouterprovider) {          $urlrouterprovider.otherwise("/");          $stateprovider             .state("home", {                 url: "/",                 templateurl: 'views/home/home.html',                 controller: 'homectrl'             })         .state("students", {             url: "/students",             templateurl: 'views/students/students.html',             controller: 'studentctrl'         });     });     return app; }); 

my studentctrl.js looks this:

define(['app', 'service'], function (app) {     app.controller("studentctrl", function ($scope, studstudentservice) {         $scope.students = [];         $scope.student = null;         alert('hi');         //get user         $scope.get = function () {             $scope.student = this.student;          };          // initialize students data         (function () {             studentservice.getstudentslist().success(function (data) {                 $scope.students = data;             }).error(function (data) {                 $scope.error = "an error has occured while loading students! " + data.exceptionmessage;             });         })();       }); }); 

my service.js looks this:

define(['app'], function (app) {     //defining service using factory method     app.factory('studentservice', function ($http, utility) {         var serviceurl = utility.baseaddress + "student/";         return {             getstudentslist: function () {                 var url = serviceurl + "getstudents";                 return $http.get(url);             }          };     }); }); 

fairly simple

you injecting studstudentservice service name studentservice , aren't same spelling