AngularJS
AngularJS는 자바스크립트 프레임워크입니다.
즉 자바스크립트로 작성된 라이브러리입니다.
지시어로 HTML 속성들을 확장하는 역할을 합니다.
표현식인 {{}}으로 데이터를 HTML로 바인딩을 합니다.
이를 이용하기 위해서는 <script> 태그로 명시해주면 됩니다.
웹페이지가 처음 로드가 될 때 자동으로 적용이 됩니다.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
를 추가해줍시다.
AngularJS의 HTML 확장
HTML의 확장 기능을 가진다고 했습니다.
-
ng-app 은 응용프로그램을 정의해줍니다.
-
ng-model 은 HTML 컨트롤 값을 응용프로그램 데이터로 결합합니다.
-
ng-bind는 view의 역할을 합니다.
간단한 예를 봅시다.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
=>ng-app은 <div>가 AngularJs 응용프로그램의 오너라는 뜻입니다. 즉 쓰겠다?? 라는 표현이겠죠.
=>ng-model은 응용프로그램 변수 name으로 입력 필드의 값을 바인드한다는 뜻입니다.
=>ng-bind는 바인드한 name을 보여주는(view)것을 뜻합니다. 즉 <p>의 내용을 바인드합니다.
그리고 ng-init을 쓰면 응용프로그램으로 변수 값을 초기화 시켜줍니다.
예를 들어
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
=> ng-init에 firstName변수를 John으로 초기화 시켜주고 ng-bind로 firstName을 보여줄 수 있겠죠.
대체용어로 ng앞에 data를 추가할 수 있습니다. data-ng-app 등등...
AngularJS의 표현식
표현식은 이중괄호인 {{}}을 써줍니다.
데이터를 출력해주는 역할을 하죠.
예를 들어
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
=>{{ 5 + 5 }} 은 10을 계산하여 데이터를 출력합니다.
즉 ng-bind와 동일합니다.
아까 위에서 했던 예에서 바꿔주면
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
=>ng-bind을 표현식으로 나타낼수 있겠습니다.
AngularJS 응용프로그램
여기엔 AngularJS 모듈이 있고 컨트롤러가 있습니다.
컨트롤러가 백앤드쪽에 있지만 프론트앤드에도 있습니다.
모듈은 어플리케이션들을 정의하고 컨트롤러는 제어를 하게되는거죠.
즉 ng-app 과 ng-controller
예를 들어
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
=>ng-app으로 myApp을 정의해주고 ng-controller로 myCtrl이란 컨트롤러로 지정해줍니다.
=>입력 필드는 마찬가지로 ng-model로 변수를 바인드해주고 표현식으로 출력해줍니다.
=> 여기서 모듈 정의는 var app = angular.module('myApp', []); 으로 해줍니다.
=> 이에 맞는 컨트롤러는 이를 제어하게 됩니다.
=> 즉 app.controller으로 지정된 모듈을 제어하게 됩니다.
=> 위 예에서 바인드한 firstName과 lastName에 John 과 Doe가 들어가서 출력이 먼저 되겟죠.
간단하게 AngularJS의 소개를 마쳤습니다.
'웹 > AngularJS' 카테고리의 다른 글
| AngularJS 모델 (0) | 2019.02.20 |
|---|---|
| AngularJS directives (0) | 2019.02.19 |
| AngularJS 모듈 (0) | 2019.02.18 |
| AngularJS 표현식 (0) | 2019.02.16 |
