AngularJS 설치
이클립스 환경을 JAVA EE 로 해두고
workspace 잡아줘
tomcat 서버 잡아주고
node.js와 port 충돌 날거니
port 바꿔주고
인코딩 설정
이거 4개 다 utf-8로 수정해줘
프로젝트 하나 만들어 두고
AngularJS 이제 받을것임
angularjs.org 들어가서
실무에서 아직은 옛날버전을 더 많이 쓰기에
옛날 버전인 밑에 걸 클릭
Branch : 1.2 x
Buile : zip
두개로 선택 해준다음
Download 눌러
이렇게 받아지면
압축 풀어보면 여러가지 자바스크립트 파일이 있어
js 폴더 하나 만들어서
이거 두개 붙여넣기 해줘
Hello.html 파일 하나 만들어서
이렇게 코딩해줘
웹 브라우저로 출력되게 이렇게 바꿔 준 후에
이렇게 출련되면 성공~
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .box{ width: 100px; height: 100px; background-color: yellow; } </style> <!-- angular js 로딩하기 --> <script src="js/angular.js"></script> </head> <body ng-app> <h3>Hello Angular js</h3> <p>10 + 10 = <strong>{{10+10}}</strong></p> <input type="text" ng-model="msg" /> <p>{{msg}}</p> <input type="checkbox" ng-model="isChecked"/> <p>{{isChecked}}</p> <div class="box" ng-show="isChecked"></div> </body> </html> | cs |
이렇게 코딩해주면
입력한 것이 출력 되고
체크 여부에 따라 div가 나왔다 안나왔다 하는 것을 확인 할 수 있어
여기까지가 Angular 의 HelloWorld 임
'FrameWork > AngularJS' 카테고리의 다른 글
| Step04_showHide (0) | 2017.08.25 |
|---|---|
| Step03_class (1) | 2017.08.25 |
| Step02_controller2 (0) | 2017.08.25 |
| Step02_controller (0) | 2017.08.25 |
| Step01_click (0) | 2017.08.25 |
AngularJS 설치
이클립스 환경을 JAVA EE 로 해두고
workspace 잡아줘
tomcat 서버 잡아주고
node.js와 port 충돌 날거니
port 바꿔주고
인코딩 설정
이거 4개 다 utf-8로 수정해줘
프로젝트 하나 만들어 두고
AngularJS 이제 받을것임
angularjs.org 들어가서
실무에서 아직은 옛날버전을 더 많이 쓰기에
옛날 버전인 밑에 걸 클릭
Branch : 1.2 x
Buile : zip
두개로 선택 해준다음
Download 눌러
이렇게 받아지면
압축 풀어보면 여러가지 자바스크립트 파일이 있어
js 폴더 하나 만들어서
이거 두개 붙여넣기 해줘
Hello.html 파일 하나 만들어서
이렇게 코딩해줘
웹 브라우저로 출력되게 이렇게 바꿔 준 후에
이렇게 출련되면 성공~
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .box{ width: 100px; height: 100px; background-color: yellow; } </style> <!-- angular js 로딩하기 --> <script src="js/angular.js"></script> </head> <body ng-app> <h3>Hello Angular js</h3> <p>10 + 10 = <strong>{{10+10}}</strong></p> <input type="text" ng-model="msg" /> <p>{{msg}}</p> <input type="checkbox" ng-model="isChecked"/> <p>{{isChecked}}</p> <div class="box" ng-show="isChecked"></div> </body> </html> | cs |
이렇게 코딩해주면
입력한 것이 출력 되고
체크 여부에 따라 div가 나왔다 안나왔다 하는 것을 확인 할 수 있어
여기까지가 Angular 의 HelloWorld 임
'FrameWork > AngularJS' 카테고리의 다른 글
| Step04_showHide (0) | 2017.08.25 |
|---|---|
| Step03_class (1) | 2017.08.25 |
| Step02_controller2 (0) | 2017.08.25 |
| Step02_controller (0) | 2017.08.25 |
| Step01_click (0) | 2017.08.25 |
