angularjs giving error on button click

Question

I have created a form and when i tried to click on button, it gives error as:

Error: [$injector:unpr] http://errors.angularjs.org/1.2.12/$injector/unpr?p0=%24routeParamsProvider%20%3C-%20%24routeParams
    at Error (native)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:6:450
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:32:125
    at Object.c [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:30:200)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:32:193
    at c (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:30:200)
    at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:30:417)
    at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:31:80)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:62:33
    at http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js:2797:28 <div ui-view="" class="ng-scope">
  (anonymous function)  angular.min.js:85
  (anonymous function)  angular.min.js:62
  H angular.min.js:49
  f angular.min.js:42
  (anonymous function)  angular.min.js:42
  updateView    angular-ui-router.js:2733
  (anonymous function)  angular-ui-router.js:2697
  h.$broadcast  angular.min.js:105
  $state.transition.resolved.then.$state.transition angular-ui-router.js:2114
  A angular.min.js:93
  (anonymous function)  angular.min.js:94
  h.$eval   angular.min.js:102
  h.$digest angular.min.js:100
  h.$apply  angular.min.js:103
  f angular.min.js:67
  H angular.min.js:71
  C.onreadystatechange  angular.min.js:72

I have written the code in .html file I have got register.html page as:

<form name="myForm"  ng-controller="registerNew()" novalidate>

    <p>Preferred UserName:<br>
        <input type="text" name="NewUname" ng-model="NewUname" required>
  <span style="color:red" ng-show="myForm.NewUname.$dirty && myForm.NewUname.$invalid">
  <span ng-show="myForm.NewUname.$error.required">User Name is required.</span>
  </span>
    </p>

    <p>FirstName:<br>
        <input type="text" name="fName" ng-model="fName" required>
  <span style="color:red" ng-show="myForm.fName.$dirty && myForm.fName.$invalid">
  <span ng-show="myForm.fName.$error.required">First Name is required.</span>
  </span>
    </p>

    <p>LastName:<br>
        <input type="text" name="lName" ng-model="lName" required>
  <span style="color:red" ng-show="myForm.lName.$dirty && myForm.lName.$invalid">
  <span ng-show="myForm.lName.$error.required">Last Name is required.</span>
  </span>
    </p>

    <p>Email:<br>
        <input type="email" name="mail" ng-model="mail" required>
  <span style="color:red" ng-show="myForm.mail.$dirty && myForm.mail.$invalid">
  <span ng-show="myForm.mail.$error.required">Email is required.</span>
  <span ng-show="myForm.mail.$error.email">Invalid email address.</span>
  </span>
    </p>

    <p>Password:<br>
        <input type="password" name="newpwd" ng-model="newpwd" required>
  <span style="color:red" ng-show="myForm.newpwd.$dirty && myForm.newpwd.$invalid">
  <span ng-show="myForm.newpwd.$error.required">Password is required.</span>
  </span>
    </p>

    <p>Confirm Password:<br>
        <input type="password" name="newcPWD" ng-model="newcPWD" required >
  <span style="color:red" ng-show="myForm.newcPWD.$dirty && myForm.newcPWD.$invalid">
  <span ng-show="myForm.newcPWD.$error.required">Password is required.</span>
  </span>
    </p>

    <p>
        <input type="submit" ng-click="addNew()"
               ng-disabled="myForm.lname.$dirty && myForm.lname.$invalid ||
               myForm.fname.$dirty && myForm.fname.$invalid ||
  myForm.mail.$dirty && myForm.mail.$invalid ||
  myForm.pwd.$dirty && myForm.pwd.$invalid ||
  myForm.cpwd.$dirty && myForm.cpwd.$invalid">
    </p>


</form>

and in Public/javascript/controller.js, i have got code as:

function registration($scope, $routeParams, test)
{
    console.log('inside db function');
    $scope.registerNew = function()
    {
        console.log('inside db function');
    }
}

and app.js like:

angular.module('test', [])
        .config(function($routeProvider) {

            $routeProvider
                .when('register', {
                    url: '/register',
                    templateUrl: '../partials/register.html',
                    controller: 'registration'
                });
            $routeProvider.when('login', {
                url: '/login',
                templateUrl: '../partials/login.html',
                controller: 'login'
            });


        });

I have defined ng-app in the main html file onto the main div as :

Answer 1

<form name="myForm"  ng-controller="registerNew()" novalidate>

should be

<form name="myForm"  ng-controller="registration" novalidate>

And

function registration($scope) {..

Answer 2

Ensure that you have all the dependency injected to controller are correct and are not misspelled or undefined.

click here to get error description from AngularJS Docs

Answer 3

At app.js, try changing this

angular.module('test', [])

to this

angular.module('test', ['ngRoute'])

you need to inject ngRoute service in order to use $routeProvider.

See this for more info: AngularJs Docs

I hope this helps.

Answer 4

Your Code is not clear but you should try this, you can use hash symbol while redirecting to a URL like

 href='#/login '   

Hope this helps.