2014-07-27 3 views
2

나는 다음과 같이 정의 된 코드가 메인 app.js 파일이 있습니다차이 .controller

var app = angular.module('Funapp', [ 
    'Funapp.controllers', 
    'Funapp.services', 
    ]) 

내 JS 컨트롤러 파일의 일부, 내가 사용할 수있는 이유가 궁금하네요을 app.controller 다른 사람들은 .controller를 대신 사용하기 위해 angular.module() {} 등을 작성해야합니다. 두 번째 경우에는 app.controller가 작동하지 않습니다.

예를 들면. app.controller는 내 게시 컨트롤러에서 작동합니다.

'use strict'; 
app.controller('PostsCtrl', function ($scope, Post) { ...etc 

그러나 공장 같은 다른 JS 파일에서 작동하지 않습니다, 그래서 난 후보기 또는 너무 더미 컨트롤러 작동하지 않습니다

'use strict'; 
angular.module('Funapp.services', []) 
.factory('Post', function ($firebase, FIREBASE_URL) {....etc 

아래로 입력 할 필요가 아래 POSTVIEW 컨트롤러

'use strict'; 
//angular.module('Funapp') --> Doesnt work currently, neither does Funapp.controller 

app.controller('PostViewCtrl', function ($scope, $routeParams, Post) { ...etc 

사람이 내가 angular.module ("", [])를 입력 무엇을 고려해야합니다, 어떻게 app.controller 및 .controller하고, 후자의 경우를 사용하는 가르치 려 수 있습니까?

각도 튜토리얼을 읽었으며 angular.module ("", [])은 모듈을 정의하고 angular.module ("")은 정의 된 모듈을 사용한다는 것을 이해해야합니다. 그러나 많은 오류가 발생하여 적절한 문제를 해결할 수없고 이것이 어떻게 작동하는지 이해할 수 있습니다.

답변

2

메인 앱 정의 파일이 이미로드되어 있고 PostViewCtrl이 필요한보기에 도달 할 때까지 범위에 있는지 여부에 따라 다릅니다. 이미로드되었고 DOM에서 사용할 수 있다면, 이미 선언 했으므로 app.controller 구문을 사용할 수 있음을 의미합니다. 종속 관계입니다. DOM에서 사용할 수없는 경우 이미 수행중인 작업을 수행해야합니다. 이는 모범 사례 관점에서 볼 때 고통스럽고 끔찍한 일입니다. 예를 들어 앱 정의가 포함 된 스크립트가있는 메인 페이지가있는 경우 해당 쉘 페이지 내에서 호스팅되는 다른보기에는 app.controller으로 선언 된 컨트롤러가있을 수 있지만 서버 측보기라고 말하면 메인 앱 정의 스크립트는 그렇지 않습니다 마스터 페이지 (ASP.NET 개념)에 포함 된 경우 각 서버 측보기 내부에 컨트롤러를 만들 때마다 앱 정의를 다시 선언해야합니다.

예를 들어, 2 페이지, HomeAbout이 있다고 가정 해보십시오. 이 같은 app.js 외모 : 각각 별도의 파일에서 별도의 컨트롤러 정의가

var app = angular.module("demoApp", ['demoApp.services']); 
var appServices = angular.module('demoApp.services', []); 
선행로드해야하고 당신이 당신의 다른 페이지 이후, 다른 페이지로 이동할 때마다 주위에있을 필요가

는 동일의 일부 또한 해당 앱에서 정의한 서비스가 필요합니다.

HomeCtrl.js : AboutCtrl.js

app.controller("homeCtrl", function ($scope) { 
    $scope.msg = "Home!"; 
}); 

AMD :

이제
app.controller("aboutCtrl", function ($scope,svc1) { 
    $scope.msg = "About!"; 
    svc1.sayHi(); 
}); 

Home.html에서 :

<divng-controller="homeCtrl"> 
    <h1>{{msg}}</h1> 
</div> 

About.html :

<script src="~/app/Svc1.js"></script> 
<script src="~/app/AboutCtrl.js"></script> 

<div ng-controller="aboutCtrl">{{msg}}</p> 

그리고 Svc1.js은 다음과 같습니다

appServices.service("svc1", function() { 
    return { 
     sayHi: function() { 
      alert("hi"); 
     } 
    }; 
}); 

길고도 짧은 이야기 당신이 그렇지 않으면 당신의 응용 프로그램에 서비스 또는 컨트롤러를 선언 할 때 appappServices 변수는 앱 모듈을 참조하는 범위에 있어야합니다 항상 앱을 재정의해야합니다.

+0

입니까? 기본 app.js 정의를 편집해야합니까? 모든 컨트롤러는 모두 개별적으로 분리 된 js 파일에 있습니다.
내가 변경하고자하는 이유는 나의 이해가 부족하여 앞으로 내 js 파일의 오류가 발생할 수 있습니다. – Thinkerer

+0

서비스에 대해서도 마찬가지입니다. 서비스를 만드는 앱은 작성한 시간에로드해야합니다 : "app.service", 중요한 것은 서비스/컨트롤러 등을 추가 할 때 모듈 정의가있는 것입니다. 시작할 때'var appServices = angular.module ('Funapp.services', []) 선언을로드하고, 필요로하는 모든 페이지에서 사용할 수 있는지 확인하십시오. 이제는 다른 서비스를 만들고 싶습니다. –

+0

@Thinkerer 편집 내역보기 –

1

다양한 개체의 네임 스페이스를 올바르게 지정하면 각 구문에 대한 모듈을 정의해야합니다. 내가 어떻게 그 효율적으로 사용하기 위해서는 어떤 파일 변경합니까, 두 번째 코드 app.factory 사용하고자하는 경우

여기에, 예를 들어이 경우

<!doctype html> 
<html ng-app="Funapp"> 
<head> 
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
</head> 
<body ng-controller="PostsCtrl"> 

<div class="well"> 
    <h1>{{message}}</h1> 
</div> 

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script> 
<script> 

angular.module('Funapp.services', []) 
    .service('PostService', [function() { 
     return { 
      doSomething: function() { 
        return "I posted something"; 
      } 
     } 

    }]); 

angular.module('Funapp.controllers', ['Funapp.services']) 
    .controller('PostsCtrl', ['$scope', 'PostService', function ($scope, Post) {  
     $scope.message = Post.doSomething(); 
     console.log("I'm a Post Controller"); 
    } 
    ]); 

angular.module('Funapp', [ 
    'Funapp.controllers' 
]); 

</script> 
</body> 
</html> 
+0

앱을 네임 스페이스로 만들고 모듈화하는 것은 좋은 습관이지만 반드시 그렇지 않기 때문에 언제든지 앱을 다시 선언하는 것이 좋습니다. DOM에 사용할 수있는 코드 중복 및 유지 보수 악몽 IMO입니다. –

+0

나는 당신의 요점을 잘 모르겠다. @ 모하메드 세 파항 (MohammadSepahvand), 나는 당신이 당신의 코드 기반을 어떻게 설정했는지가 정말로 앱의 크기에 달려 있다고 말할 것이다. 우리는 상당히 큰 응용 프로그램을, 업무에서, 기능적인 설정에서 해체하고, 단지 하나가 아닌 많은 모듈을 가지고 있습니다. 그리고 서비스와 필터와 같은 공유 된 것들이 필요한 곳에, 그것들은 공통 모듈에 들어갑니다. 당신이 조심하지 않으면 유지 보수의 악몽처럼 보일 때 리팩토링하지 않으면 일이 빠져 나갈 수 있다는 것에 동의합니다. IMHO –

+0

나는 당신이 말한 것과 완전히 동의하지만, 문제에 패치를 적용하지 않고 _same_ app를 어디에서나 다시 정의하지 않으려 고합니다. –