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

목차

(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

angularjs 웹페이지 접속

드래그해서 복사

script tag안에 src속성으로 CDN 주소를 삽입

ng-app : angularjs를 적용한 앱이라는 것을 알려주는 지시자. ng-init : angularjs 라이브러리가 코드를 처리할 때 쓰는 변수

> Run으로 실행

방화벽 액세스 허용

str변수 출력 확인