AngularJs + php身份验证

Question

嗨，我开始学习AngularJs，现在我试图做我的登录模块使用角度和PHP，但我有一些问题。我看过很多教程，但他们都不是我的情况有帮助的，所以这里就是我：controllers.js：

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

controllers.controller('loginController', ['$scope', '$http', 'UserService', function(scope, $http, User) { 
scope.main = [ 
    {username: '', password: ''} 
] 

scope.login = function(){ 
    var config = { 
     url: '../auth/login.php', 
     method: 'POST', 
     data: { 
      username: scope.main.username, 
      password: scope.main.password 
     }, 
     headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
    } 

    $http(config) 
    .success(function(data,status,headers,config){ 
     if(data.status){ 
      //succefull login 
      User.isLogged = true; 
      User.username = data.username; 
     } 
     else{ 
      User.isLogged = false; 
      User.username = ''; 
     } 
    }) 
    .error(function(data,status,headers,config){ 
     User.isLogged = false; 
     User.username = ''; 
    }); 
} 
}]) 

auth.js：

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

services.factory('UserService', [function(){ 
    var sdo = { 
     isLogged: false, 
     username: '' 
    }; 
    return sdo; 
}]); 

的login.php：

$username = $_POST['username']; 
if($username){ 
    return "Logged"; 
}else{ 
    return false; 
} 

和HTML：

<div class="col-xs-12" id="loginCol" ng-controller="loginController"> 
    <form ng-submit='login()' name="form" novalidate> 
     <div class="form-group"> 
     <label for="username" class="sr-only">Username</label> 
     <input type="text" ng-model="scope.main.username" class="form-control" id="username" placeholder="Име..." /> 
     <label for="password" class="sr-only">Password</label> 
     <input type="password" ng-model="scope.main.password" class="form-control" id="password" placeholder="Парола..." /> 
     </div> 

     <div class="form-group pull-right"> 
     <button type="button" class="btn btn-primary">Login</button> 
     <button type="button" class="btn btn-default">Register</button> 
     </div> 
    </form> 
</div> 

在这种情况下，我想只是如果用户输入用户名输入的东西，并点击登录按钮，并成功调用login.php返回一些消息。问题是，像这样写的代码出现错误“'loginController'不是一个函数，没有定义”如何解决它？

Answer 1

（披露：我的UserApp的开发者之一）

你可以尝试第三方服务UserApp，连同AngularJS module。

检查出getting started guide，或采取course on Codecademy。下面是它如何工作的一些例子：

• 登录形式的错误处理：

  <form ua-login ua-error="error-msg"> 
      <input name="login" placeholder="Username"><br> 
      <input name="password" placeholder="Password" type="password"><br> 
      <button type="submit">Log in</button> 
      <p id="error-msg"></p> 
  </form> 
  

• 注册表格错误处理：

  <form ua-signup ua-error="error-msg"> 
      <input name="first_name" placeholder="Your name"><br> 
      <input name="login" ua-is-email placeholder="Email"><br> 
      <input name="password" placeholder="Password" type="password"><br> 
      <button type="submit">Create account</button> 
      <p id="error-msg"></p> 
  </form> 
  

  ua-is-email指用户名与电子邮件相同。

• 如何指定应该是公开的哪条路线，其路线，那就是登录表单：

  $routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true}); 
  $routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true}); 
  

  的.otherwise()路径应设置为您希望您的用户登录后重定向。例如：

  $routeProvider.otherwise({redirectTo: '/home'});

• 注销链接：

  <a href="#" ua-logout>Log Out</a>

• Access用户属性：

  用户信息是使用user服务，例如访问：user.current.email

  或者模板：<span>{{ user.email }}</span>

• 隐藏元素应该只看到当登录：

  <div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>

• 显示基于权限的元素：

  <div ua-has-permission="admin">You are an admin</div>

为了验证您的后端服务，只需使用user.token()获取会话令牌并通过AJAX请求发送它。在后端，使用UserApp API和PHP library来检查令牌是否有效。

如果您需要任何帮助，只是让我知道:)

Answer 2

您已经创建了应用

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

，但在HTML代码中没有使用它，加上NG-应用属性包装DIV

<div class="col-xs-12" ng-app="controllers" id="loginCol" ng-controller="loginController"> 

第二个问题，你试试赶上提交事件，但不提交表单，使用submit类型，而不是button

<button type="submit" class="btn btn-primary">Login</button> 

或添加ng-click="login()"属性按钮，从表单中移除ng-submit='login()'