Question

这里我有3页 index.html的，为Login.aspx，MainPage.html 当我运行应用程序时，它显示Login.aspx，当我输入凭据时，它呈现给MainPage.Here是我的代码片段

的index.html

<!DOCTYPE html>
<html data-ng-app="myApp">
<head >
        <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
        <script src="BaseController.js"></script>
    <title></title>
</head>
<body>
     <div data-ng-view="">   </div>

</body>
</html>

和我的Login.aspx

<!DOCTYPE html data-ng-app="myApp">
<html >
<head>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
        <script src="BaseController.js"></script>
    <title></title>
</head>
<body  >

    <div data-ng-controller="loginController">

    <h3>LOGIN</h3>
    UserName:<input type="text" data-ng-model="userName" /> <br />
    Password:<input type="password" data-ng-model="password" /><br />
    <button type="button" data-ng-click="login()">Submit</button>
        </div>

</body> 
</html>

和BaseController.js是

var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider',
function ($routeProvider,locationProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'Login.aspx',
            controller: 'loginController'
        })
    .when('/MainPage', {
        templateUrl: 'MainPage.html'
        })
    .otherwise({ redirectTo: '/' });
    $locationProvider.html5mode(true);
}]);
app.controller('loginController', function ($scope,$location) {
    $scope.login = function () {
        var uname = $scope.userName;
        var pwd = $scope.password;
        if ($scope.uname == 'admin' && $scope.pwd == 'admin') {
            $location.path("/MainPage");
        }
    };
});

当我运行App我只获得索引页面时......是否有任何错误..

Answer 1

在

的地方试试

$location.path("/MainPage");

替换为

window.location = "#/MainPage.html";

Answer 2

你控制器第3行的“$ locationProvider”不是“locationProvider”

更改此

 $locationProvider.html5mode(true);

到此

$locationProvider.html5Mode({
          enabled: true,
          requireBase: false
    });

方法名称是html5Mode，即大写“M”

单页登录应用

<强>的index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> -->
<script src="//code.angularjs.org/1.4.8/angular.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script> -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script scr="basecontroller.js"></script>
</head>
<body>
 <div data-ng-view="">   </div>  

</body>
</html>

<强>的Login.aspx

  <div>

    <h3>LOGIN</h3>
    UserName:<input type="text" data-ng-model="userName" /> <br />
    Password:<input type="password" data-ng-model="password" /><br />
    <button type="button" data-ng-click="login()">Submit</button>
     </div>

<强> basecontroller.js

var app = angular.module('myApp', ['ngRoute']);
app.config(['$locationProvider','$routeProvider', 
function ($locationProvider, $routeProvider) {
    $locationProvider.html5Mode({
          enabled: true,
          requireBase: false
        }); 
    $routeProvider
        .when('/', {
            templateUrl: 'Login.aspx',
            controller: 'loginController'
        })
    .when('/MainPage', {
        templateUrl: 'MainPage.html'
        })
    .otherwise({ redirectTo: '/' });
    /* $locationProvider.html5mode(true); */

}]);
app.controller('loginController', function ($scope,$location, $window) {

    $scope.login = function () {

        var uname = $scope.userName;
        var pwd = $scope.password;
        if (uname == 'admin' && pwd == 'admin') {

            $location.path('/MainPage'); 
        }
    };
});

<强> MainPage.html

<div>Main Page</div>

因此，当您启动应用程序时，登录模板将被加载到index.html，然后输入“admin”作为用户名和密码，它将导航到MainPage.html

AngularJS单页面应用程序 - 加载默认模板并在登录成功时导航到另一个页面

2 个答案: