AngularJS 기본 문법
1. AngularJS 시작하기
AngularJS는 Google에서 개발한 JavaScript 프레임워크로, 동적인 웹 애플리케이션을 쉽게 구축할 수 있도록 도와줍니다. AngularJS를 사용하려면 HTML 파일에 AngularJS 라이브러리를 추가해야 합니다.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
그리고 AngularJS 애플리케이션을 정의하기 위해 ng-app 디렉티브를 사용하여 애플리케이션의 루트를 설정합니다.
<body ng-app="myApp">
</body>
2. 데이터 바인딩
AngularJS에서 데이터 바인딩은 {{ }}를 사용하여 데이터를 화면에 렌더링합니다. AngularJS는 양방향 데이터 바인딩을 제공하여 모델과 뷰 간의 데이터를 실시간으로 동기화할 수 있습니다.
<div ng-app="myApp">
<div ng-controller="myCtrl">
<p>이름: {{ name }}</p>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = '철수';
});
</script>
이 예제에서 {{ name }}은 myCtrl 컨트롤러의 name 모델과 연결되어, 실시간으로 값을 화면에 표시합니다.
3. ng-model
ng-model 디렉티브는 폼 입력 요소와 AngularJS 모델 간의 양방향 데이터 바인딩을 제공합니다. 사용자가 입력한 값은 즉시 AngularJS 모델에 반영됩니다.
<div ng-app="myApp">
<div ng-controller="myCtrl">
<p>이름: {{ name }}</p>
<input type="text" ng-model="name" />
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = '영희';
});
</script>
입력 필드에서 값을 입력하면 name 모델이 즉시 업데이트되고, 페이지에 실시간으로 반영됩니다.
4. ng-repeat
ng-repeat 디렉티브는 배열이나 객체를 순회하면서 여러 요소를 반복적으로 렌더링할 때 사용됩니다.
<div ng-app="myApp">
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.items = ['사과', '바나나', '체리'];
});
</script>
이 코드에서는 ng-repeat을 사용하여 items 배열의 각 항목을 반복하여 리스트에 표시합니다.
5. 컨트롤러 (Controller)
AngularJS에서 컨트롤러는 애플리케이션의 데이터와 비즈니스 로직을 관리하는 데 사용됩니다. 컨트롤러는 $scope 객체를 통해 데이터와 뷰를 연결합니다.
<div ng-app="myApp">
<div ng-controller="myCtrl">
<p>나이: {{ age }}</p>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.age = 30;
});
</script>
이 코드에서 myCtrl 컨트롤러는 age 데이터를 $scope를 통해 뷰에 전달합니다.
6. 필터 (Filters)
AngularJS는 데이터를 포맷하거나 변환하는 데 사용되는 여러 필터를 제공합니다. 필터는 {{ }} 내에서 파이프(|) 문자를 사용하여 적용할 수 있습니다.
<div ng-app="myApp">
<div ng-controller="myCtrl">
<p>소문자: {{ message | lowercase }}</p>
<p>대문자: {{ message | uppercase }}</p>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = 'Hello AngularJS!';
});
</script>
이 예제에서는 lowercase와 uppercase 필터를 사용하여 문자열을 소문자와 대문자로 변환합니다.
7. ng-show와 ng-hide
ng-show와 ng-hide 디렉티브는 특정 조건에 따라 요소를 보이거나 숨길 수 있습니다. 조건이 참이면 ng-show는 요소를 표시하고, ng-hide는 요소를 숨깁니다.
<div ng-app="myApp">
<div ng-controller="myCtrl">
<p ng-show="isVisible">이 메시지는 보입니다.</p>
<p ng-hide="isVisible">이 메시지는 숨겨집니다.</p>
<button ng-click="toggleVisibility()">토글하기</button>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.isVisible = true;
$scope.toggleVisibility = function() {
$scope.isVisible = !$scope.isVisible;
};
});
</script>
버튼을 클릭하면 toggleVisibility 함수가 호출되어 isVisible 값이 반전되며, 이에 따라 메시지가 표시되거나 숨겨집니다.
8. 서비스 (Services)
AngularJS 서비스는 재사용 가능한 비즈니스 로직을 애플리케이션 전체에서 공유할 수 있도록 도와줍니다. 예를 들어, 데이터를 처리하는 로직을 서비스로 만들어 여러 컨트롤러에서 사용할 수 있습니다.
<div ng-app="myApp">
<div ng-controller="myCtrl">
<p>숫자의 제곱: {{ squareNumber(5) }}</p>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.service('MathService', function() {
this.square = function(num) {
return num * num;
};
});
app.controller('myCtrl', function($scope, MathService) {
$scope.squareNumber = function(num) {
return MathService.square(num);
};
});
</script>
이 예제에서 MathService는 숫자의 제곱을 계산하는 서비스를 정의하고, 컨트롤러에서 이를 사용하여 제곱 값을 계산합니다.
9. 의존성 주입 (Dependency Injection)
AngularJS는 의존성 주입을 사용하여 컨트롤러, 서비스, 필터 등의 의존성을 자동으로 관리합니다. 컨트롤러에 서비스를 전달할 때, AngularJS가 자동으로 해당 서비스를 주입해줍니다.
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get('https://api.example.com/data')
.then(function(response) {
$scope.data = response.data;
});
});
</script>
위 예제에서는 $http 서비스를 컨트롤러에 주입하여 Ajax 요청을 보낼 수 있습니다.
10. $http 서비스
$http 서비스는 AngularJS에서 서버와의 HTTP 통신을 처리하는 데 사용됩니다. GET, POST, PUT, DELETE 등의 HTTP 요청을 쉽게 보낼 수 있습니다.
<div ng-app="myApp">
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="post in posts">{{ post.title }}</li>
</ul>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get('https://jsonplaceholder.typicode.com/posts')
.then(function(response) {
$scope.posts = response.data;
});
});
</script>
이 예제에서는 $http.get 메서드를 사용하여 외부 API에서 데이터를 가져오고, 해당 데이터를 화면에 표시합니다.