Question

我正在尝试设置一个简单的登录屏幕。为什么这会变回空白？

的index.html

<!DOCTYPE html>
<html >
    <head>
        <title>Joe Kleckler</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="./css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body ng-app="kleckDev">
        <div ui-view></div> 
    </body>
    <script src="./app/angular.min.js"></script>
    <script src="./app/ui.router.js"></script>
    <script src="./app/kleckDev.js"></script>

    <script src="./app/controllers/loginController.js"></script>
    <script src="./app/controllers/realmController.js"></script>
    <!--<script src="./app/bootstrap.min.js"></script>-->
    <script type="text/javascript">
        console.log("angular object", angular);
    </script>
</html>

kleckDev.js

var app = angular.module('kleckDev', ["ui.router"]);

app.config(function($stateProvider) {   
    $stateProvider
        .state("login", {
            url: "/",
            controller: "LoginController",
            templateUrl: "views/login.html"
        })
        .state("realm", {
            url:"/realm",
            controller: "RealmController",
            templateUrl: "views/realm.html"
        })
});

loginController.js

app.controller("LoginController", ['$scope', '$http', '$state', function($scope, $http, $state) {

    $scope.registration = {
        firstName: undefined,
        lastName: undefined,
        email: undefined,
        username: undefined,
        password: undefined,
        checkPass: undefined
    }

    $scope.login = {
        username: undefined,
        password: undefined
    }

    $scope.registerUser = function() {
        var data = {
            firstName: $scope.registration.firstName,
            lastName: $scope.registration.lastName,
            email: $scope.registration.email,
            username : $scope.registration.username,
            password : $scope.registration.password,
            checkPass : $scope.registration.checkPass,
            access: 0

        }

        $http.post("php/register.php", data).success(function(response) {
            console.log(response);
            localStorage.setItem("user", JSON.stringify({user: response}));
            $state.go("realm");
        }).error(function(error) {
            console.log(error);
        });
    };

    $scope.loginUser = function() {
        var data = {
            username: $scope.login.username,
            password: $scope.login.password
        }

        $http.post("php/login.php", data).success(function(response) {
            console.log(response);
            localStorage.setItem("user", JSON.stringify({user: response[0].username}));
            $state.go("realm");
        }).error(function(error) {
            console.log(error);
        });
    }
}])

它出现在不到一个小时前，我试图添加一些东西，但当我删除它因为它打破了现在没有任何东西显示。

Answer 1

您的index.html文件已在app目录中。没有任何作用，因为它不会加载角度或任何指定的文件。

从所有脚本源中删除./app目录。

<script src="angular.min.js"></script>
<script src=".ui.router.js"></script>
<script src="controllers/loginController.js"></script>
<script src="controllers/realmController.js"></script>
<script src="kleckDev.js"></script>

最后加载kleckDev.js文件。

AngularJS ui-view回归空白

1 个答案: