TypeError: undefined is not a function from angular

Question

Im getting a TypeError: undefined is not a function. when using Angular..

Im loading the scripts in this ordering:

_Layout.cshtml

<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-resource.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/toastr.js"></script>
<script src="~/Scripts/App/app.js"></script>    

<script src="~/Scripts/Authentication/authenticationRepository.js"></script>
<script src="~/Scripts/Authentication/authenticationController.js"></script>

<script src="~/Scripts/Notification/notificationFactory.js"></script>


@RenderSection("scripts", required: false)

app.js

var app = angular.module("seducApp", ['ngRoute', 'ngResource'])
    .config(function ($routeProvider, $locationProvider) {

        //Login
        $routeProvider.when('/User/Login', {
            templateUrl: '/templates/User/Login.html'
        }).
        otherwise({
            redirectTo: '/'
        });
        $locationProvider.html5Mode(true);
    });

authenticationController.js

app.controller("authenticationController", function ($scope, authenticationRepository, notificationFactory, $location) {
    $scope.login = function (loginVM, returnUrl) {
        notificationFactory.error = false;
        authenticationRepository.login(loginVM, returnUrl).$promise.then(
            function () { $location.url('Home'); },
            function () { notificationFactory.error('Fejl i login', 'Fejl'); });
    };

    $scope.master = {};

    $scope.reset = function () {
        $scope.loginVM = angular.copy($scope.master);
    };

    $scope.isUnchanged = function (loginVM) {
        return angular.equals(loginVM, $scope.master);
    };

    $scope.reset();

});

authenticationRepository.js

'use strict';

app.factory('authenticationRepository', function ($resource) {
    return {
        login: function (loignVM, returnUrl) {
            return $resource('/api/User').Login(loignVM, returnUrl);
        }
    };
});

Im new to Angularjs and I can find the problem..

Answer 1

I works like this:

'use strict';

app.factory('authenticationRepository', function ($resource) {
    return {
        login: function (model) {
            return $resource('/api/User/Login').save(model);
            }
    };
});

'use strict';

app.controller("authenticationController", function ($scope, authenticationRepository, $location, notificationFactory) {
    $scope.login = function (model) {
        notificationFactory.error = false;
        authenticationRepository.login(model).$promise.then(
            function () { $location.url('/Home/Index');},
            function (response) { notificationFactory.error = response.data; });
    };

    $scope.master = {};

    $scope.reset = function () {
        $scope.model = angular.copy($scope.master);
    };

    $scope.isUnchanged = function (model) {
        return angular.equals(model, $scope.master);
    };

    $scope.reset();

});

Answer 2

You are calling $resource('/api/User').Login(...), but the Login() method is not defined.
If you want your resource class to have special/custom actions (i.e. methods), you need to specify that on creation (along with the necessary properties (e.g. method, params etc)).
(More info here).

app.factory('authenticationRepository', function ($resource) {
    var User = $resource('/api/User', {
        Login: {
            method: ...,
            [headers: ...,]
            [params: ...,]
            [data: ...,]
            ...
        }
    });
    return {
        login: function (loignVM, returnUrl) {
            return User.Login(loignVM, returnUrl);
        }
    };
});