CODEWITHSUNDEEP
javascriptangularjsrest
Natu Myers
Natu Myers

Reputation: 496

Angular Not Posting to URI

My angular code is not posting to the api when I enter data in a form even though my api has been proven to work and takes curl CRUD requests. The register function is called from my partial, then Register controller uses the user service and register function to post form the model to the api

user service

(function () {
    'use strict';

    angular
        .module('app')
        .factory('UserService', UserService);

    UserService.$inject = ['$http'];
    function UserService($http) {
        var service = {};

        service.GetAll = GetAll;
        service.GetById = GetById;
        service.GetByUsername = GetByUsername;
        service.Create = Create;
        service.Update = Update;
        service.Delete = Delete;

        return service;

        function GetAll() {
            return $http.get('https://me.com/api/users/').then(handleSuccess, handleError('Error getting all users'));
        }

        function GetById(id) {
            return $http.get('https://me.com/api/users/' + id).then(handleSuccess, handleError('Error getting user by id'));
        }
...

    function Create(user) {
        return $http.post('https://me.com/api/users', user).then(handleSuccess, handleError('Error creating user'));
    }

.....

Register Partial

<div ng-controller="RegisterController as vm">
<div class="col-md-6 col-md-offset-3">
    <h2>Register</h2>
    <form name="form" ng-submit="vm.register()" role="form">
        <div class="form-group" ng-class="{ 'has-error': form.fname.$dirty && form.fname.$error.required }">
            <label for="username">First name</label>
            <input type="text" name="fname" id="fname" class="form-control" ng-model="vm.user.fname" required />
            <span ng-show="form.fname.$dirty && form.fname.$error.required" class="help-block">First name is required</span>
        </div>
        <div class="form-group" ng-class="{ 'has-error': form.lname.$dirty && form.lname.$error.required }">
            <label for="username">Last name</label>
            <input type="text" name="lname" id="Text1" class="form-control" ng-model="vm.user.lname" required />
            <span ng-show="form.lname.$dirty && form.lname.$error.required" class="help-block">Last name is required</span>
        </div>
        <div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
            <label for="username">Username</label>
            <input type="text" name="username" id="username" class="form-control" ng-model="vm.user.username" required />
            <span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
        </div>
        <div class="form-group" ng-class="{ 'has-error': form.hashword.$dirty && form.hashword.$error.required }">
            <label for="hashword">Password</label>
            <input type="hashword" name="hashword" id="hashword" class="form-control" ng-model="vm.user.hashword" required />
            <span ng-show="form.hashword.$dirty && form.hashword.$error.required" class="help-block">Password is required</span>
        </div>
        <div class="form-actions">
            <button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Register</button>
            <img ng-if="vm.dataLoading" src="data:image/gif;base64,..." />
            <a href="#/login" class="btn btn-link">Cancel</a>
        </div>
    </form>
</div>

</div>

Register controller/function

(function () {
    'use strict';

    angular
        .module('app')
        .controller('RegisterController', RegisterController);

    RegisterController.$inject = ['UserService', '$location', '$rootScope', 'FlashService'];
    function RegisterController(UserService, $location, $rootScope, FlashService) {
        var vm = this;

        vm.register = register;

        function register() {
            vm.dataLoading = true;
            UserService.Create(vm.user)
                .then(function (response) {
                    if (response.success) {
                        FlashService.Success('Registration successful', true);
                        $location.path('/login');
                    } else {
                        FlashService.Error(response.message);
                        vm.dataLoading = false;
                    }
                });
        return false;
        }
    }

})();

Upvotes: 0

Views: 98

Answers (1)

sz tech
sz tech

Reputation: 349

How did you assign your controller to the view? Did you use the controller as syntax? For example: <div ng-controller="RegisterController as vm">your view here </div> You are assigning the register function to vm but the vm is just a local variable in the controller function so angular is not able to use its functions in view. Assigning this to local vm variable is a good practice, better than using $scope everywhere, but it's still just a local variable inside the controller function's scope. If you assign your controller to view and rename your controller (<div ng-controller="RegisterController as vm">), then it will work.

Upvotes: 1

Related Questions