2014-04-16 2 views
6

저는 응용 프로그램을 만들려고합니다. 예를 들어 아코디언과 datepicker를 사용하려면 bootstrap UI를 사용하고 있습니다. 그러나 ng-route 모듈을 통해 라우팅을 추가하려고하면 ui 파트가 작동을 멈 춥니 다.각도 : Ui 부트 스트랩을 사용하는 동안 라우팅

다음 angular tutorial에서

var myApp= angular.module('myApp', ['ui.bootstrap']); 

그들은 내가이 같은 NG-응용 프로그램 정의를 넣어야 할 라우팅 일을 사용하는 말을 다음과 같이 라우팅 부분없이

내 NG-응용 프로그램의 정의는 본다

var myApp = angular.module('myApp', [ 
     'ngRoute', 
     'Controllers', 
     'ui.bootstrap' 
    ]); 

아니면 :

var myApp= angular.module('myApp', [ 
     'ngRoute', 
     'Controllers' 
    ]); 

는 그래서는 다음과 같이한다 결합 내가 틀렸어? 이런 식으로 작동하지 않습니다.

은 index.html을 파일은 다음과 같습니다 :

!DOCTYPE html> 
<html ng-app='myApp'> 

    <head> 
    <script src="lib/angular/angular.js"></script> 
    <script src="lib/angular/angular-route.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/controllers2.js"></script> 
    <script src="ui-bootstrap-tpls-0.9.0.js"></script> 

    <link rel="stylesheet" href="css/bootstrap-3.1.1-dist/css/bootstrap.css"> 
    <link rel="stylesheet" href="css/app.css">> 
    </head> 

    <body> 
    <div ng-view></div> 
    </body> 

</html> 

controllers2.js 아직 어떤 컨트롤러를 정의하지 않습니다

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

    Controllers.controller('firstCtrl', ['$scope', '$http','$routeParams', 
     function ($scope, $http) { 

     }]); 

     Controllers.controller('secondCtrl', ['$scope', '$routeParams', 
     function($scope, $routeParams) { 
     }]); 

app.js가 처리하는 라우팅 부분 :

var myApp = angular.module('myApp', [ 
'ngRoute', 
'Controllers', 
'ui.bootstrap' 

]); 
myApp.config(['$routeProvider', 
function($routeProvider) { 
$routeProvider. 
when('/first', { 
templateUrl: 'first.html', 
controller: 'firstCtrl' 
}). 
when('/second', { 
templateUrl: 'second.html', 
controller: 'secondCtrl' 
}). 
otherwise({ 
redirectTo: '/first' 
}); 
}]); 

first.html 및 second.html은 많이 수행하지 않습니다. first.html :

<h1>first</h1> 
<a href="#/second">second</a> 
     <accordion close-others="oneAtATime"> 
     <accordion-group heading="Heading 1" is-open="true"> 
      TSome Content 
     </accordion-group> 
     <accordion-group heading="Heading 2"> 
      Some Content 
     </accordion-group> 

     </accordion> 

second.html :

<h1>second</h1> 
<a href="#/first">first</a> 

first.html 작업 부트 스트랩으로, 다음과 같아야합니다

enter image description here

답변

2

당신이 이전에 정의 된 '컨트롤러'모듈이 있습니까 당신은 당신의 애플 리케이션을로드하려고합니까? 만약 의존성에서 제거하지 :

var myApp = angular.module('myApp', [ 
    'ngRoute', 
    'ui.bootstrap' 
]); 
+0

나는 몇 가지 코드 부분을 추가가 – dummkind

1

이 컨트롤러는 맞춤법이 틀린가요? 하나는 소문자 인 것으로 보이며, '컨트롤러'와 '문장'의 경우 '컨트롤러'에있는 것으로 보입니다.

브라우저 (브라우저 시스템의 경우 F12)에서 디버거를 실행하고 페이지를 새로 고칠 때 (F5 또는 브라우저 새로 고침 버튼) 콘솔 창에 오류 메시지가 기록되는지 확인하십시오. 내 페이지가 재미있을 때 콘솔이 내게 힌트를 제공한다는 것을 알게되었습니다.

+0

명확 나는 단지 그것을 잘못 여기 ... – dummkind

3

angular.module('myApp', [])을 두 번째 매개 변수로 호출 할 때마다 모듈을 생성합니다.

angular.module('myApp', []) // <은 - myApp

angular.module('myApp') // <라는 새 모듈을 만듭니다 - myApp 모듈의 기존 인스턴스를 찾습니다.

동일한 이름으로 인스턴스를 두 번 이상 만드는 경우 첫 번째 인스턴스는 두 번째 인스턴스에서 덮어 씁니다.

+0

방법을 썼다 생각하게하는 내가 원하는 결과를보기 위해 글을 써야합니까? :) – dummkind

+0

app.js의 모듈 행을 'angular.module ('myApp ', ['ngRoute ','ui.bootstrap ']);'로 변경하십시오. 그런 다음 controllers2.js의 모듈 행을 'angular.module ('myApp ');'로 변경하십시오. 마지막으로, app.js 파일이 controllers2.js 파일보다 먼저로드되었는지 확인하십시오. –

0

내 경우에는 ui.bootstrap로 ngAnimate 고정 문제를 삭제합니다.

-2

모두 'NGRoute'와 'UI.bootstrap' 감사를 포함하는 간단한 각 프로젝트를 업로드하시기 바랍니다

+3

이 질문에 대한 답을 제공하지 않습니다. [비슷한 질문을 검색] (// stackoverflow.com/search)하거나 페이지의 오른쪽에있는 관련 및 연결된 질문을 참조하여 대답을 찾을 수 있습니다. 관련이 있지만 다른 질문이있는 경우 [새 질문하기] (// stackoverflow.com/questions/ask)를 읽고 컨텍스트를 제공하는 데 도움이되는 링크를 포함하십시오. See : [질문하기, 대답하기, 산만하게하지 않기] (// stackoverflow.com/tour) –

+0

새로운 질문이 있으면 [Ask Question] (https://stackoverflow.com/questions/)을 클릭하여 질문하십시오. 묻는다) 버튼을 누른다. 컨텍스트를 제공하는 데 도움이되는 경우이 질문에 대한 링크를 포함하십시오. - [리뷰에서] (리뷰/저품절 포스트/18851168) – Kos