Javascript 使用AngularJS的用户身份验证_Javascript_Php_Html_Mysql_Angularjs

Javascript 使用AngularJS的用户身份验证

javascript php html mysql angularjs

Javascript 使用AngularJS的用户身份验证,javascript,php,html,mysql,angularjs,Javascript,Php,Html,Mysql,Angularjs,我从angularcode找到了这篇文章这很有帮助。但是我的网页结构有一些问题，它不希望使用div标记来包含data ng view属性。如何获取数据，但没有此div标记以下是教程中的一些代码： var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']); app.config(['$routeProvider', function ($routeProvider) { $routePr

我从angularcode找到了这篇文章这很有帮助。但是我的网页结构有一些问题，它不希望使用

div

标记来包含

data ng view

属性。如何获取数据，但没有此

div

标记

以下是教程中的一些代码：

var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);

app.config(['$routeProvider',
  function ($routeProvider) {
        $routeProvider.
        when('/login', {
            title: 'Login',
            templateUrl: '/login.php',
            controller: 'authCtrl'
        })
            .when('/logout', {
                title: 'Logout',
                templateUrl: '/login.php',
                controller: 'logoutCtrl'
            })
            .when('/signup', {
                title: 'Signup',
                templateUrl: 'partials/signup.html',
                controller: 'authCtrl'
            })
            .when('/dashboard', {
                title: 'Dashboard',
                templateUrl: '/dashboard.php',
                controller: 'authCtrl'
            })
            .when('/', {
                title: 'Login',
                templateUrl: '/login.php',
                controller: 'authCtrl',
                role: '0'
            })
            .otherwise({
                redirectTo: '/login'
            });
  }])
    .run(function ($rootScope, $location, Data) {
        $rootScope.$on("$routeChangeStart", function (event, next, current) {
            $rootScope.authenticated = false;
            Data.get('session').then(function (results) {
                if (results.uid) {
                    $rootScope.authenticated = true;
                    $rootScope.uid = results.uid;
                    $rootScope.name = results.name;
                    $rootScope.email = results.email;
                } else {
                    var nextUrl = next.$$route.originalPath;
                    if (nextUrl == '/signup' || nextUrl == '/login') {

                    } else {
                        $location.path("/login");
                    }
                }
            });
        });
    });

我想把每一页的结构分开。有什么方法可以链接到其他页面，而不是在

data ng view

上显示

templateURL

，但用户身份验证会话的功能仍然有效

更新

这是我的项目代码请注意，我尝试了

templateURL

。html和.php都是相同的结果

index.php

<div ng-app="myApp" data-ng-view="" id="ng-view"></div>

<toaster-container toaster-options="{'time-out': 3000}"></toaster-container>

<!-- authentification script -->
<script src="/pooh/dist/js/angular.min.js"></script>
<script src="/pooh/dist/js/angular-route.min.js"></script>
<script src="/pooh/dist/js/angular-animate.min.js"></script>
<script src="/pooh/dist/js/toaster.js"></script>
<script src="/pooh/app/app.js"></script>
<script src="/pooh/app/data.js"></script>
<script src="/pooh/app/directives.js"></script>
<script src="/pooh/app/authCtrl.js"></script>

<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/head.php');?>
<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo">
    <a href="/pooh/index.php"><b>Pooh</b>Furniture</a>
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
    <p class="login-box-msg">Sign in to start your session</p>

    <form method="post">
      <div class="form-group has-feedback">
        <input ng-model="login.email" class="form-control" placeholder="Email">
        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input ng-model="login.password" type="password" class="form-control" placeholder="Password">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="row">
        <div class="col-xs-8">
          <div class="checkbox icheck">
            <label>
              <input type="checkbox"> Remember Me
            </label>
          </div>
        </div>
        <!-- /.col -->
        <div class="col-xs-4">
          <button ng-click="doLogin(login)" data-ng-disabled="loginForm.$invalid" type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
        </div>
        <!-- /.col -->
      </div>
    </form>

    <a class="hidden" href="#">I forgot my password</a><br>

  </div>
  <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- jQuery 2.1.4 -->
<script src="/pooh/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="/pooh/bootstrap/js/bootstrap.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="/pooh/plugins/iCheck/icheck.min.js"></script>
<script>
  $(function () {
    $('input').iCheck({
      checkboxClass: 'icheckbox_square-blue',
      radioClass: 'iradio_square-blue',
      increaseArea: '20%' // optional
    });
  });
</script>
</body>
</html>

<?php 
//check if already logged in move to home page
//if logged in redirect to members page
//if( $user->is_logged_in() ){ header('Location: login.php'); } 
?>
<?php $page = 'summary'; ?>
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/header.php');?>
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/sidebar.php');?>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Dashboard
                <small>Overall information</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">

      <!-- Your Page Content Here -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/footer.php');?>

login.php

<div ng-app="myApp" data-ng-view="" id="ng-view"></div>

<toaster-container toaster-options="{'time-out': 3000}"></toaster-container>

<!-- authentification script -->
<script src="/pooh/dist/js/angular.min.js"></script>
<script src="/pooh/dist/js/angular-route.min.js"></script>
<script src="/pooh/dist/js/angular-animate.min.js"></script>
<script src="/pooh/dist/js/toaster.js"></script>
<script src="/pooh/app/app.js"></script>
<script src="/pooh/app/data.js"></script>
<script src="/pooh/app/directives.js"></script>
<script src="/pooh/app/authCtrl.js"></script>

<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/head.php');?>
<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo">
    <a href="/pooh/index.php"><b>Pooh</b>Furniture</a>
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
    <p class="login-box-msg">Sign in to start your session</p>

    <form method="post">
      <div class="form-group has-feedback">
        <input ng-model="login.email" class="form-control" placeholder="Email">
        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input ng-model="login.password" type="password" class="form-control" placeholder="Password">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="row">
        <div class="col-xs-8">
          <div class="checkbox icheck">
            <label>
              <input type="checkbox"> Remember Me
            </label>
          </div>
        </div>
        <!-- /.col -->
        <div class="col-xs-4">
          <button ng-click="doLogin(login)" data-ng-disabled="loginForm.$invalid" type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
        </div>
        <!-- /.col -->
      </div>
    </form>

    <a class="hidden" href="#">I forgot my password</a><br>

  </div>
  <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- jQuery 2.1.4 -->
<script src="/pooh/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="/pooh/bootstrap/js/bootstrap.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="/pooh/plugins/iCheck/icheck.min.js"></script>
<script>
  $(function () {
    $('input').iCheck({
      checkboxClass: 'icheckbox_square-blue',
      radioClass: 'iradio_square-blue',
      increaseArea: '20%' // optional
    });
  });
</script>
</body>
</html>

<?php 
//check if already logged in move to home page
//if logged in redirect to members page
//if( $user->is_logged_in() ){ header('Location: login.php'); } 
?>
<?php $page = 'summary'; ?>
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/header.php');?>
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/sidebar.php');?>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Dashboard
                <small>Overall information</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">

      <!-- Your Page Content Here -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/footer.php');?>

您必须始终在模板URL中包含文件html这很好，谢谢。我还有一个问题，所有链接都是转到/#（即转到登录页面）。javascript似乎不起作用，或者我不知道问题出在哪里？打开控制台并重新加载页面时是否出错？你所有的脚本都加载了吗？您是否已在app.js和文件中将templateUrl重命名为.html？我认为您可以在stackoverflow上创建一个新的问题，并粘贴您的代码html、js和all的路径。没有任何错误，所有脚本都已加载。请注意，我再次检查了templateURL中的html、head、body标记在加载到data ng视图时消失。我如何解决这个问题？我已经更新了上面的项目代码。