angularJS with MVC call - how to do something other than CRUD?

Question

I've been following web tutorials to try to learn angularJS on a .NET MVC Application. All the tutorials seem to cover getting a list, getting an individual item etc.

What I want to do is allow the user to fill in an email address, I want to verify that email address against the database and return true or false if it existed. I'm then trying to put that value in the scope so I can do something in response to whether its true or false.

I'm using a single page app so this is the login html.

<form name="form" class="form-horizontal">
    <div class="control-group" ng-class="{error: form.ValidEmailAddress.$invalid}">
        <label class="control-label" for="ValidEmailAddress">Valid Email Address</label>
        <div class="controls">
            <input type="email" ng-model="item.ValidEmailAddress" id="ValidEmailAddress">
        </div>
    </div>
    <div class="form-actions">
        <button ng-click="login()" class="btn btn-primary">
            Go!
        </button>
        <label ng-if="user.isAuthorised">Authorised</label>
        <label ng-if="!user.isAuthorised">NotAuthorised</label>
    </div>
</form>

In my app.js file I declare a loginCtrl controller when the url was /login so that's all fine. The logic that I'm calling on my button click is this:

var LoginCtrl = function ($scope, $location, $http, AuthorisedUser) {

    $scope.login = function() {
           var isValidUser =  $http.get("/AuthorisedUser/IsValidUser/" + $scope.item.ValidEmailAddress);
           $scope.user.isAuthorised = isValidUser;
    } };

Which is then calling an MVC AuthorisedUserController class method:

public bool IsValidUser(string id)
{
    var list = ((IObjectContextAdapter)db).ObjectContext.CreateObjectSet<ApprovedUser>();
    var anyItems = list.Any(u => u.ValidEmailAddress == id);
    return anyItems;
}

So it vaguely seemed to be working when I put in a value like "aaa" into the textbox. But as soon I try putting in an email address the value is undefined. Maybe I'm supposed to be doing a post but the only thing I can successfully hit my .NET controller with is by using get.

I'm sure I'm missing fundamental knowledge and potentially tackling this in the wrong way.

In case it helps I've created a module and defined factories like this:

var EventsCalendarApp = angular.module("EventsCalendarApp", ["ngRoute", "ngResource"]).
    config(function ($routeProvider) {
        $routeProvider.
            when('/login', { controller: LoginCtrl, templateUrl: 'login.html', login: true }).
            otherwise({ redirectTo: '/' });
    });


EventsCalendarApp.factory('AuthorisedUser', function ($resource) {
    return $resource('/api/AuthorisedUser/:id', { id: '@id' }, { isValidUser: { method: 'GET' }  });
});

One of my questions is - should I be accessing the controller method using the $http object, or is there a way of using my factory declaration so that I can go something like:

AuthorisedUser.IsValidUser($scope.item.validEmailAddress)

I know in the tutorial I was following I could do stuff like:

 CalendarEvent.save()

to be able to call a CalendarEventController post method.

Answer 1

What i think is, your get() function will return a promise. and you can't assign promise like this. so better try this approch once. I hope, it'd work. if not please let me know...

here I assume your first,second and third snippet of code works fine...

$http.get("/AuthorisedUser/IsValidUser/" + $scope.item.ValidEmailAddress).success(function (result, status) {

        var isValidUser=result;
        $scope.user.isAuthorised = isValidUser;
        $scope.$apply();
    }).error(function (result, status) {
        //put some error msg
    });