javascript - TypeError: Main.login is not a function -

i trying implement this example project. can see front-end side code here.

this controller

(function(){ 'use strict'; /* authentication controllers */  var app = angular.module('pook');     app.controller('authctrl',['$http','$rootscope', '$scope', '$location', '$localstorage', 'ngtoast', 'main', function($http, $scope, $location, $localstorage, ngtoast, main){         $scope.login = function(){             var formdata = {                 username: $scope.username,                 password: $scope.password             };       main.login(formdata, function(res) {           if (res.type == false) {               alert(res.data)               } else {               $localstorage.token = res.data.token;               window.location = "/";               }       }, function() {           $rootscope.error = 'failed signin';       });         }     }]); })(); 

below factory service

(function(){     'use strict';     var app = angular.module('pook')         app.factory('main', ['$http', '$localstorage', function($http, $localstorage){             var baseurl = "127.0.0.1:3000/api";             function changeuser(user) {                 angular.extend(currentuser, user);             }              function urlbase64decode(str) {                 var output = str.replace('-', '+').replace('_', '/');                 switch (output.length % 4) {                     case 0:                         break;                     case 2:                         output += '==';                         break;                     case 3:                         output += '=';                         break;                     default:                         throw 'illegal base64url string!';                 }                 return window.atob(output);             }              function getuserfromtoken() {                 var token = $localstorage.token;                 var user = {};                 if (typeof token !== 'undefined') {                     var encoded = token.split('.')[1];                     user = json.parse(urlbase64decode(encoded));                 }                 return user;             }              var currentuser = getuserfromtoken();              return {                 save: function(data, success, error) {                     $http.post(baseurl + '/users', data).success(success).error(error)                 },                 login: function(data, success, error) {                     $http.post(baseurl + '/login', data).success(success).error(error)                 },                 me: function(success, error) {                     $http.get(baseurl + '/me').success(success).error(error)                 },                 logout: function(success) {                     changeuser({});                     delete $localstorage.token;                     success();                 }             };         }     ]); })(); 

as can see copied , pasted example word word , changed app name , controller name.

but error below:

typeerror: main.login not function     @ scope.$scope.login (http://127.0.0.1:3000/js/controllers/auth.js:15:12)     @ $parsefunctioncall (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:12404:18)     @ ngeventdirectives.(anonymous function).compile.element.on.callback (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:21566:17)     @ scope.$get.scope.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:14466:28)     @ scope.$get.scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:14565:23)     @ htmlformelement.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:21571:23)     @ htmlformelement.jquery.event.dispatch (https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js:4435:9)     @ htmlformelement.jquery.event.add.elemdata.handle (https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js:4121:28) 

i mean, there main.login function. don't see why cant find it.

that because main not think is. when use explicit dependency injection annotation need make sure order , number of dependecies , injected arguments same.

.controller('authctrl',       ['$http','$rootscope', '$scope', '$location', '$localstorage', 'ngtoast', 'main',                  ^^^____     function($http, $scope, $location, $localstorage, ngtoast, main) 

if see have rootscope dependency injected variable scope, remaining arguments gets shifted. main variable holds $location object. when in doubt can reverify argument list , console logging. proper indentation helps in cases have lots of arguments injected.

remove $rootscope form injection list , should fine.