작성일 : 2016-5-13(cpdev.tistory.com)- JHipster란? 말 그대로 Yeoman generator을 이용해서 spring boot + angularjs의 기본적인 기능을 갖춘 프로젝트를 생성하여 준다. 기본적인 인증처리라던가 restful api를 이용한 통신에 대한 내용들이 들어가 있으며, 거의 reference라고 봐도 무방할 정도의 소스를 제공한다. github : https://jhipster.github.io/ - Install JHipster를 설치하는 방법은 크게 3가지다 - local installation- vagrant-base "development box" - Docker 그중에 일반 유저에게 추천되는 설치 방법인 local installation 대해서 ..
Yeoman을 이용해서 기본 템플릿을 설정하고 빠르게 개발하는게 가능하다. 그중에 generator-gulp-angular를 이용하면 gulp 환경의 angularjs 프로젝트를 빠르게 만들수 있다. yo, gulp, bower 설치(필수사항)npm install -g yo gulp bower generator-gulp-angular 설치npm install -g generator-gulp-angular 설치 후 워크 디렉토리 생성 후 해당폴더에서 yo gulp-angular 그 뒤로 몇가지 기본 설정 사항을 선택 후 엔터키 입력만으로 기본환경 구성이 완료된다. 완료 후 아래 명령어로 gulp를 구동시켜 보면 angularjs로 구성된 화면이 brower-sync를 통해 실행되는것을 볼수 있다. gulp..
jquery를 사용한다면 간단하게 $("#id").focus() 하면 될 일이지만서도....... angularjs를 이용한다면, 디렉티브를 만들어서 element 조작을 통해서 포커스를 지정한다. -_-뭔가, 복잡스럽다. 아래 plnkr 소스를 참조.
angularjs에 directive라는 유용한 기능이 있다. directive가 생성되는 과정에는 compile과 link라는 과정을 거치게 되는데, compile에 경우 scope와는 상관없이 html에 대한 element 속성만 변경이 가능하다. 예를 들면 아래와 같이 반복되면서 파라미터 객체만 달리해야하는 html 태그가 있을때 사용하면 유용하다. 위와 같이 반복되는 html tag를 아래와 같이 디렉티브를 사용하여 쉽게 사용할수 있다. 자세한 샘플코드는 아래 plunker에서 확인하도록 하자. http://plnkr.co/edit/cJgfVG?p=info
angularjs typeahead는 ui-bootstrap에 포함되어 있습니다. 사용방법은 angularjs와 ui-bootstrap을 선언해주고input text에 uib-typeahead 선언해주면 사용할수 있습니다.module에서 ui-bootstrap 의 선언이 필요합니다. 제일 아래 jsbin에서 실제 코드를 테스트할수 있습니다. 다음 포스팅에서는 한글사용 문제와 해결방법에 대해서 포스팅 하도록 하겠습니다. html selected : {{selected}} jsangular.module("app",['ui.bootstrap']).controller("appCtrl",function($scope){ $scope.selected = ""; $scope.myData = [ {name:'abcd1'..