AngularJS에서 ng-controller를 생성하고 $scope를 사용하여 화면에 표시하는 예제를 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
div 태그에 ng-app 속성을 만들고 "myApp" 으로 정의하고 ng-controller 속성을 만들고 "myCtrl"이라고 정의한다.
<div ng-app="myApp" ng-controller="myCtrl">
<script> 영역에서 div 태그에 정의한 "myApp" 으로 app을 생성하고 "myCtrl"로 controller를 생성한다. 그리고 나면 controller 내에서 $scope 에 값을 할당하면 화면 요소에 바로 바인딩되어 표시된다. 참고로 $scope는 정의된 controller 내에서 화면 요소와 연계된 유효한 저장공간으로 생각할 수 있다.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "HanGil";
$scope.lastName = "Joo";
...(중략)...
});
예제의 전체 코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "HanGil"
$scope.lastName = "Joo";
$scope.fullName = function() {
return $scope.lastName + " " + $scope.firstName;
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Last Name : <input type="text" ng-model="lastName"><br>
First Name : <input type="text" ng-model="firstName"><br>
Full Name : {{fullName()}}
</div>
<hr>
</body>
</html>
<script> 코드는 아래와 같이 별도 파일로 분리가 가능하다. AngularJS에서는 기능별로 파일을 분리하여 작업할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="nameController.js"></script>
</head>
... (이하 위 코드와 동일하여 생략)...
nameController.js 파일
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.firstName = "Hangil",
$scope.lastName = "Joo",
$scope.fullName = function() {
return $scope.lastName + " " + $scope.firstName;
}
});
ng-controller에서 $scope로 정의한 항목에 값을 할당하면 아래와 같이 화면에 표시된다.
입력항목에 값을 입력하면 바로 Full Name에 표시가 된다.
'■ Front-End ■ > AngularJs' 카테고리의 다른 글
| [AngularJS] 출력된 목록에 필터(Filter)를 적용해보자. (0) | 2023.02.22 |
|---|---|
| [AngularJS] 표시되는 데이터를 정렬(orderBy) 해보자. (0) | 2023.02.22 |
| [AngularJS] ng-repeat로 반복해서 표시해 보자. #2 (0) | 2023.02.22 |
| [AngularJS] ng-repeat로 반복해서 표시해 보자. #1 (0) | 2023.02.22 |
| [AngularJS] 앱(ng-app)과 컨트롤러(ng-controller) 생성 (0) | 2023.02.22 |
댓글