2013-06-20 2 views
22

나는 angularjs의 초보자입니다. 내 홈페이지에 게시물 목록이있는 응용 프로그램을 만들고 있습니다. 저는 그 페이지만을위한 양방향 바인딩을 위해 angularjs를 사용하는 것을 생각했습니다. 샘플 페이지로 시작했지만 여기에 문제가 발생했습니다.Angularjs 인수가 문자열을 가져 오는 함수가 아닙니다.

내 견본 페이지 나는이 div만으로 ng-app를 사용하고 있습니다. 왜냐하면 angularjs가 페이지의 다른 측면과 상호 작용하기를 원하지 않기 때문입니다. 난 내 홈 페이지를로드 할 때

<div ng-app="posts"> 
    <ul class="post_list" ng-controller="PostController"> 
    <li ng-repeat="post in posts"> 
    {{post.title}} 
    {{post.description}} 
    </li> 
    </ul> 
</div> 

은 내가

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

이있는 app.js 파일

(function(angular, app) { 
    // Define the Controller as the constructor function. 
    console.log(app); 
    console.log(angular); 
    app.controller("PostController",["$scope"], function($scope) { 
    $scope.posts = [ 
     {"title":"asdf", "description":"describe"}, 
     {"title":"second one", "description":"second describe"}, 
    ]; 
    }); 
})(angular, app); 

와 postcontroller.js 파일이 있습니다. 나는지고있다

Error: argument "PostController" is not a function. got string [googlecdn path]angular.min.js:16

나는 무엇이 여기에 놓치고있다. 내가 혼란 스러울 때 나를 도와주세요. 나는 angularjs에 새로운 자바 스크립트입니다.

답변

47

문제는 컨트롤러를 선언하는 방식입니다. 당신은 아래 그림을 좋아해야한다 :

app.controller("PostController",["$scope", function($scope) { 
    $scope.posts = [ 
     {"title":"asdf", "description":"describe"}, 
     {"title":"second one", "description":"second describe"}, 
    ]; 
    }]); 

는 두 번째 인수는 $scope 문자열과 배열의 요소와 기능 모두 배열 것을 알하시기 바랍니다. 이는 최소 안전 코드를 작성하는 데 사용되는 적절한 구문입니다.

+0

이 변경 후에 정상적으로 작동합니다. 왜이 구문이 최소화와 함께 작동하는지 설명하는 리소스로 나를 안내 할 수 있습니까? 당신의 도움을 주셔서 감사합니다. –

+1

@ R.A.J http://docs.angularjs.org/guide/di의 "Dependency Annotation"섹션을 참조하십시오. –

+0

Minification은 함수 및 인수 이름을 mangles하지만 문자열 리터럴은 포함하지 않습니다. –

관련 문제