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..
여기 입력하는 내용은 id 라는 이름의 모델로 지정을 하고반드시 입력을 해야 한다는 의미임 입력은 안하면 false뭔가 입력을 하면 true $valid 는 유효한지 여부 이걸 이용해서 뭔가 작업을 할수 있어 이렇게 코딩하면 뭔가를 입력하라고 알림을 줄수 있어 ( from 밑에 p 요소는 true / false 확인하려고 둔 것 ) 입력은 안하면 입력하라고 뜨고 뭔가 입력을 하면 사라짐 이렇게 ng-disabled 해주면 버튼이 비 활성화 가 됌 false 로 바꾸면 버튼이 동작함 false 인 상태로 가입을 누르면 뭔가 알림창이 뜨는데 이건 angular 가 해주는 것이 아니라 html5를 지원해주는 웹브라우저가 해주는 것임 이게 뜨면 혼돈이 오기 때문에 from 에 novalidate 해주면 저 알림..
step04_showHide 하나 만들어서 1234567891011121314151617Step04_showHide.html보이게 할지 여부 숨길지 여부 Colored by Color Scriptercs 이렇게 코딩해 주고 img 경로에 맞게 적당한 그림을 넣어 주면 isShow 가 false 이니 안보이고isHide 가 false 이니 보이는 것 isShow 가 true 이니 보이는 것이고isHide 가 true 이니 안보이는 것 isShow 가 true 이니 보이는 것이고isHide 가 false 이니 보이는 것.
Step03_class 만들어 bootstrap css와 js 파일들가져와서 옮겨놔 ng-class 라는 것이 있어 true 면 addclass, false 면 removeclass 가 되는 것임 지금은 true 니까 btn-primary 가 들어 간 것임 false 로 바꿔주면 primary 가 안들어 간 것을 확인 가능 이걸 isChecked로 바꿔 준다면?? checkbox 를 클릭함에 따라서 변경되게 할수 있음 특정 시점에서 addclass, removeclass 바꿔 줄수 있는 것임 Angular 에서 특정 클래스 조종을 하려면 ng-class 를 사용하는 것 ! Step03_class2 만들어 모듈 설정을 해주고 테이블에 컨트롤러 작성을 해줘 ajax 라고 받아온 데이터라고 가정한 것을 테이블..
Step02_controller2 만들고 input 요소에 뭔가를 적고 추가를 누르면 li에 추가가 되게 하고 싶어 msg 라는 모델을 만들고 빈 배열을 생성을 해 이렇게 해주면 페이지가 처음 생성되는 시점에 뿌려 질거야 이렇게 출력이 됌 ng-modle="msg" 해준것이 $scope.msg 라고 알려주는 것임 이렇게 하면 들어가긴 하는데 똑같은걸 여러번 넣으면 안들어감 그래서 object 로 바꿔 줄 것임 이렇게 object로 바꿔주면 여러번도 들어감 이제 모두 삭제하는 것을 해 볼거야 모두삭제 버튼을 누르면 빈 배열로 만들어 버리는 것임 입력창 초기화 하는 것도 추가 $scope.msg 는 컨트롤러 안에 모델을 가르킴 추가할걸 입력하고 추가 버튼을 누르면 input 창이 초기화 됌 모두 삭제를 누르..
Step02_controller 만들어 myApp과 Ctrl1 이라고 이름을 2개 지어 준것 이름지어준 것이니 마음대로 바꿔도 됨 이름지은 2개를 여기다가 각각 적어줘 하나의 모듈에 여러개의 컨트롤러를 둘수도 있고 각각의 컨트롤러를 따로 관리를 할 수가 있어 일단 하나를 만들어보고 하나 더 추가해 볼것임 scope는 Angular 에서 관리하는 변수임 이렇게 해서 출력을 해보면 이렇게 출력이 됌 ( 빨간색 코드는 Jquery 로 했을때의 예 ) name 라는 모델에다가 김구라를 넣은 것임 이렇게 컨트롤러를 하나 더 추가해 보면 이렇게 출력이 되는 것을 확인가능하다 myApp 이라는 모듈을 만들고 컨트롤러를 여러개 찍어낼수 있는 것이다. 이렇게 clicked 라는 함수를 만들어 주면 밑에서 clicked ..
Step01_click.html 만들어서 html 안에서 일어나는 일은 Angular 가 관리하겠다고 ng-app 을 붙여 준 것임 ng-click="msg='clicked'" 를 해주면 msg 라는 click 라는 문자열을 대입한다는 의미임 실행시켜서 보면 눌러보셈 버튼을 누르면 밑에 p요소에 clicked! 가 출력되는 것을 볼수 있음 이렇게 코딩 해주면 ng-init 는 count를 0으로 초기화 ng-click 는 클릭을 했을때 count 를 1씩 증가 시켜주는 것 실행 시켜보면 0으로 되어 있는 것을 볼수 있고 여러번 막 눌러보면 하나씩 증가 되는 것을 볼수 있다. jquery 라면 어떤 변수에다 넣고 그걸 참조를 해 str 이라는 변수에 hello 가 있는데 출력을 하고이후 시점에 str 이라..
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..
