[AngularJS ] 맛보기

  AngularJS
  - 자바스크립트 기반의 오픈 소스 프론트엔드 웹 애플리케이션프레임워크의 하나
  - client 측 MVC/MVVM 프레임워크로 모던 단일 페이지 웹 애플리케이션

  ng-app : AngularaJS 어플리케이션을 정의
  ng-model : HTML이 컨트롤하는 입력요소의 값을 어플리케이션 데이터로 지시자 ng-bind에 연결
  ng-bind : 어플리케이션 데이터를 연결해 HTML에 보여줌

  - AngularJS Directives(앵귤러JS 지시자)
  지시자 : HTML 속성 중 접두사로 ng를 사용하는 것이다
  ng-init 지시자는 AngularJS 어플리케이션 변수를 초기화한다.
  - html의 유효성검사는 요소에 지정된 속성이외의 다른 속성을 쓰려면
  data를 작성해야 오류가 없다
  - 위에 보이는 것처럼 ng-app이라 쓰면 오류가 나므로 오류를 피하고 싶다면
  data-ng-app라고 작성하면된다

  - AngularJS Expressins
  AngularJS 표현식은 중괄호 두개 안에 작성한다 {{ expression }}
  문자, 논리, 숫자 연산이 다 가능
  Javascript와 달리 HTML에 태그에서 쉽게 사용

  1. 표현식
  - {{ 표현식 }} AngularJS 표현식은 더블 중괄호 안에 작성
  - ng-bind = "표현식" : ng-bind속성의 값으로도 사용 가능
  - 표현식은 문자, 숫자, 연산자 및 변수를 포함 할 수 있다
  - AngularJS는 표현식을 사용하여 HTML에 데이터를 연결

  {{ 표현식 }} 방식
  < div ng-app="" >
    

표현식:{{ 5 + 5 }}

  < /div>

  ng-bind 방식
  < div ng-app="" >
    

표현식:

  < /div>

  2.CSS 속성값 변경
  < div ng-app="" ng-init="myCol='pink'">
    
  < /div>

  3. 숫자 연산
  {{표현식}}
  < div ng-app="" ng-init="quantity=5;dollor=1070">
    

{{ quantity }} 달러환전 : {{ quantity * dollor }}

  < /div>

  ng-bind 속성의 값 방식
  < div ng-app="" ng-init="quantity=5;dollor=1070">
    

 달러환전 : 

  < /div>

  4. 문자열
  {{표현식}}
  < div ng-app="" ng-init="firstName='서준';lastName='박'">
    

제 이름은 {{ lastName + firstName }} 입니다

  < /div>

  ng-bind 속성의 값 방식
  < div ng-app="" ng-init="firstName='서준';lastName='박'">
    

제 이름은입니다.

  < /div>

  5. 객체방식
  {{표현식}}
  < div ng-app="" ng-init="person={firstName: '서준', lastName: '박'}">
    

제 이름은 {{ person.firstName }} 입니다

  < /div>

  ng-bind 속성의 값 방식
  < div ng-app="" ng-init="person={firstName:'서준', lastName:'박'">
    

제 이름은입니다.

  < /div>

  6. 배열방식
  {{표현식}}
  < div ng-app="" ng-init="points=[1,15,19,2,40]">
    

세 번째 결과는 {{points[2]}}입니다.

  < /div>

  ng-bind 속성의 값 방식
  < div ng-app="" ng-init="points=[1,15,19,2,40]">
    

세 번째 결과는입니다.

  < /div>

 

참고사이트 

https://blog.naver.com/onlyloveciel/221230390078