Question

首先，我是angularJS的新人。我在我的第一个应用程序中使用以下版本： AngularJs 1.5 Bootstrap 3.3.6

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

index.html
   ----js:app.js
         -------controllers:controller.js
         -------services:service.js
         :angular.js
         :angular-route.js
         :angular-animate.js
         :ui-bootstrap-tpls-1.1.2.min.js
   ----html:home.html
           :header.html
           :footer.html
   ----modal:login.html
            :register.html
   ----css:main.css

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>**

app.js：

'use strict';

var app = angular.module('myApp', ['ngRoute','ngAnimate','ui.bootstrap']);
app.config(function($routeProvider){
    //console.log($routeProvider);
    $routeProvider
        .when('/', { templateUrl: 'html/home.html', controller: "HomeCtrl"})
        .when('/login', { templateUrl: 'modal/login.html', controller: "LoginCtrl"})
        .when('/register', { templateUrl: 'modal/register.html', controller: "RegisterCtrl"}) 

        .otherwise({redirecTo: '/'});
});

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>

了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

AngularJS模态表单登录

0 个答案: