Angularjs 角度模块';安格拉斯平纳';不可用

Angularjs 角度模块';安格拉斯平纳';不可用,angularjs,typescript,Angularjs,Typescript,我有一个简单的应用程序,我想添加一个微调器。我已经按照github上文档页面的说明进行了操作,出于某些原因,我经常得到: 无法实例化模块angularSpinner,原因是: 错误:[$injector:nomod]模块“angularSpinner”不可用!您要么拼错了模块名,要么忘记加载它。如果注册模块,请确保将依赖项指定为第二个参数 我的应用程序定义: angular.module('MyApp', ['angularSpinner']); 我的HTML头: <script src

我有一个简单的应用程序,我想添加一个微调器。我已经按照github上文档页面的说明进行了操作,出于某些原因,我经常得到:

无法实例化模块angularSpinner,原因是: 错误:[$injector:nomod]模块“angularSpinner”不可用!您要么拼错了模块名,要么忘记加载它。如果注册模块,请确保将依赖项指定为第二个参数

我的应用程序定义:

angular.module('MyApp', ['angularSpinner']);
我的HTML头:

<script src="js/spin.js" type="text/javascript"></script>
<script src="js/angularspinner.js" type="text/javascript"></script>


<script src="js/MyApp" type="text/javascript"></script>

我在这个阶段非常困惑。该应用程序位于IFRAME中,但我可以在控制台中看到两个微调器脚本都已加载。有什么提示吗

angular spinner code should be 
/**
 * angular-spinner version 0.5.0
 * License: MIT.
 * Copyright (C) 2013, 2014, Uri Shaked and contributors.
 */

(function (root) {
    'use strict';

    function factory(angular, Spinner) {

        angular
            .module('angularSpinner', [])

            .factory('usSpinnerService', ['$rootScope', function ($rootScope) {
                var config = {};

                config.spin = function (key) {
                    $rootScope.$broadcast('us-spinner:spin', key);
                };

                config.stop = function (key) {
                    $rootScope.$broadcast('us-spinner:stop', key);
                };

                return config;
            }])

            .directive('usSpinner', ['$window', function ($window) {
                return {
                    scope: true,
                    link: function (scope, element, attr) {
                        var SpinnerConstructor = Spinner || $window.Spinner;

                        scope.spinner = null;

                        scope.key = angular.isDefined(attr.spinnerKey) ? attr.spinnerKey : false;

                        scope.startActive = angular.isDefined(attr.spinnerStartActive) ?
                            attr.spinnerStartActive : scope.key ?
                            false : true;

                        scope.spin = function () {
                            if (scope.spinner) {
                                scope.spinner.spin(element[0]);
                            }
                        };

                        scope.stop = function () {
                            if (scope.spinner) {
                                scope.spinner.stop();
                            }
                        };

                        scope.$watch(attr.usSpinner, function (options) {
                            scope.stop();
                            scope.spinner = new SpinnerConstructor(options);
                            if (!scope.key || scope.startActive) {
                                scope.spinner.spin(element[0]);
                            }
                        }, true);

                        scope.$on('us-spinner:spin', function (event, key) {
                            if (key === scope.key) {
                                scope.spin();
                            }
                        });

                        scope.$on('us-spinner:stop', function (event, key) {
                            if (key === scope.key) {
                                scope.stop();
                            }
                        });

                        scope.$on('$destroy', function () {
                            scope.stop();
                            scope.spinner = null;
                        });
                    }
                };
            }]);
    }

    if (typeof define === 'function' && define.amd) {
        /* AMD module */
        define(['angular', 'spin'], factory);
    } else {
        /* Browser global */
        factory(root.angular);
    }
}(window));
请通过下面的格式将代码行(您也应该参考angular脚本)

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
  <script type="text/javascript" src="http://fgnass.github.io/spin.js/spin.min.js"></script>
  <script type="text/javascript" src="angular-spinner.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="myapp" ng-controller="MyController">
  <h1>Hello Spinner!</h1>
  <input type="button" ng-click="startSpin()" value="Start spinner" />
  <input type="button" ng-click="stopSpin()" value="Stop spinner" />
  <br />Spinner active: {{spinneractive}}<br />Started: {{startcounter}} times<br />
  <span us-spinner="{radius:30, width:8, length: 16}" spinner-key="spinner-1"></span>
</body>

</html>

你好,斯宾纳!

微调器活动:{{spinnerative}
开始:{{startcounter}}次

并遵循正确的plnkr:

如果我跳过模块注册部分,我会得到以下错误:[$injector:unpr]未知提供程序:usSpinnerServiceProvider这些正是我遵循的步骤,我仍然会得到相同的错误。我真的不知道怎么了。。。唯一的区别是,由于我使用CRM,我对命名webresources有限制,这就是为什么我的angularSpinner.js脚本命名为angularSpinner。这会引起问题吗?