2016-06-13 3 views
1

저는 angularjs를 배우고 있으며, 한 지점에서 멈추었습니다. 난 그것뿐만angularjs 모듈 ui.bootstrap.demo를 인스턴스화하지 못했습니다.

<script type="text/javascript"> 
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope, $http, dataShare) { 
    $scope.myInterval = 5000; 
    $scope.noWrapSlides = false; 
    $scope.active = 0; 
    var slides = $scope.slides = []; 
    var currIndex = 0; 

    $scope.sendEnvName = function(data) { 
     dataShare.sendEnvNameDetails(data); 
    } 

    $scope.addSlide = function (envName) { 
     slides.push({ 
      text: envName, 
      id: currIndex++ 
     }); 
    }; 

    $http.get("http://localhost:8080/getEnvList") 
      .success(function (data) { 
       for (var i in data) { 
        $scope.addSlide(data[i].envName); 
       } 
      }); 

}); 

그것은 작동을 exected 작품을 별도의 파일에 자바 스크립트를 작성 해달라고하면 나는

<html ng-app="ui.bootstrap.demo"> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> 
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script> 
<script src="resources/js/main.js"/> 
<script src="resources/js/gsenv.js"/> 
<script src="resources/js/CarouselController.js"/> 
</head> 

그러나 내 html 파일 아래

ncaught Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap.demo due to: 
Error: [$injector:nomod] Module 'ui.bootstrap.demo' is not available! 

오류

입니다 점점 ​​계속 이런 식으로 괜찮아요. 문제가 무엇인지 이해할 수 없어요.

main.js

var app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ngTable']); 

jsenv.js

app.factory('dataShare',function($rootScope){ 
var service = {}; 
service.envName = 'no-env' 
service.sendEnvNameDetails = function(data){ 
    console.log(data) 
    this.envName = data; 
    $rootScope.$broadcast('data_shared'); 
}; 
service.getData = function(){ 
    return this.envName; 
}; 
return service; 
}); 

컨베이어

app.controller('CarouselDemoCtrl', function ($scope, $http, dataShare) { 
$scope.myInterval = 5000; 
$scope.noWrapSlides = false; 
$scope.active = 0; 
var slides = $scope.slides = []; 
var currIndex = 0; 

$scope.sendEnvName = function(data) { 
    dataShare.sendEnvNameDetails(data); 
} 

$scope.addSlide = function (envName) { 
    slides.push({ 
     text: envName, 
     id: currIndex++ 
    }); 
}; 

$http.get("http://localhost:8080/getEnvList") 
    .success(function (data) { 
     for (var i in data) { 
      $scope.addSlide(data[i].envName); 
     } 
    }); 

});

+1

다른 .js 파일에 코드를 작성하는 방법은 무엇입니까? 'main.js' 질문에 코드를 넣으시겠습니까? –

+0

@GabrielHobold ... js 파일의 코드로 업데이트 된 질문 –

+0

스크립트 태그를''(다른 파일에도 적용하십시오) 작동하는지 알려주십시오. –

답변

1

변경하여 컨트롤러와 공장 :

app.controller('CarouselDemoCtrl', function ($scope, $http, dataShare) { }); 

사람 : 보낸 사람 :

angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope, $http, dataShare) { }); 

에서 :

app.factory('dataShare',function($rootScope){}); 

사람 :

angular.module.factory('dataShare',function($rootScope){}); 
관련 문제