2013-10-19 5 views
2

AngularJS를 처음 사용했습니다. 배우려는 노력에서 AngularJS 자습서에 의존했습니다. 이제 AngularSeed 프로젝트 템플릿을 사용하여 앱을 제작하려고합니다. 가능한 한 모듈 식으로 프로젝트를 만들려고합니다. 이런 이유로 내 컨트롤러는 여러 파일로 나뉩니다.각도로 모듈로드

'use strict'; 

var app = angular.module('site', ['ngRoute']); 
app.config(function($routeProvider, $locationProvider) { 
    $locationProvider.html5Mode(true); 
    $routeProvider.when('/login', {templateUrl: 'app/login.html', controller:'loginCtrl'}); 
    $routeProvider.when('/home', {templateUrl: 'app/home.html', controller:'homeCtrl'}); 

    $routeProvider.otherwise({redirectTo: '/login'}); 
}); 

내 loginCtrl.js 파일이 순간에 매우 기본적인 :

/app 
index.html 
login.html 
home.html 
javascript 
    app.js 
    loginCtrl.js 
    homeCtrl.js 

내 app.js 파일은 다음과 같습니다 현재, 나는 다음 있습니다. 단지 다음을 포함합니다 :

'use strict'; 

app.controller('loginCtrl', 
    function loginCtrl($scope) { 
    } 
); 

내 homeCtrl.js는 이름을 제외하고 거의 동일합니다. 그것은 다음과 같습니다

'use strict'; 

app.controller('homeCtrl', 
    function homeCtrl($scope) { 
    } 
); 

내 index.html 파일이 angularSeed index-async.html 파일입니다. 그러나 종속성을로드 할 때 다음과 같은 결과가 발생합니다.

// load all of the dependencies asynchronously. 
$script([ 
    'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js', 
    'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-route.min.js', 
    'javascript/app.js', 
    'javascript/loginCtrl.js', 
    'javascript/homeCtrl.js' 
], function() { 
    // when all is done, execute bootstrap angular application 
    angular.bootstrap(document, ['site']); 
}); 

가끔 내 응용 프로그램이 작동하고 때로는 그렇지 않습니다. 뭔가 다른 것보다 먼저로드되는 것과 거의 같습니다.

경우에 따라 error이 표시됩니다. 다른 때에는 콘솔 창에 loginCtrl.js에 'Uncaught ReferenceError : app이 정의되지 않았습니다.'라는 오류가 표시됩니다. 때로는 homeCtrl.js에서 발생합니다.

내가 뭘 잘못하고 있니? 모듈에 내 컨트롤러가 있어야하고 app.js 파일의 app.config에 해당 모듈을 전달해야하는 것처럼 느껴집니다. 그러나, a) 허용되는지 b) 나는 그것을하는 법을 모르겠습니다.

+0

다음 링크를 참조하십시오. 제공자에게 '해결'을 추가하십시오. http://stackoverflow.com/questions/11972026/delaying-angularjs-route-change-until-model-loaded-to-prevent-flicker –

+0

It 나를 위해 일하는 것 같다. 어떤 서버를 사용하고 있습니까? login.html은 어떤 모습입니까? – vinaut

답변

1

angle-seed에는 outer.loader.js ($ script를 처리함) (문제 : https://github.com/angular/angular-seed/pull/111)에 문제가 있습니다. 그리고 이것은 당신이 보는 문제를 정확하게 일으 킵니다.

가장 최근의 로더를 사용해보십시오.JS (https://github.com/angular/angular.js/blob/master/src/loader.js)이 정규 <script> 태그 방법을 사용하고 단지 (@Chandermani 세부 사항으로) 확인 모든 것이 올바른 순서에 포함 할 수 https://github.com/angular/angular.js/blob/master/src/loader.suffix

또는

잡아 접두사 https://github.com/angular/angular.js/blob/master/src/loader.prefix

와 접미사

1

그럼 잘 모르겠다.하지만 작업이 비동기 js 파일을로드하는 경우 파일로드 및 실행 순서를 결정할 수 없다.

경우에 따라 다른 스크립트보다 먼저 스크립트를로드해야합니다. 따라서 angular* 스크립트는 앱 스크립트가로드되기 전에로드되어 실행되어야합니다. 나는 순서가

  1. Angular.min.js을해야한다고 생각
  2. 각-route.min.js
  3. 그런 다음 스크립트가 임의의 순서로
  4. 그런 다음 컨트롤러 \ 지시 \ 서비스 스크립트를 app.js .
+1

$ 스크립트는 비동기 로더입니다. 따라서 모든 스크립트가 함수를 호출하기 전에로드됩니다 (이 경우 부트 스트랩). $ 스크립트를 사용하면 주문에 대해 걱정할 필요가 없습니다. – KayakDave