본문 바로가기

JavaScript/angularJS

1. AngularJS 기본 개발 환경

AngularJS 공식 사이트 

https://docs.angularjs.org/guide/concepts


Directives : 확장된 html 커스텀 속성과 엘리먼트로 구성된 것.

테그에 있는 속성을 직접 정의해서 사용하는 것.


Expressions : 자바스크립트에서는 변수와 함수를 만들 수 있는데, html파일에서 자바스크립트에 있는 데이터를 출력할 때 사용하는 기법.


hello {{ name}}!

{{ name }} 이라는 변수안에 world라는 변수가 저장되어있다면 hello world!라는 문자열이 출력되게 하는 것.


Module : 디렉티브, 컨트롤러, 서비스라는 개념들이 있는데 이런것드를 하나로 모아놓은 것을 모듈이라고 한다.

의존관계가 있을 때 서로 주입해서 사용할 수 있다.


Controller : 비즈니스로직을 구현 할 때만 사용.

* HTML DOM을 사용할때는 컨트롤러를 사용하면 안된다.

* input 필드를 사용 할 때도 사용하면 안된다.

* 출력값을 변경할 때도 사용하면 안된다.


오직 view의 business 로직을 사용할 때만 사용한다.


Service : 재 사용을 할 수 있는 비즈니스 로직을 Service라고 한다.

AngularJS에서는 싱글톤으로 만들어진다.



https://plnkr.co/edit/?p=preview

간단한 코드를 작성하고 공유할 수 있는 웹 어플리케이션.




상단 로고 우측 Editor를 눌러서 소스를 작성할 수 있다



소스를 작성 후 우측의 Live Preview를 클릭하면 미리보기를 할 수 있다

.



Find and external libraries를 클릭해서 필요한 라이브러리를 추가할 수 있다.

angular, bootstrap 라이브러리를 검색한 후 추가를 하면 해당 라이브러리가 추가가 된다.



 
myName = "Ahn"
print myName