AngularJS中ng-view无内容显示：登录路由跳转异常求助

我帮你梳理下代码里的几个关键问题，这些就是导致你跳转后ng-view没内容、控制台还没报错的原因：

• 路由配置的otherwise写法错误
  AngularJS 1.x中$routeProvider.otherwise()的正确语法是接收一个配置对象，你现在的写法不符合规范，会导致路由规则解析异常，影响后续跳转的渲染逻辑。
  错误写法：

  .otherwise('/', {
    templateUrl: '/'
  })
  

  修正为：

  .otherwise({
    redirectTo: '/'
  })
  

• 控制器中submit函数的参数冗余且错误
  你在submit函数里声明了$scope参数，这会覆盖控制器注入的全局$scope，导致函数里访问的$scope.username实际是undefined（点击事件不会传递$scope参数）。直接去掉这个参数即可：
  错误写法：

  $scope.submit = function($scope) { ... }
  

  修正为：

  $scope.submit = function() { ... }
  

• login.html中的控制器名称拼写错误+冗余的ng-controller
  你的login.html里写了ng-controller="maincontrol"，但实际控制器名称是maincontroller（少了后缀"ler"）。更重要的是，你已经在路由配置里给/路径绑定了该控制器，没必要在模板里重复添加ng-controller——这会创建新的作用域，导致表单数据和登录函数不在同一个作用域下，甚至可能触发不了正确的提交逻辑。

• 拼写错误：windows.alert应为window.alert
  这个不是路由渲染的直接原因，但登录失败时会报错，建议一并修正。

修正后的完整代码示例 #

controller代码 #

var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'login.html',
      controller: 'maincontroller'
    })
    .when('/dashboard', {
      templateUrl: 'dashboard.html'
    })
    .otherwise({
      redirectTo: '/'
    });
});
app.controller('maincontroller', function($scope, $location) {
  $scope.submit = function() {
    var username = $scope.username;
    var password = $scope.password;
    if (username == 'ashok' && password == 'ashok') {
      $location.path('/dashboard');
    } else {
      window.alert('wrong stuff');
    }
  };
});

login.html代码 #

<form name="formgroup">
  <label>Username:<input type="text" id="username" ng-model="username"/></label><br>
  <label>Password:<input type="password" id="password" ng-model="password"/></label><br>
  <button type="button" ng-click="submit()">Login</button>
</form>

另外还要确认dashboard.html文件存在且路径正确，如果文件路径错误，跳转后ng-view也会是空的哦。

内容的提问来源于stack exchange，提问作者Ashok