模块 AngularJS 加载栏不工作

Question

我正在尝试 nodeJS、SailsJS 和 Angular。我想使用这个加载栏： http://chieffancypants.github.io/angular-loading-bar/ https://github.com/chieffancypants/angular-loading-bar

我读到加载栏会自动处理 http 请求。所以我这样做了：

npm install angular-loading-bar.

我把jss和css放到assets里了

这是我的登录模块：

var LoginModule = angular.module('LoginModule', ['angular-loading-bar']);

还有我的登录控制器：

angular.module('LoginModule')
    .controller('LoginController', LoginController);

LoginController.$inject = ['$scope', '$http', 'cfpLoadingBar'];

function LoginController($scope, $http, cfpLoadingBar) {

    // Get CSRF token and set as header
    $http.defaults.headers.post['X-CSRF-Token'] = document.getElementsByName('_csrf')[0].value;

    $scope.submitLoginForm = function() {
        $scope.start();
        $http.post('/login', {
                identifiant: $scope.login.identifiant,
                password: $scope.login.password
            })
            .then(function onSuccess() {
                window.location = '/home/';
            })
            .catch(function onError(response) {
                console.log(response);
            })
    }

    $scope.start = function() {
        cfpLoadingBar.start();
    };
    $scope.complete = function() {
        cfpLoadingBar.complete();
    };
}

但是当我登录我的表格时:

  <div class="container-fluid" ng-app="LoginModule" ng-controller="LoginController" ng-cloak>
    <div class=" col-lg-offset-4 col-lg-4">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">Connexion</h3>
        </div>
        <div class="panel-body">
          <h5 class="col-lg-12" style="text-align: center">Admin !</h5>
          <form ng-submit="submitLoginForm()" class="col-lg-offset-3 col-lg-6 form-group" name="loginForm">
            <input type="text" class="form-control" id="inputLogin" name="inputLogin" placeholder="Identifiant" ng-model="login.identifiant">
            <input type="password" class="form-control" id="inputPassword" name="inputPassword" placeholder="Mot de passe" ng-model="login.password">
            <br>
            <button type="submit" class="btn btn-primary" style="float: right">Connexion</button>
            <input type="hidden" name="_csrf" value="<%= _csrf %>">
          </form>
        </div>
      </div>
    </div>
  </div>

我在提交表单时没有看到加载栏（表单工作）:( 为什么？另外，当我尝试在 LoginModule 中加载 ngAnimate 时出现错误

我也在元素 HTML 上尝试了 start() 函数，但什么都没有..

Answer 1

您必须包含 angular-animate.min.js 才能使其正常工作也包括在 git 存储库示例中。当我删除此行时

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.min.js"></script>

它停止工作请确保包含动画文件。这就是为什么 ngAnimate 也给出错误

模块 AngularJS 加载栏不工作

Module AngularJS loading-bar doesn't work

javascript

module

node.js

angularjs