Angularjs ngRoute 不起作用答案

【问题标题】：Angularjs ngRoute is not workingAngularjs ngRoute 不起作用
【发布时间】：2016-05-11 20:00:25
【问题描述】：

我有一个索引页面（登录），其中存在注册链接，所以在重定向时我试图加载控制器，但它没有加载，控制台也没有错误。

我的主页正在加载 URL：http://localhost:8081/WebServices/ 单击 resgiter 后，我试图将其重定向到：http://localhost:8081/WebServices/#/regsiter

我们将不胜感激。

我的 index.html 页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Login Page</title>

<script type="text/javascript" src= "/WebServices/js/angular.min.js"></script>
<script type="text/javascript" src= "/WebServices/js/angular-resource.min.js"></script>
<script type="text/javascript" src= "/WebServices/js/angular-route.min.js"></script>
<script type="text/javascript" src= "/WebServices/js/friendsCtrl.js"></script>
<script type="text/javascript" src= "/WebServices/js/friendsService.js"></script>
<script type="text/javascript" src= "/WebServices/js/loginCtrl.js"></script>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> 
</head>

<body>
   <div ng-app="loginApp">

      <div class="col-md-3">

    <h2>Login</h2>
    <form name="loginform" role="loginform" ng-submit="login()">

        <div class="form-group" ng-class="{ 'has-error':loginform.username.$dirty && loginform.username.$error.required }" >
            <label for="username">Username</label>
            <input type="text" name="username" class="form-control" ng-model="user.username" required />
            <span ng-show="loginform.username.$dirty && loginform.username.$error.required " class="help-block">Username is required</span> 
        </div>

        <div class="form-group" ng-class="{ 'has-error':loginform.username.$dirty && loginform.username.$error.required }">
            <label for="Password">Password</label>
            <input type="password" name="password" class="form-control" ng-model="user.password" required />
            <span ng-show="loginform.password.$dirty && loginform.password.$error.required " class="help-block">Password is required</span>
        </div>

        <div class="form-actions">
            <button type ="submit" class="btn btn-primary" ng-disabled="loginform.$invalid">Login</button>
            <a href="#/regsiter" class="btn btn-link">Resgiter</a>
        </div>


    </form>
</div>

</div> 
</body>
</html>

loginCtrl.js 文件

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

loginApp.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/' , { 
            templateUrl:'index.html',
            controller: 'loginCtrl'
        })
        .when('/regsiter' , { 
            templateUrl:'registration_ang.html',
            controller: 'loginCtrl'
        })
        .otherwise({
            redirectTo:'/'
        });

}]);


loginApp.controller('loginCtrl',['$scope',function($scope){
    console.log("controller loaded");
    alert("controller loaded");
    $scope.login=function(){
        console.log("inside loginCtrl : login function");
        alert("checking login.");
    };
}

]
);

【问题讨论】：

标签： javascript angularjs routing angular-routing ngroute

【解决方案1】：

您错过了在您的页面上添加ng-view 指令，以便加载在$routeProvider 内ng-view 指令元素中配置的模板和控制器。

<div ng-view></div>

【讨论】：

是否应该在每一页都添加这个？
@user3718420 它应该只在你的index.html 页面上添加一次......这样就会根据路由定义放置内部内容
@user3718420 很高兴为您提供帮助..谢谢:)
但是如果我们在 index.html 中添加
标记（在我的例子中是带有注册链接的登录页面），它将在 index.html 中加载注册页面内容但它不会重定向到注册页面。请建议我如何实现重定向。
控制台没有错误。但我的注册页面正在登录页面本身加载。