CODEWITHSUNDEEP
angularjsngroute
Umesh
Umesh

Reputation: 11

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

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>

Upvotes: 1

Views: 1355

Answers (1)

Shashank Vivek
Shashank Vivek

Reputation: 17494

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

Upvotes: 3

Related Questions