Programming/AngularJS

[AngularJS] (2-1) 기본 예제

Yejii 2021. 11. 20. 16:07

목차

(1) 기본 웹 서비스 개발환경 구축

(2-1) 기본 예제

(2-2) AngularJS 템플릿 만들고 적용하기

(3) 표현식 | {{data}}

(4) 모듈 | angular.module("appName", [])

(5) 지시자 | angular.directive(), ng-app, ng-init, ng-repeat

(6) 모델 | ng-model, ng-show, valid, dirty, touched

(7) Controller

(8) scope 객체 | scope, rootScope

(9) 필터 | uppercase, lowercase, orderBy, currency, date, filter, json, limitTo, number

(10) 서비스 | location, get, timeout, interval, app.service()

 


 

1. 프로젝트 생성 및 기본설정

마우스 우클릭 -> New -> Dynamic Web Project
Helloworld 프로젝트 생성
인코딩 설정 변경 및 viewport 설정

 

 

2. AngularJS 라이브러리 설정

> AngularJS 라이브러리 사용을 위해 CDN 주소를 알아온다

   *CDN : javascript 파일을 자신들의 서버에 올려놓고 외부에서 사용가능하도록 주소를 공개한 것

https://angularjs.org 

 

AngularJS — Superheroic JavaScript MVW Framework

document.createElement('tabs'); document.createElement('pane'); document.createElement('ng-pluralize'); <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6. chromium.org/developers/how-tos/chrome-frame-getting-started --> Yo

angularjs.org

angularjs 웹페이지 접속
드래그해서 복사
script tag안에 src속성으로 CDN 주소를 삽입
ng-app : angularjs를 적용한 앱이라는 것을 알려주는 지시자. ng-init : angularjs 라이브러리가 코드를 처리할 때 쓰는 변수

> Run으로 실행

방화벽 액세스 허용
str변수 출력 확인