angular-spinner能否正常使用？Angular JS 1.5.x环境下使用故障求助

我之前在AngularJS 1.x里用angular-spinner的时候也踩过一模一样的坑！你遇到的“Spinner不是构造函数”错误，本质是依赖加载顺序不对或者模块依赖没注入，下面给你一步步梳理正确的做法：

核心原理 #

angular-spinner是spin.js的Angular封装，它本身不包含spin.js的代码，必须确保spin.js先被加载，并且Angular模块正确注入angularSpinner依赖，否则就会找不到构造函数。

正确的引入方式 #

方式1：用包管理工具安装（推荐） #

如果你的项目用npm或bower管理依赖，这是最不容易出错的方式：

1. 安装依赖：

   # npm
   npm install angular-spinner spin.js --save
   # 或者 bower
   bower install angular-spinner spin.js --save
   

2. 在index.html里按顺序引入文件（顺序绝对不能反）：

   <script src="node_modules/angular/angular.min.js"></script>
   <script src="node_modules/spin.js/spin.min.js"></script>
   <script src="node_modules/angular-spinner/angular-spinner.min.js"></script>
   

3. 在你的Angular模块里注入angularSpinner：

   angular.module('yourAppName', ['angularSpinner']);
   

方式2：手动引入文件 #

如果不用包管理，要注意版本匹配和加载顺序：

1. 下载对应版本的文件：确保angular-spinner和spin.js版本兼容（比如angular-spinner 1.0.x对应spin.js 2.x）
2. 按以下顺序引入到index.html：

   <!-- 先引入AngularJS -->
   <script src="path/to/angular.min.js"></script>
   <!-- 再引入spin.js -->
   <script src="path/to/spin.min.js"></script>
   <!-- 最后引入angular-spinner -->
   <script src="path/to/angular-spinner.min.js"></script>
   

3. 同样在模块里注入angularSpinner依赖。

常见坑点排查 #

• 不要混合加载方式：比如既用<script>引入spin.js，又用requirejs等模块加载器引入，会导致作用域冲突或者重复加载。
• Plunker示例报错？换兼容版本：有些旧Plunker的文件版本不匹配，手动替换成AngularJS 1.5.x、spin.js 2.x、angular-spinner 1.0.x的对应文件即可。
• 压缩代码报错？调试用未压缩版：压缩后的spin.js可能把构造函数名混淆成i，如果angular-spinner找不到，先换未压缩版调试，确认没问题再用压缩版。

简单使用示例 #

控制器代码：

angular.module('myApp', ['angularSpinner'])
.controller('SpinnerCtrl', function($scope, usSpinnerService) {
  $scope.toggleSpinner = function() {
    const isSpinning = usSpinnerService.spin('mySpinner');
    if (!isSpinning) {
      usSpinnerService.stop('mySpinner');
    }
  };
});

HTML代码：

<div ng-app="myApp" ng-controller="SpinnerCtrl">
  <button ng-click="toggleSpinner()">切换加载动画</button>
  <span us-spinner="{radius: 12, width: 4, length: 8}" spinner-key="mySpinner"></span>
</div>

按照上面的步骤来，应该就能解决你遇到的报错问题了！

内容的提问来源于stack exchange，提问作者Chris Nelson