-
Angular JS 란?Web Programming/Angular JS 2020. 9. 10. 10:01반응형
구글에서 만든 자바스크립트 기반의 프론트엔드 웹 애플리케이션 프레임워크
이번 글에서는 AngularJS에 대해 다뤄보려 한다.
AngularJS는 SPA(Single Page Application : 단일 페이지 내에서 새로운 View를 동적으로 로드하여 사용) 프레임워크다. JavaScript 기반으로 MVVM(Model - View - View Model) 모델링이 가능하다.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>HTML에 다음과 같은 소스를 넣어 AngularJS 프레임워크를 사용할 수 있다.
왜 AngularJS인가?
- 유지보수가 쉽다. 개발속도가 빠르다
- 간편한 데이터 바인딩을 통해 뷰 업데이트가 쉽다.
- 코드 패턴이 동일해 개인간 차이에 따른 결과물의 차이가 적다.
- SPA 개발에 최적화되어 있다.
- 기능적인 분리가 명확해 협업이 쉽다.
구성요소
1. 지시자(Directive)
MVC의 View에 해당하는 요소이다. 특정 HTML 태그에 AngularJS의 기능을 적용시킬 때 Directive 지시자를 사용한다. 태그 내부에 'ng-*' 와 같은 지시자를 넣어서 사용한다.
<input type="text" ng-model="name">2. 필터(Filters)
데이터 출력에 있어서 원하는 데이터만을 필터링하여 사용할 수 있도록 해주는 기능이다.
3. 데이터 바인딩(Data Binding)
데이터들을 원하는 위치에 사용하기 편하게 바인딩 해준다.
4. 컨트롤러(Controller)
메인 컴포넌트로 ($scope)를 통해 view와 연결된다. controller를 통해서 scope에 model과 function을 정의해준다. 보통 기능별로 묶어서 사용하는 것이 좋다.
5. 서비스(Service)
컨트롤러간의 통신을 제어하거나, 접근 권한을 가진 객체를 리턴해서 컨트롤러에서 CRUD를 수행하는 등의 방식에 사용한다.
기본 구조
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <head> <title>Hello</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script> var app = angular.module("myApp",[]); app.controller("myCtrl", function($scope) { $scope.hello = "Hello World!"; }); </script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> {{hello}} </div> </body> </html>AngularJS를 사용한 Hello World이다. AngularJS의 가장 흔한 기본 구조이니 자세하게 분석해야할 필요가 있다. 내부구조를 자세하게 살펴보자.
<script>var app = angular.module("myApp",[]);</script>AngularJS에서 app 객체를 지정하고 myApp이라는 이름을 부여한다.
<script> app.controller("myCtrl", function($scope) { $scope.hello = "Hello World!"; }); </cript>app 객체의 controller를 지정하고 $scope로 변수 hello에 "Hello World!"를 저장한다.
<div ng-app="myApp" ng-controller="myCtrl"> {{hello}} </div>지시자를 통해 div에 AngularJS의 기능을 추가하고 {{hello}}로 HTML에서 "Hello World!"를 출력한다.
반응형'Web Programming > Angular JS' 카테고리의 다른 글
AngularJS Tutorial #1 Expressions (0) 2020.09.14 AngularJS에서 CRUD 구현하기 #3 (0) 2020.09.11 AngularJS에서 CRUD 구현하기 #2 (0) 2020.09.11 AngularJS에서 CRUD 구현하기 #1 (0) 2020.09.10 프론트엔드 프레임워크(Front-End Framework) 란? (1) 2020.09.10