Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr

1
votes

I am new to AngularJs and try my first project into it. Using Angular.min.js and angular-route.js 1.6.9 version. While hitting the http://localhost/myAngular/login/main.html in browser getting Uncaught Error:

[$injector:modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=myApp&p1=ReferenceError%3A%20otherwise%20is%20not%20defined%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%2FmyAngular%2Flogin%2Fmain.html%3A32%3A2%0A%20%20%20%20at%20Object.invoke%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A44%3A390)%0A%20%20%20%20at%20d%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A279)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A418%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A180)%0A%20%20%20%20at%20gb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A46%3A250)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A332)%0A%20%20%20%20at%20we%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A21%3A1)

main.html:

    <!DOCTYPE html>
    <html lang="Eng">
    <head>
    <title>Login Demo</title>
    <script src="angular.min.js"> </script>    
    <script src="angular-route.js"></script>  
    <script src="controller.js"></script>
   </head>
   <body ng-app="mainApp">
    <div ng-view>
    </div>
   </body>

controller.js

  var app  = angular.module( 'mainApp', ['ngRoute'] );

  app.config( function( $routeProvider ) {

 $routeProvider
 .when( '/main', {
    template: 'Welcome User!'
    //templateUrl: 'login.html'
  })
  .when('/anotherPage', {
    template: 'Welcome User, again!'
    //templateUrl: 'dashboard.html'
  })
  otherwise({

    redirectTo: '/'
  });
});

app.controller( 'loginCtrl', function( $scope, $location) {
$scope.submit = function(){
    var userName = $scope.userName;
    var password = $scope.password;

    if(userName == "admin" && password == "admin"){
        $location.path = '/dashboard';

    }
    console.log( userName +"  "+ password);
   };

    });

===========================================================

login.html

    <div ng-controller="loginCtrl">
    <div>
    <form action="/" id="myLogin">
    User Name: <input type="text" name="userName" ng-model="userName"/> 
    <br>br>
    Password: <input type="password" name="password" ng-model="password"/> 
    <br><br>
    <button type="button" ng-click="submit()">Submit</button>
    </form>
    </div>
    </div>
1
angularjsngroute
In controller.js, you're missing a period before otherwise. - JoshG
Click on the link in the error message. It clearly states: ReferenceError: otherwise is not defined. - georgeawg

1 Answers

3
votes

Try:

 $routeProvider
 .when( '/main', {
    template: 'Welcome User!'
    //templateUrl: 'login.html'
  })
  .when('/anotherPage', {
    template: 'Welcome User, again!'
    //templateUrl: 'dashboard.html'
  })
  .otherwise({ // <-- you were missing "." here.
    redirectTo: '/'
  });
});

Also, try to use "angular.js" rather than angular.min.js , you'll get readable and easily understandable error messages

Side Note: Try to use controller in $routeProvider itself rather than writing it the way you have written in login.html. Refer the config of my plunkr

Here is the working code

Update

As per your new code, you need to do as below

    $location.path('/dashboard');

Refer the plunkr. I have made the respective changes in it too