cssangularjscontrollerng-submit

Unable to invoke controller constructor and submit function

I have the following code and I an unable to find out why my controller is not getting called? - 

index.html -
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1"
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body ng-app="myApp">
    

    <div class="container">
  <div class="row">  
 
      <div class="col-xs-12">
          <!-- FORM ============ -->
        
          <form name="userForm" ng-submit="main.submitForm()" novalidate>

              <!-- USERNAME -->
              <div class="form-group" ng-class="{'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
                  <label>Username</label>
                  <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
                  <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
                  <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
              </div>
              
              <!-- Password -->
              <div class="form-group" ng-class="{ 'has-error' : userForm.pwd.$invalid && !userForm.pwd.$pristine }">
                  <label>Password</label>
                  <input type="password" name="password" class="form-control" ng-model="user.pwd">
                  <p ng-show="userForm.pwd.$invalid && !userForm.pwd.$pristine" class="help-block">Enter a valid Password.</p>
              </div>
              
              <button type="submit" class="btn btn-primary col-xs-12" ng-disabled="userForm.$invalid">Submit</button>
              
          </form>

      </div>

  </div>
</div>

    <div class="footer footertxt">
      <div class="container">
        <p>@Copyright xyz</p>
      </div>        </div>


    
    <script type="text/javascript" src="cordova.js"></script>

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/about.js"></script>
        <script src="scripts/services/cordova.js"></script>
        <!-- endbuild -->
</body>
</html>

main.js:

'use strict';


angular.module('myApp')
  .controller('MainCtrl', function ($scope, cordova) {
    console.log("Hello...")
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    cordova.ready.then(function () {
        alert('Cordova is ready');
    });

    // function to submit the form after all validation has occurred            
    $scope.submitForm = function() {

        // check to make sure the form is completely valid
        if ($scope.userForm.$valid) {
            alert('our form is amazing');
            console.log("For submitted..")
        }

    };
});

app.js:

/**
 * @ngdoc overview
 * @name angularCordovaTickrv01App
 * @description
 * # myApp
 *
 * Main module of the application.
 */
angular
  .module('myApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Solution

  • Modify your ng-submit, you don't have to put main.submitForm()

    <form name="userForm" ng-submit="submitForm()" novalidate>

    Also, you have an error in your controller with your cordova injection.

    Have a look at this Plunker