AngularJS란?
AngularJS는 구글에서 만든 자바스크립트 프레임워크로, 2009년에 발표되었고
AngularJS는 자바스크립트로 만든 client 측 MVC/MVVM 프레임워크로 모던 단일 페이지 웹 애플리케이션 개발의 정수이다.
자바스크립트 프레임워크 javascript framework
AngularJS 특징
자바스크립트로 작성할 코드량을 줄여준다.
- Dom을 선택하고 조작하는 자바스크립트 코드를 작성하지 않아도 된다.
양방향 데이터 바인딩이 가능합니다.
- 모델의 데이터와 뷰 데이터가 양방향 데이터 바인딩이 되어, 모델이 바뀌면 뷰 데이터도 같이 변경된다.
HTML, CSS, 로직 등의 개발 영역을 명확하게 분리해준다.
- 기존 자바스크립트에서는 Dom 조작과 이벤트 처리를 위해 HTML을 잘 알고 있어야 했으나, AngularJS는 뷰 코드와 로직 코드가 명확히 분리된다.
AngularJS 주요개념
Model(모델)
- 단순 자바스크립트 객체로 된 데이터
- 보통 JSON으로 표현되는 애플리케이션의 특정한 데이터 구조를 말합니다.
- json 데이터를 jQuery의 $.ajax 메서드를 래핑한 Angular의 $http를 통해 XHR(XMLHttp Request)로 서버에서 가져오거나 페이지를 로딩할 때 코드에서 직접 (데이터베이스에서) 읽어오도록 할 수 있다.
그리고 모델을 변경한 다음 다시 반영할 수도 있습니다.
View(뷰)
- 템플릿과 모델이 합쳐져서 보여지는 화면 (Dom구조로 되어있다.)
- MVC 프레임워크를 사용한다면 뷰를 갱신할 모델 데이터를 내려받은 뒤 HTML에서 해당 데이터를 보여줄 것이다.
Controller(컨트롤러)
- 자바스크립트로 된 로직 영역
- 컨트롤러는 서버에서 직접 뷰로 접근하는 일종의 중간 통로로서 필요할 때마다 서버와 클라이언트 통신으로 데이터를 변경한다.
Scope(스코프)$scope
- 뷰와 컨트롤러 사이에서 데이터를 연결해주는 역할 뷰------>(스코프)----->컨트롤러
- 모델과 뷰를 감시하고, 컨트롤러에 이벤트를 보내는 역할
$ scope 개체로 컨트롤러를 호출
컨트롤러를 만들 때 $scope객체를 인수로 전달합니다.
scope는 controller를 적용한 태그 내에서 사용할 변수나 함수를 저장해 놓을 수 있는 객체입니다.
컨트롤러와 템플릿을 연결하고 기본적으로 컨트롤러와 템플릿을 연결하고 모델을 보광해서 양방향 바인딩을 할 수 있게 하는 객체다.
. $scope는 DOM의 현재 요소/영역을 참조하며(this 와는 다르다), 요소 안의 데이터와 로직을 주시하는 관찰 기능을 가지고 있다.
Directive(디렉티브)
- html을 확장하는 AngularJS의 지시어
- ex) ng-app, ng-controller, ng-click 등..
Data Binding(데이터 바인딩)
- 모델과 뷰의 데이터를 실시간으로 연동
Module(모듈)
- 모든 자바스크립트 기능들이 ng-app="모듈명"을 시작으로 모듈 단위로 관리된다.
- 컨트롤러, 서비스, 필터 등을 포함하며, 응용프로그램의 서로 다른 기능을 구성하는 컨테이너이다.
Service(서비스)
- 특정 기능을 담당하는 객체
- 싱글톤 객체로 인스턴스가 하나만 존재합니다.
<h1>{{hex}}</h1>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
</script>
module
어플리케이션을 정의한다
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
var app = angular.module("myApp", []);
모듈 정의의 [] 매개 변수를 사용하여 종속 모듈을 정의 할 수 있습니다.
[] 매개 변수가 없으면 새 모듈을 작성 하지 않고 기존 모듈을 검색 합니다.
controller
어플리케이션을 제어한다. 항상 모듈에 속함
A controller is a JavaScript Object, created by a standard JavaScript object constructor
Directive
. directive함수를 사용하여 새 지시문을 만듭니다.
디렉티브의 이름을 지정할 때는 카멜 케이스 이름을 사용해야 w3TestDirective하지만
호출할 때는 -구분된 이름을 사용해야 합니다 w3-test-directive.
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "<h1>Made by a directive!</h1>" //template-----HTML file
};
});
</script>
</body><div w3-test-directive></div>
<div class="w3-test-directive"></div>
restrict : "C",
template : "<h1>Made by a directive!</h1>"
<!-- directive: w3-test-directive -->
return {
restrict : "M",
replace : true,
template : "<h1>Made by a directive!</h1>"
};
//The legal restrict values are:
//E for Element name ()
//A for Attribute (HTML 요소 )
//C for Class (클래스)
//M for Comment (주적)
//EA 기본값에 모든 지시문 호출 가능
//By default the value is EA, meaning that both Element names and attribute names can invoke the directive.
AngularJS Filters
AngularJS provides filters to transform data:
currency: Format a number to a currency format.
date: Format a date to a specified format.
filter: Select a subset of items from an array.
json: Format an object to a JSON string.
limitTo: Limits an array/string, into a specified number of elements/characters.
lowercase: Format a string to lower case.
number: Format a number to a string.
orderBy: Orders an array by an expression.
uppercase: Format a string to upper case.
<p>The name is {{ lastName | uppercase }}</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter : test">
{{ x }}
</li>
</ul>
$location
$location서비스에는 현재 웹 페이지의 위치에 대한 정보를 반환하는 메서드가 있습니다.
<h3>{{myUrl}}</h3>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
$http
.get 메서드는 $ http 서비스의 바로 가기 메서드입니다. 몇 가지 바로 가기 방법이 있습니다.
.delete()
.get()
.head()
.jsonp()
.patch()
.post()
.put()
위의 메서드는 모두 $ http 서비스를 호출하는 바로 가기입니다.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.content = response.data;
$scope.statuscode = response.status;
$scope.statustext = response.statusText;
});
});
.config 요청을 생성하는 데 사용되는 개체입니다.
.data 서버에서 응답을 전달하는 문자열 또는 객체.
.headers 헤더 정보를 얻기 위해 사용하는 함수.
.status HTTP 상태를 정의하는 숫자.
.statusText HTTP 상태를 정의하는 문자열.
Directive(디렉티브)
ng-app
AngularJs를 정의 예)) <div ng-app=""> 자동 초기화
Angular에게 body 요소가 Anuglar 어플리케이션에 포함되어 있다고 알려준다. 즉, body 요소 내의 모든 것을 Angular 어플리케이션이 관리하도록 한다.
ng-model
html input, select, textarea와 같은 입력 요소(UI, View)에 값을 갱신하며, 해당 변수(Model)의 값도 변한다.
반대로 data 변수 ( Model) 값이 바뀌면, 화면 (View)도 바뀐다.
바로바로 갱신
애플리케이션 데이터에 대한 유형 유효성 검사를 제공합니다 (번호, 이메일, 필수).
애플리케이션 데이터의 상태를 제공합니다 (유효하지 않음, 더티, 터치됨, 오류).
HTML 요소에 대한 CSS 클래스를 제공합니다.
HTML 요소를 HTML 양식에 바인딩합니다.
뷰를 변경하면 모델과 컨트롤러가 업데이트됩니다.
HTML (입력, 선택한 텍스트 영역)의 값을 결합한다.
애플리케이션 변수의 입력 필드의 값으로 이름 결합
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine
ng-bind
html elements 내용 값을 바꾸는 데 사용. (inner HTML) 나타내는 부분
{{ expression }}. ng-bind="expression". 같은 표현식
ng-controller
이 디렉티브를 사용하면 해당 요소의 스코프를 컨트롤러에 할당한다.
ng-init
초기값 설정 일반적으로 ng-init를 사용하지 않습니다. 대신 컨트롤러 또는 모듈을 사용합니다.
ng-repeat
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
ng-show
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>
ng-show속성 의 표현식이을 반환 하는 경우에만 표시됩니다 true.
ng-그외
ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste