Back Ground

Angular JS[1] - 소개 본문

Javascript/Angular

Angular JS[1] - 소개

Back 2016. 8. 22. 15:47

엥귤러


소개


AngularJS Introduction

 AngularJS는 자바스크립트 프레임워크(JavaScript Framework) 입니다. HTML 페이지에 <script> 태그를 추가하여 사용가능 합니다.


 AngularJS는 Directives를 붙인 HTML 요소의 확장입니다. Expressions HTML로 데이터를 연결 할 수 있습니다.








Directives


    • ng-app의 영향을 받아 바로 HTML과 결합하여 출력합니다.
    • ​ng-app가 AngularJS의 사용 여부를 결정하는 것입니다.
    • AngularJS는 레코드를 읽고 만들고 삭제하는 CRUD에 적합합니다.
    • ng-app 지시자는 AngularJS의 프로그램을 자동으로 부트스트랩 합니다.
      (bootstrap(UI)플러그인과 다른 의미)
    • ng-modle 지시자는 HTML 컨트롤러(Input, select, textarea)와 결합합니다.
    • ng-repeat 지시자는 영역을 반복 시킬때 사용합니다. (반복문의 개념)

    • 대문자가 시작되는 부분에 -사용하여 새로운 구간을 만들수 있습니다. (ex: i-Am-Boy)

      [출처] [AngularJS] 3.Directives|작성자 피셔




사용시 : ng 접두사





Expressions


    • AngularJS표현식은 또는 ng-bind를 이용하여 결합합니다.
    • 문자, 논리, 숫자 연산이 다 가능합니다.
    • JavaScript와 달리 HTML에 태그에서 쉽게 사용할 수 있습니다.
    • 객체는 JavaScript와 같습니다.

[출처] [AngularJS] 2. Expressions|작성자 피셔


사용시 : {{  5+5 }}







1. AngularJS is a JavaScript Framework

 AngularJS는 자바스크립트 파일로서 분배되고, 웹페이지의 script 태그에 추가하여 사용가능 합니다.


1
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>







2. AngularJS Extends HTML

 AngularJS는 ng-directives HTML의 확장입니다. 


 ng-app directive는 AngularJS 어플리케이션을 정의합니다.


 ng-model directive는 어플리케이션 데이터를 제어(input, select, textarea)하는 HTML 값을 연결합니다.


 ng-bind directive는 어플리케이션 데이터를 HTML 뷰에 연결합니다.




예제: 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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>
 







 AngularJS는 웹페이지가 로드될 때, 자동으로 시작됩니다.

 ng-app directive는 <div>요소가 AngularJS 어플리케이션의 주인임을 AngularJS에게 알려줍니다.

 ng-model은 어플리케이션 변수 name이 입력 필드의 값임을 연결합니다.

 ng-bind는 어플리케이션 변수 name의 <p> 요소의 innerHTML을 연결합니다.




3. AngularJS Directives
 위에서 보셨듯이, AngularJS directive는 ng 접두사를 통하여 HTML 요소를 나타냅니다.


1
2
3
4
5
6
7
<div ng-app="" ng-init="firstName='John'">
 
<p>The name is <span ng-bind="firstName"></span></p>
 
</div>
 
 



 * ng- 대신, data-ng- 를 사용하세요. HTML 5에서도 적용을 원하신다면.



 HTML5 적용 대체 예제:

1
2
3
4
5
6
<div data-ng-app="" data-ng-init="firstName='John'">
 
<p>The name is <span data-ng-bind="firstName"></span></p>
 
</div>
 








4. AngularJS Expressions
 AngularJS 식은 이중 괄호안에 작성되어 집니다: {{ expression }}
 
 AngularJS 식은 ng-bind와 마찬가지의 방법으로 데이터를 HTML에 연결합니다.

 ANgularJS는 식이 작성된 곳에 정확한 데이터를 출력하게 될 것 입니다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
 
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    </head>
 
    <body>
 
    <div ng-app="">
        <p>My first expression: {{ 5 + 5 }}</p>
    </div>
 
    </body>
</html>
 








5. AngularJS Applications

 AngularJS 모듈(Module)은 AngularJS 어플리케이션을 정의합니다. 


 AngularJS 컨트롤러(Controllers)는 AngularJS 어플리케이션을 제어합니다.


 ng-app 지시자는 어플리케이션을 정의하고, ng-controller 지시자는 제어부(controller)를 정의합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
 
<p>Try to change the names.</p>
 
<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>
 
</body>
</html>
 
 





* 위 강좌는 W3Schools 를 참고하여 작성하였습니다.

출처 http://palpit.tistory.com/97

'Javascript > Angular' 카테고리의 다른 글

꼭 알아야할 핵심 코드  (0) 2018.09.29
Angular - 원리  (0) 2018.09.15
Angular - 글로벌 환경  (0) 2018.09.15
Angular js [3] - 지시어  (0) 2016.08.25
Augular JS[2] - 살펴보기  (0) 2016.08.22
'Javascript/Angular' Related Articles more
Comments