CODEWITHSUNDEEP
javascriptjavaangularjsspring
dskfdskjgds
dskfdskjgds

Reputation: 351

Spring Maven Angjular JS Trouble

I am new to Angular and I try to make a simple practice Single Page Application which I can use later to develop. I use: http://websystique.com/springmvc/spring-mvc-4-angularjs-example/ as tutorial but I have a problem when trying to use "reset" and "add" buttons. They don't do anything. They don't even give any console error.

Here is the code from the jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>



<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
  <script src="<c:url value='/static/app.js' />"></script>
  <script src="<c:url value='/static/javascript/frontend.service/employees_service.js' />"></script>
  <script src="<c:url value='/static/javascript/frontend.controller/employees_controller.js' />"></script>
<body ng-app="myApp">
<div ng-controller="EmployeesController">
    <p>Register Form</p>
    <form ng-submit="EmployeesController.submit()" name="myForm" id="myForm">
        <input type="hidden" ng-model="EmployeesController.employee.id"/>
        <br/>
        First Name: <input type="text" ng-model="EmployeesController.employee.first_name" id="first_name" placeholder="First Name"/>
        <br/>
        LAST NAME: <input type="text" ng-model="EmployeesController.employee.last_name" id="last_name" placeholder="Last Name"/>
        <br/>
        EMAIL: <input type="email" ng-model="EmployeesController.employee.email" id="email" placeholder="E-mail adress"/>
        <br/>
        DEP ID:<input type="text" ng-model="EmployeesController.employee.dep_id" id="dep_id" placeholder="Department ID"/>
        <br/>
        SALARY: <input type="text" ng-model="EmployeesController.employee.salary" id="salary" placeholder="Salary"/>
        <br/>
        <input type="submit" value="{{!EmployeesController.user.id ? 'Add' : 'Update'}}"/>
        <button type="button" ng-click="EmployeesController.reset()" ng-disabled="myForm.$pristine">Reset Form</button>

    </form>
</div>

</body>
</html>

and here is the controller:

/**
 * employees_controller   TODO
 */
App.controller('EmployeesController',
    ['$scope','EmployeesService', function($scope,EmployeesService){

this.employees = [];
this.employee={emp_id:null,first_name:'',last_name:'',email:'',dep_id:null,salary:''};

this.getAllEmployees = function(){
    EmployeesService.getAllEmployees().then(
            function(result){
                this.employees = result;
            },
            function(error){
                alert(error);
                console.log('cant get em')
            }
    );
};

this.addEmployee = function(employee){
    EmployeesService.addEmployee(employee).then(
            this.getAllEmployees,
            function(error){
                console.log('error adding employee'+employee);}
    );

};

this.editEmployee = function(employee,id){
    EmployeesService.editEmployee(employee,id).then(
            this.getAllEmployees,
            function(error){
                console.log('error editing employee with id '+id +' ' +employee);}
    );
};
this.removeEmployee = function(id){
    EmployeesService.removeEmployee(id).then(
            this.getAllEmployees,
            function(error){
                console.log('error removing employee '+id)
            }
    );
};

this.getAllEmployees();
var self = this;
self.reset = function(){
    console.log('reset form');
    this.employee={emp_id:null,first_name:'',last_name:'',email:'',dep_id:'',salary:''};    
    $scope.myForm.$setPristine();
};

this.submit = function(){
    console.log('in submit');
    if(this.employee.id === null){
        console.log('null id');
        console.log('creating employee');
        this.addEmployee(this.employee);
    }else{
        console.log('submit - nothing for now');
    }
};

this.edit = function(id){
    for(var i = 0;i<this.employees.length;i++){
        if(this.employees[i].id === id){
            this.employee = angular.copy(this.employees[i]);
            break;
        }
    }
};

this.remove = function(id){};

}]);

My problem is that the reset and the submit functions are totally ignored on button click. I can't get any message or error in browser console while following javascript console. Any help ? thank you.

Upvotes: 0

Views: 42

Answers (2)

Numyx
Numyx

Reputation: 1758

Wrong access of controller properties and methods. You can either use controllerAs syntax by ng-controller="EmployeesController as employeessController"and than ng-submit="employeessController.submit()" (same for ngModels and reset, would recommend this way) or bind the fields and methods to the scope directly.

https://docs.angularjs.org/api/ng/directive/ngController (both options are described in the example)

Upvotes: 1

Jon
Jon

Reputation: 2681

I think your problem may be in how you have structured your app. In the JavaScript file, everything that you use this for should actually be $scope. So instead of this.employees, you will do $scope.employees. In the jsp file, none of the ng-models, should have have EmployeesController in front of them.

Essentially by putting variables and functions within the $scope object, your controller exposes them to the current view of the app. From here, you can just call the function that you require without prefixing it with the EmployeesController, if that makes any sense.

Upvotes: 1

Related Questions