2014-09-06 74 views
2

我新的角度和我不断收到抛出下面的错误。

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> 

角的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", 
]; 

}); 

回答

0

删除jQuery的文件准备好包装,它可以防止正常自举程序因延误事件角。 app.js应该只是:

var app = angular.module('puppyFarm', []); 

app.controller('PupController', function(){ 
    this.images = puppies; 
}); 
...