View, Controller, $scope
$scope 는 컨트롤러와 뷰 사이에서 중계자자(ViewModel) 역할을 합니다.
MV* 프레임워크(MVC, MVVM, MVP)
Controller 를 생성한 후 View 에 추가
<div class="container" data-ng-controller="SimpleController">// 사용할 컨트롤러 설정
<h3>초간단 컨트롤러 추가</h3>
<ul>
<li data-ng-repeat="cust in customers">//$scope 의 멤버에 접근
{{ cust.name }} - {{ cust.city }}
</li>
</ul>
</div>
<script>
// 함수로 컨트롤러 생성
function SimpleController($scope) { // 매개변수로 동적 $scope 주입
$scope.customers = [
{ name: 'RedPlus', city: '인천'},
{ name: 'Taeyo', city: '서울＇},
{ name: 'Songgun', city: '경기'},
{ name: 'ITist', city: '세종'}
];
}
</script>
ng-model (DataBinding & Directive)
ng-repeat (for~in 반복문과 유사)
ng-controller
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>컨트롤러</title>
</head>
<body>
<div ng-controller="HelloWorldController1">
{{helloMessage}}
</div>
<script>
// $scope를 매개변수로 가지는 함수는 NG의 컨트롤러가 될 수 있다.
function HelloWorldController1($scope) {
$scope.helloMessage = "안녕하세요.";
}
</script>
<div ng-controller="HelloWorldController2">
{{helloMessage}}
</div>
<script>
// $scope를 매개변수로 가지는 함수는 NG의 컨트롤러가 될 수 있다.
function HelloWorldController2($scope) {
$scope.helloMessage = "반갑습니다.";
}
</script>
<script src="../Scripts/angular.min.js"></script>
</body>
</html>
ng-controller 멤버 구성하기
