AngularJS用戶界面回來空白

我想設置一個簡單的登錄屏幕。爲什麼這會回到空白？AngularJS用戶界面回來空白

的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); 
     }); 
    } 
}])

它顯示出來不到一個小時前，我想補充一點，但當我刪除它因爲它破壞了現在什麼都不會顯示。

來源

2016-03-02 user2217874

控制檯中的錯誤是什麼？ –

控制檯中沒有任何錯誤 – user2217874

文件結構是否正確？視圖已到位並且控制器命名正確？ –

你index.html文件已在應用程序目錄中。沒有用，因爲它不加載角或任何指定的文件。

從您的所有腳本源中刪除./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文件。

來源

2016-03-03 00:07:14

什麼是設置控制器的正確方法？我需要首先發生kleckDev.js，因爲控制器使用kleckDev中的模塊 – user2217874

我也將loginController.js添加到了帖子中。 – user2217874

一切看起來不錯。您是否嘗試對index.html中的腳本進行重新排序？ –

AngularJS用戶界面回來空白

回答

相關問題