Angular route issue with attached controllers

Question

I am using angular route for my project. My project structure like below.

index page

<body ng-app="myApp">
  <div ng-view></div>


   <script src="resources/js/angular.js" type="text/javascript"></script>
   <script src="resources/angular/angular-route.js" type="text/javascript"></script>
   <script src="resources/js/route.js" type="text/javascript"></script>
   <script src="resources/js/quotation.js" type="text/javascript"></script>
   <script src="resources/js/container_details.js" type="text/javascript"></script> 
   <script src="resources/angular/angular-modal-service.js" type="text/javascript"></script>
   <script src="/containers/resources/js/user-registration.js" type="text/javascript"></script>
 </body>

my route.js file

var app = angular.module('myApp',['ngTable','jcs-autoValidate','ngRoute']);

    // configure our routes
    app.config(function($routeProvider,$locationProvider) {

        $routeProvider
        .when('/containers', {
            templateUrl : 'template.jsp'


        })
            .when('/container-details', {
                templateUrl : 'container-details.jsp',
                controller  : 'myCtrl'

            })
            .when('/quotation-approve', {
                templateUrl : 'quotation_approve.jsp',
                controller  : 'ourCtrl'

            })
                .when('/user-registration', {
                templateUrl : 'user-registration.jsp',
                controller  : 'userCtrl'

            })


        $locationProvider.html5Mode(true);
    });

/*  app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {  
        $locationProvider.html5Mode(true);*/

I defined all modules as below:

var app = angular.module("myApp");

when i load page error occur. error said

user registration.js

var app = angular.module("myApp");

app.run(function(defaultErrorMessageResolver, validator) {
  validator.setValidElementStyling(false);
  defaultErrorMessageResolver.getErrorMessages().then(function(errorMessages) {
    errorMessages['min-length'] = 'Username must be at least {0} letters';
    errorMessages['max-length'] = 'Username must be  {0} letters Only';
    errorMessages['pwError'] = "Password should be atleast 8 characters long and should contain one number,one character and one special character";
    errorMessages['passwordVerify'] = "password not matched";
    errorMessages['validEmail'] = "Please enter a valid email address";
  });

});


app.controller('userCtrl', function($scope, $http, NgTableParams, $timeout, $filter) {

  $scope.getAllUserDetails = function() {
    $http({
      method: "GET",
      url: "/containers/getUserRolle"
    }).then(function mySucces(response) {
      $scope.getAllRolesDetails();
      $scope.userRolless = response.data.userRolles;
      //        console.log( $scope.userRolless);
      $scope.getDatas();
    }, function myError(response) {
      $scope.userRolless = response.data.userRolles;
    });
  }


  $scope.getAllTableData = function() {
    // $scope.edituserdetails={};
    //$scope.edituserdetails.activeuser=true;
    $http({
      method: "GET",
      url: "/containers/getUserRolle"
    }).then(function mySucces(response) {
      //        $scope.getAllRolesDetails();
      $scope.userRolless = response.data.userRolles;
      //          console.log( $scope.userRolless);
      $scope.getDatas();
    }, function myError(response) {
      $scope.userRolless = response.data.userRolles;
    });
  }

  $scope.getDatas = function() {
    console.log("tesssst" + $scope.userRolless);
    //console.log("tesssst"+$scope.userRolless.object.name);
    $scope.tableParams = new NgTableParams({
      page: 1, // show first page
      count: 5,
      // count per page
      // filter: {name: '' },
      // sorting: { username: "asc" },

    }, {
      dataset: $scope.userRolless
    });

  }






  $scope.getAllRolesDetailsById = function(roleId) {

    $http({
      method: "GET",
      url: "/containers/getUserRoleById",
      params: {
        roleId: roleId
      }
    }).then(function mySucces(response) {
      console.log(response.data.userAllRollesById);
      $scope.userAllRolles = response.data.userAllRollesById;
      $scope.edituserdetails.role = $scope.userAllRolles[0];

      // console.log("user Active status"+ $scope.edituserdetails.activeuser);
    }, function myError(response) {
      console.log(response.data.userAllRolles);
      $scope.userAllRolles = response.data.userAllRollesById;
    });

  }

  $scope.editUserFunction = function(usersid) {

    $http({
      method: "GET",
      url: "/containers/getUserDetails",
      params: {
        userId: usersid
      }
    }).then(function mySucces(response) {
      $scope.edituserdetails = response.data.userDetails;
      $scope.username = response.data.userDetails.username;
      $scope.getAllRolesDetailsById($scope.edituserdetails.roleId);
      console.log(response.data.userDetails);

      console.log("user Active status" + response.data.userDetails.userstatus);
      if (response.data.userDetails.userstatus === 'Y') {
        $scope.edituserdetails.activeuser = true;
      } else {
        $scope.edituserdetails.activeuser = false;
      }
      $scope.edituserdetails.password = "";
      $scope.edituserdetails.confirmpassword = "";
    }, function myError(response) {
      $scope.edituserdetails = response.data.userRolles;
    });

    //     console.log(usersid);
  }


  $scope.getExistingUserValidateFunction = function(userName) {

    $http({
      method: "GET",
      url: "/containers/validateUser",
      params: {
        userName: userName
      }
    }).then(function mySucces(response) {
      var test = response.data.ExistingUserStatus
      console.log("ddddd" + test);
      return test;

    }, function myError(response) {
      //       return response.data.ExistingUserStatus;
    });

  }


  $scope.changePassword = function() {
    console.log("ddddd" + $scope.edituserdetails.activeuser);
    if ($scope.edituserdetails.activeuser) {
      activeuserstatus = 'Y';
    } else {
      activeuserstatus = 'N';
    }
    console.log("ccccc" + activeuserstatus);
    $http({
        method: "POST",
        url: "/containers/registrationuser",
        data: {
          "email": $scope.edituserdetails.email,
          "username": $scope.username,
          "password": $scope.edituserdetails.password,
          "id": $scope.edituserdetails.id,
          "role": $scope.edituserdetails.role,
          "userstatus": activeuserstatus


        }

      })
      .success(function(data) {
        $timeout(function() {
          $scope.msgType = false;
        }, 3000);
        $scope.theform.$setPristine();
        if (data.errorList.length > 0) {
          $scope.fieldErrorList = data.errorList;
          $scope.msgType = 'Error';
        } else {
          $scope.msgType = 'Success';
          $scope.getAllTableData();
        }

        $scope.theform.$setPristine();
        //     document.body.scrollTop = document.documentElement.scrollTop = 0;



        //                $scope.resetFunction();

      });



    // Posting data to php file
  }

  /* form.$setPristine = function() {
     $animate.setClass(element, PRISTINE_CLASS, DIRTY_CLASS + ' ' + SUBMITTED_CLASS);
     form.$dirty = false;
     form.$pristine = true;
     form.$submitted = false;
     forEach(controls, function(control) {
       control.$setPristine();
     });
   };*/

  $scope.saveUserFunction = function() {
    console.log("ddddd" + $scope.edituserdetails.activeuser);
    if ($scope.edituserdetails.activeuser) {
      activeuserstatus = 'Y';
    } else {
      activeuserstatus = 'N';
    }
    console.log("ccccc" + activeuserstatus);
    $http({
        method: "POST",
        url: "/containers/registrationuser",
        data: {
          "email": $scope.edituserdetails.email,
          "username": $scope.username,
          "password": $scope.edituserdetails.password,
          "id": $scope.edituserdetails.id,
          "role": $scope.edituserdetails.role,
          "userstatus": activeuserstatus


        }

      })
      .success(function(data) {
        console.log($scope.theform);
        if (data.errorList.length > 0) {
          $scope.fieldErrorList = data.errorList;
          $scope.msgType = 'Error';
          $scope.theform.$setPristine();
        } else {
          $scope.msgType = 'Success';
          // $scope.edituserdetails = {};
          $scope.resetFunction();
          $scope.getAllTableData();
          $timeout(function() {
            $scope.msgType = false;
          }, 3000);
          $scope.theform.$setPristine();
        }


        //     document.body.scrollTop = document.documentElement.scrollTop = 0;



        $scope.resetFunction();
        $scope.theform.$setPristine();
      });



    // Posting data to php file
  }


  $scope.resetFunction = function() {
    $scope.edituserdetails = {};
    $scope.username = '';
    $scope.edituserdetails.role = $scope.userAllRolles[0];
    $scope.theform.$setPristine();
  }

  $scope.checkPwd = function() {

    var str = document.getElementById('pw').value;
    if (str.length < 6) {
      alert("too_short");
      return ("too_short");
    } else if (str.length > 50) {
      alert("too_long");
      return ("too_long");
    } else if (str.search(/\d/) == -1) {
      alert("no_num");
      return ("no_num");
    } else if (str.search(/[a-zA-Z]/) == -1) {
      alert("no_letter");
      return ("no_letter");
    } else if (str.search(/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/) != -1) {
      alert("bad_char");
      return ("bad_char");
    }
    alert("oukey!!");
    return ("ok");
  }


  $scope.changePasswordFucntion = function(username) {
    console.log(username);

    $http({
        method: "POST",
        url: "/containers/changePassword",
        data: {
          "password": $scope.edituserdetails.password,
          "username": username,
          "curruntPassword": $scope.edituserdetails.curruntpassword,
          "passwordConfirm": $scope.edituserdetails.confirmpassword

        }

      })
      .success(function(data) {
        $timeout(function() {
          $scope.msgType = false;
        }, 3000);
        $scope.theform.$setPristine();
        if (data.errorList.length > 0) {
          $scope.fieldErrorList = data.errorList;
          $scope.msgType = 'Error';
        } else {
          $scope.msgType = 'Success';
          $scope.getAllTableData();
        }

        $scope.theform.$setPristine();


      });
  }

  $scope.getAllRolesDetails = function() {

    $http({
      method: "GET",
      url: "/containers/getUserAlRolles"
    }).then(function mySucces(response) {
      //  console.log(response.data.userAllRolles);
      $scope.userAllRolles = response.data.userAllRolles;
      $scope.edituserdetails = response.data.userAllRolles;
      $scope.edituserdetails.role = response.data.userAllRolles[0];

    }, function myError(response) {
      // console.log(response.data.userAllRolles);
      $scope.userAllRolles = response.data.userAllRolles;
    });

  }




})
app.directive("passwordVerify", function() {
  return {
    require: "ngModel",
    scope: {
      passwordVerify: '='
    },
    link: function(scope, element, attrs, myCtrl) {
      scope.$watch(function() {
        var combined;

        if (scope.passwordVerify || myCtrl.$viewValue) {
          combined = scope.passwordVerify + '_' + myCtrl.$viewValue;
        }
        return combined;
      }, function(value) {
        if (value) {
          myCtrl.$parsers.unshift(function(viewValue) {
            var origin = scope.passwordVerify;
            if (origin !== viewValue) {
              myCtrl.$setValidity("passwordVerify", false);
              return undefined;
            } else {
              myCtrl.$setValidity("passwordVerify", true);
              return viewValue;
            }
          });
        }
      });
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

can you try having different module like `var app = angular.module("userRegistration");` in user-registration.js and in route.js `var app = angular.module('myApp',['ngTable','jcs-autoValidate','ngRoute','userRegistration']);` — user1608841, Aug 03 '17 at 06:29
you already have `myApp` in route.js file so in index.html you can use `ng-app="myApp"` — user1608841, Aug 03 '17 at 06:38
Place the `angular.js` and the `angular-route` inside the `` tag? To make sure its loaded before the `HTML` is rendered? — Red, Aug 03 '17 at 06:45
@user1177842can you try `var app = angular.module("myApp",[]);` in user-registration.js ? just add empty dependency array. — user1608841, Aug 03 '17 at 06:49
Hi Rahul i added empty dependency array. Now another error comes Error - Uncaught Error: [$injector:unpr] Unknown provider: defaultErrorMessageResolverProvider <- defaultErrorMessageResolver — kumara, Aug 03 '17 at 07:03
this is all together different issue. Looks like you haven't included defaultErrorMessageResolver module — user1608841, Aug 03 '17 at 07:07
@user1177842. it may be wrong injection. You should check the providers and where it will inject.. I think `'jcs-autoValidate'` should inject in your `registration.js` instead of `route.js`. and **kindly check you have referred the script in your index page** — Ramesh Rajendran, Aug 03 '17 at 07:08

score 0 · Answer 1 · answered Aug 03 '17 at 07:02

0

var app = angular.module("myApp");

This above code does not create module called myApp it just referring an existing module. If you have not yet created the module, then the error will threw which is you have mentioned.

To create the module do this.

angular.module('myApp', []);

Please read this below discussion to more details:

Meaning of the empty array in angularJS module declaration

answered Aug 03 '17 at 07:02

Ramesh Rajendran

37,412
45
153
234

Dear Ramesh, i injected all things in route.js. other js files keep like below var app = angular.module("myApp"); – kumara Aug 03 '17 at 07:09
Ramesh, Not Rumesh :) . But did you refer the related script file in your index page? – Ramesh Rajendran Aug 03 '17 at 07:10
all js files attached in index file – kumara Aug 03 '17 at 07:11
i changed dependency injecting as below Rout .js var app = angular.module('myApp'); user-registration.js var app = angular.module("myApp",['ngTable','jcs-autoValidate','ngRoute']); now no errors. but page not loaded. – kumara Aug 03 '17 at 07:17

Angular route issue with attached controllers

1 Answers1