AngularJS模式表单登录_Angularjs

AngularJS模式表单登录

angularjs

AngularJS模式表单登录,angularjs,Angularjs,首先，我是安格拉斯的新手。我在我的第一个应用程序中使用了以下版本： AngularJs 1.5 引导程序3.3.6 我的第一个AngularJS应用程序的结构如下：在index.html中： **<!doctype html> <html lang="en" ng-app="myApp"> <head> <title>my First Angular App</title> </head> <b

首先，我是安格拉斯的新手。我在我的第一个应用程序中使用了以下版本： AngularJs 1.5 引导程序3.3.6

我的第一个AngularJS应用程序的结构如下：

在index.html中：

**<!doctype html>
<html lang="en" ng-app="myApp">

<head>
    <title>my First Angular App</title>
</head>

<body>


    <div ng-view class="'slide-animation'"></div>
    <script src="js/angular.js"></script>
    <script src="js/angular-route.js"></script>
    <script src="js/angular-animate.js"></script>
    <!-- <script src="js/angular-ui-bootstrap.js"></script> -->
    <script src="js/ui-bootstrap-tpls-1.1.2.min.js"></script>


    <script src="js/app.js"></script>
    <!-- <script src="js/service/services.js"></script> -->
    <script src="js/controller/controllers.js"></script>

    <link href="css\bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="css\mainstyle.css">

</body>

</html>**

controller.js：

'use strict';
app.controller('HomeCtrl', function($scope,$rootScope){
    //console.log($scope);
    $scope.login=false;

    $scope.slogan = "Jump inside AngularJS";

    $rootScope.loading=false;

});


app.controller("LoginCtrl", function($scope,$uibModal,$log) {
    $scope.open = function (size) {
        console.log(size);

    var modalInstance = $uibModal.open({
        animate: true,
      templateUrl: 'html/login.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
    };
});

app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {

  $scope.ok = function () {
    $uibModalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});
/*app.controller("modalAccountFormController", ['$scope', '$uibModal', '$log',

    function ($scope, $uibmodal, $log) {
        console.log('LoginCtrl');

        //$scope.showForm = function (Type) {
        //        $scope.message = "Show Form Button Clicked:"+Type;
        //      console.log($scope.message);

        var modalInstance = $uibModal.open({
                templateUrl: 'modal4.html',
                controller: ModalInstanceCtrl,
                scope: $scope,
                resolve: {
                    userForm: function () {
                        return $scope.userForm;
                }
            }
        });

        modalInstance.result.then(function (selectedItem) {
                $scope.selected = selectedItem;
            }, function () {
                $log.info('Modal dismissed at: ' + new Date());
        });
        //};
    }]);*/

var ModalInstanceCtrl = function ($scope, $modalInstance, userForm) {
    $scope.form = {}
    $scope.submitForm = function () {
        if ($scope.form.userForm.$valid) {
            console.log('user form is in scope');
            $modalInstance.close('closed');
        } else {
            console.log('userform is not in scope');
        }
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};


app.controller('RegisterCtrl', function($scope,$rootScope) {
    console.log('RegisterCtrl');

});

home.html

<div>
    <div id="wrapper">
        <div class="container-fluid">

            <header ng-include="'header.html'" ></header>

            <div id="content">
            <div class="row main-top-margin text-center">
            <div class="col-md-8 col-md-offset-2 " >
            <h1 class="animated flash">my First AngularJS App</h1>
            <p>{{slogan}}</p>
            </div>
            </div>
            </div>

            <footer ng-include="'footer.html'"></footer>
        </div>
    </div>
</div>


我的第一个AngularJS应用程序
{{标语}

header.html

<!-- Header -->
<div id="header">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
    <div class="navbar-header">
      <img src="img/headlogo.png" class="img-rectangle" alt="Logo" width="150" height="60">
    </div>
    <div>
      <ul class="nav navbar-nav">
      <li><a href="fxIndex.php">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Info<span class="caret"></span></a>
        <ul class="dropdown-menu">
        <li><a href="#/About"><span class="glyphicon glyphicon-info-sign"></span> About</a></li>
        <li><a href="#/Contact"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li>
        </ul>
      </li>

      </ul>
      <ul class="nav navbar-nav navbar-right">

          <li><a ng-show="login">Hello</a></li>
          <li><a href="#/logout" ng-show="login"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>

          <li><a href="#/register" ng-click="open('sm')"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
          <li><a href="#/login" ng-click="open('sm')"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

      </ul>
    </div>
    </div>
  </nav>
</div>

和login.html

<div>
<modal title="Login form" visible="showModal">
    <form role="form">
      <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email" ng-model="email" />
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" placeholder="Password" ng-model="password"/>
      </div>
      <button type="button" class="btn btn-default" ng-click="submit()">Submit</button>
    </form>
  </modal>
</div>


电子邮件地址
密码
提交

我的问题是：myApp不工作：-(

我不知道如何解决或调试它。你能首先告诉我我做了什么吗？这是处理Angularjs 1.x的正确方法吗

第二件事，如何解决我的问题

多谢各位

/Koul

你在控制台中有错误消息吗？如果有，告诉我们出了什么问题。此外，我认为你的app.js链接错误。如果我看对了，应该是：你的控制器也是这样。js控制台中没有错误，app、js和controller、js的链接是正确的，我只是将它们移动到各自的文件夹中。代码已更新！

<!-- Header -->
<div id="header">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
    <div class="navbar-header">
      <img src="img/headlogo.png" class="img-rectangle" alt="Logo" width="150" height="60">
    </div>
    <div>
      <ul class="nav navbar-nav">
      <li><a href="fxIndex.php">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Info<span class="caret"></span></a>
        <ul class="dropdown-menu">
        <li><a href="#/About"><span class="glyphicon glyphicon-info-sign"></span> About</a></li>
        <li><a href="#/Contact"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li>
        </ul>
      </li>

      </ul>
      <ul class="nav navbar-nav navbar-right">

          <li><a ng-show="login">Hello</a></li>
          <li><a href="#/logout" ng-show="login"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>

          <li><a href="#/register" ng-click="open('sm')"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
          <li><a href="#/login" ng-click="open('sm')"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

      </ul>
    </div>
    </div>
  </nav>
</div>

<div>
<modal title="Login form" visible="showModal">
    <form role="form">
      <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email" ng-model="email" />
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" placeholder="Password" ng-model="password"/>
      </div>
      <button type="button" class="btn btn-default" ng-click="submit()">Submit</button>
    </form>
  </modal>
</div>