Step11_include.html만들어클라이언트에게 출력 하는 시점에는 모든 컨텐츠가 다 완성되어 있어( header, footer 같은 것들이 )서버에서 완성된 채로 응답을 해클라이언트는 받은 거 그대로 쓰면돼 Angular 에선 이 조각 파일들을 서버에 요청을 해 ng-include 라는게 있어조각 파일이라는 의미에서 fragment 폴더 하나 만들어header, footer 만들어 문자열을 넣어야 하기에 싱글포테이션으로 감싸합치는 작업을 서버에서 하느냐일단 미완성된 형대로 응답을 한 다음에 이걸보고 anguler 가 요청을해서 끼워넣느냐 차이야요청이 총 4번 들어가 html 열고 자바스크립트headerfooter include 될 요청을 끼워 넣는거야 왜 이런짓을 하느냐?웹개발 할때 프론트 엔드 ..
FrameWork/AngularJS
Step10_jsonp.html만들어실행시키면 서버로 부터 특정 컨텐츠를 응답받은 웹브라우저야 서브라임에서이거 찾아봐 우클릭해서 오픈인 브라우저실행시켜보면 주소가 좀 달라서버 입장에서 저 두 주소를 완전 다르게 취급해 위에껀 서버입장에서 클라이언트가 맞아밑에껀 우리가 돌려놓은 서버와 아무런 연관이 없어 그냥 만들어놓은 하나의 html 페이지인것 위에껀 서버에 ajax 요청을 하면 응답을 하는데 밑에껀 응답을 안해 보안이슈 때문에 구분해서 응답해 밑에서 위로 요청을 하는 걸 cross domain 이라고해 크로스 도메인 요청을 서버에서 편법으로 제공을 해줘야 할때가 있어 서버에서 jsonp 방식으로 응답할 준비를 해놓으면 응답을 해 크로스도메인 요청이라풀 url 주소 써준 것 그리고 여기에 추가로 뭔가 넘..
angular 가 관리하고 있는어떤객체($scope)를 함수의 첫번째 인자로 넣어달라는 의미엄밀히 말하면 서비스라고 볼수 있어두번째 인자로 http 넣어 $http 는 Jquery 에서 ajax 처리 한거를Angular 에선 $http 를 이용해서 구현함 모듈과 컨트롤러 구현 얘를 눌렀을때 서버에 Ajax 전송을 할거야 $http 는 함수에 두번째 인자로 전달된 서비스야 전송이 성공했을때 실행되는 함수, 실패했을때 실행되는 함수를 등록을 하는거야이렇게 구성을해봐 이거를 처리할 httpTest.jsp 페이지 만들어 뭔가 ok가 나왔어 서버엔 null 이 들어가 있긴한데 jsp 페이지가 요청된것은 확인할수 있어 success 가 뜨는걸 봐서는 뭔가가 전송을 하고 있는거야 헤더정보 추가 여기 코드 바꿔주고 테..
123456789101112131415161718192021Step08_switch.html 하나 두울 세엣what : {{what}} Colored by Color Scriptercs 문서객체를 다 만들어 놓지 않고 문서객체를 만들거나 없애거나 하는 것임문서객체가 하나밖에 없어동적으로 만들거나 없애거나 하는 것임
event 1 123456789101112131415161718192021222324252627282930Step07_event.html .box{ width:100px; height:100px; background-color:yellow; }클릭!클릭!mouse 이벤트{{msg}}Colored by Color Scriptercs ng-clickng-focusng-keydownng-keyupng-blurng-mousedownng-mouseupng-mousemoveng-mouseenterng-mouseleave 버튼을 클릭하면 p 요소안에 msg 에 버튼 클릭이 출력 input 요소에 클릭하면 focus 적용 input 요소 클릭했다가 다른데 클릭해보면 blur 가 적용되는 것을 확인가능 마우스이벤트도 확..
애니메이션을 넣는 방법 https://daneden.github.io/animate.css/ 여기 들어가서 css 파일 다운 받은 다음에 css 폴더 안에 넣어준 다음에 angularJS 받은 파일에 가보면 angular-animate.js 파일이 존재 한다 이것도 가져와서 ngAnimate 모듈을 주입 해 주고 AngularJS 를 사용하겠다고 ng-app="myApp" 해주고 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748Step06_animate.html .fade-effect.ng-enter{ animation: fadeIn 1s; } .myImg.ng-enter{ animation: bo..
