未捕获错误[$injector:modulerr]错误

Uncaught Error [$injector:modulerr] error

本文关键字：错误 modulerr injector      更新时间：2023-09-26

我是Angular的新手，经常遇到以下错误。

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-rc.0/$injector/modulerr?p0=puppyFarm&p1=E…larjs.org%2F1.3.0-rc.0%2F%24injector%2Fnomod%3Fp0%3DpuppyFarm%0A%20%20%20%...<omitted>...9)

我不确定自己做错了什么。据我所知，一切似乎都是正确的。我的页面非常直接，所有内容的名称似乎都正确，所以我觉得这个错误与我没有包含的引用有关？让我知道你的想法。

HTML

<!DOCTYPE html>
    <html ng-app="puppyFarm">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Testin sheeeeeyit</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/main.css" rel="stylesheet">
    </head>
    <body>
        <div class="jumbotron">
            <div class="container">
                <h1>Puppies!</h1>
                <p>Puppies puppies puppies puppies puppies puppies puppies puppies puppies puppies puppies puppies puppies puppies puppies puppies puppies puppies puppies </p>
            </div>
        </div>
        <div class="container">
            <div class="row puppybox">
                <div class="col-md-12">
                    <div class="frame" id="pupslider" ng-controller="PupController as pups">
                        <ul class="slidee" ng-repeat="image in pups.images">
                            <li><img ng-src="{{image}}" height="250" /></li>
                        </ul>
                    </div>
                    <div class="scrollbar">
                        <div class="handle"></div>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/sly.min.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script>
            $(function(){
                var $frame = $('#pupslider');
                var $scrollbar = $(".scrollbar");
                var sly = new Sly($frame, {
                    horizontal: 1,
                    itemNav: 'centered',
                    smart: 1,
                    activateOn: 'click',
                    mouseDragging: 1,
                    touchDragging: 1,
                    releaseSwing: 1,
                    startAt: 4,
                    scrollBar: $scrollbar,
                    scrollBy: 1,
                    speed: 300,
                    elasticBounds: 1,
                    easing: 'easeOutExpo',
                    dragHandle: 1,
                    dynamicHandle: 1,
                    clickBar: 1,
                }).init();;
            });
        </script>
    </body>
    </html>

Angular Javascript

$(function(){
    var app = angular.module('puppyFarm', []);
    app.controller('PupController', function(){
        this.images = puppies;
    });

var puppies = [
"img/puppy1.jpg",
"img/puppy2.jpg",
"img/puppy3.jpg",
"img/puppy4.jpg",
"img/puppy5.jpg",
"img/puppy6.jpg",
"img/puppy7.jpg",
"img/puppy8.jpg",
];
});

删除jQuery的文档就绪包装器，它会阻止Angular由于延迟事件而正确引导应用程序。app.js应该只是：

var app = angular.module('puppyFarm', []);
app.controller('PupController', function(){
    this.images = puppies;
});
...
相关文章：