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)
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Directive와 Data Binding</title>
</head>
<body>
텍스트 박스에 글자를 입력해보세요~.<br />
<input type="text" name="name" value="" ng-model="name" />
<h1>{{ name }}</h1>
</body>
See the Pen 앵귤러 데이터 바인딩 ng-model by jaeheekim (@jaehee) on CodePen.
ng-repeat (for~in 반복문과 유사)
<body ng-app="">
<div ng-init="names=['제이쿼리', 'react', 'AngularJS']">
<h3>루프 출력</h3>
<ul>
<li>{{names[0]}}</li>
<li>{{names[1]}}</li>
<li>{{names[2]}} </li><br/>
<!-- for ~ in 반복문과 비슷 -->
<li ng-repeat="name in names">{{name}}</li>
</ul>
</div>
</body>See the Pen AngularJS 반복문(Loof) by jaeheekim (@jaehee) on CodePen.
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>
See the Pen Angular Controller by jaeheekim (@jaehee) on CodePen.
ng-controller 멤버 구성하기
//[1] 모듈
window.app = angular.module('ngDemo', [ /* 의존성 */ ]);
//[2] 컨트롤러
window.app.controller('ngController', function($scope) {
//[a] 필드/속성/멤버변수
$scope.sayMessage = "안녕하세요.";
//[b] 배열
$scope.names = ['jQuery', 'Java', 'Sass', 'CSS3'];
//[c] 개체 리터럴
$scope.objData = {
text: "AngularJS",
currentDate: new Date(),
hour: 10,
location: {
address: '한국',
city: '서울',
imageUrl: "http://www.redplus.net/Portals/0/dotnetkorealogo.gif"
}
};
});See the Pen ng-controller 의 멤버들 by jaeheekim (@jaehee) on CodePen.
'Web Tech > AngularJS' 카테고리의 다른 글
| angularJS factory & form validation (0) | 2015.11.03 |
|---|---|
| AngularJS 이벤트 기초 알아보기 (0) | 2015.11.02 |
| AngularJS Directive (0) | 2015.11.02 |
| AngularJS module (0) | 2015.10.26 |
| AngularJS 란 무엇인가? (0) | 2015.10.24 |
