main.html中：

Question

我是AngularJs的新手并尝试我的第一个项目。使用Angular.min.js和angular-route.js 1.6.9版本。在浏览器中点击http://localhost/myAngular/login/main.html获取未捕获错误：

[$ 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>

Answer 1

尝试：

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

另外，尝试使用＆＃34; angular.js＆＃34;而不是angular.min.js，您将获得可读且易于理解的错误消息

_{旁注：尝试在controller中使用$routeProvider，而不是按照login.html中的方式编写。请参阅我的plunkr的config}

Here is the working code

更新

根据您的新代码，您需要执行以下操作

    $location.path('/dashboard');

参考plunkr。我也做了各自的改变

未捕获错误：[$ injector：modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr

main.html中：

1 个答案:

更新