시작하세요 AngularJS 고재도@ 오픈커뮤니티
고재도 표즌프레임워크오픈커미터리더 4기 GDG Korea WebTech 운영자시작하세요 AngularJS 프로그래밍집필 kt 소프트웨어개발센터, IoT 플랫폼개발 haibane84@gmail.com https://plus.google.com/+jeadoko/
우리가만들수있는것 What can we built with AngularJS?
Gmail
Any.Do Chrome App
Mobile Web App
Web App Single Page Web App Chrome App Mobile Web App Anyting on Browsers
Web App 개발시고려할점
CRUD Apps 필수기능제공을통한어플리케이션개발의단순화 An overview of AngularJS Google 이만든웹어플리케이션을위한 Structural Framework 양방향데이터바인딩 MVW Template Directive 를통한컴포넌트재사용의존성주입 (DI) E2E 테스팅및 Mocks Router RESTful Wrapper Service Promise/Deferred
An overview of AngularJS 양방향데이터바인딩 MVW Template Directive 를통한컴포넌트재사용의존성주입 (DI) E2E 테스팅및 Mocks Router RESTful Wrapper Service Promise/Deferred
템플릿 표현식 + 커스텀속성 / 태그
표현식 예제 {{ expression }} 특징 {{ 1+2 }} {{ 3*10 currency }} {{ user.name }} Scope 객체기준으로속성들을검사한다. (window 로부터가아니라 ) Null 에러를무시한다. ({{a.b.c}} vs {{((a {}).b {}).c}}) 조건문은올수없다. 필터들과함께쓰인다. ({{ 3*10 currency }}) Angular 가제대로실행되지않을경우
반복적인데이터표현을위한템플릿 ng-repeat <script type="text/javascript"> function samplectrl($scope){ $scope.customerlist = [ {id: 'id1', name:' 가인 ', age:25}, {id: 'id2', name:' 두나 ', age:28}, {id: 'id3', name:' 연아 ', age:22} ]; } </script> <div ng-controller="samplectrl"> 고객목록 <ul> <li ng-repeat="customer in customerlist track by customer.id"> [{{$index + 1}}] 고객이름 : {{customer.name}}, 고객나이 : {{customer.age}} </li> </ul> </div>
조건적인데이터표현을위한템플릿 ng-switch/ng-if/ng-show/ng-hide <input type="radio" ng-model="color" value="red"> 빨간색 <br> <input type="radio" ng-model="color" value="green"> 녹색 <br> <div ng-switch="color"> <div ng-switch-when="red" class="box red"></div> <div ng-switch-when="green" class="box green"></div> <div ng-switch-default="" class="box black"></div> </div> <div> 약관에동의 : <input type="checkbox" ng-model="checked" ng-init="checked=false"> <br> 동의하면다음으로진행됩니다. <button ng-if="checked"> 다음 </button> </div>
폼과유효성검사를위한템플릿 ng-model, name, ng-requried, ng-maxlength, ng-minlength, ngpattern, ng-change <form name="sampleform" ng-init="name = ' 철수 '"> 이름 : <input type="text" name="name" ng-model="name" ng-maxlength="3" ng-requ <span class="error" ng-show="sampleform.name.$error.required"> 필수입력 </span> <br> 핸드폰번호 : <input type="text" name="tel" ng-model="tel" ng-pattern="/^\d{3}-\ <span class="error" ng-show="sampleform.tel.$error.pattern"> 000-0000-0000 </span> </form>
이벤트 처리를 위한 템플릿 ng-click, ng-dblclick, ng-keydown, ng-mousedown, ng-change, ngblur,... <script type="text/javascript"> function mainctrl($scope){ $scope.message = ""; $scope.eventcnt = 0; $scope.handleevt = function(message) { $scope.message = message; $scope.eventcnt++; } } </script> <div ng-controller="mainctrl"> <div class="box" ng-click="handleevt('.')">click</div> <div class="box" ng-mousedown="handleevt(' mousedown.')">mousedown</div> <div class="box" ng-mouseenter="handleevt(' mouseenter.')">mouseenter</div> <div class="box" ng-mousemove="handleevt(' mouseenter.')">mousemove</div> change : <input type="text" ng-model="inputtext" ng-change="handleevt(' 값 경 keydown : <input type="text" ng-model="inputtext2" ng-keydown="handleevt($event.keycode+' <p>{{message}} {{eventcnt}}</p> </div> 박스 클릭됬다 박스 박스 박스 이벤트 발생 이벤트 발생 이벤트 발생 입력 박스의 이 변 되었다.')" 키코드 눌
양방향데이터바인딩 예제를통해알아봐요!
jquery 예제 <input id="toggleshowhide" type="checkbox"> <div id="specialparagraph"> 위의체크박스를클릭하면보시는내용은숨겨질것입니다. </div> <script> $(function() { function toggle() { var ischecked = $('#toggleshowhide').is(':checked'); var specialparagraph = $('#specialparagraph'); if (!ischecked) { specialparagraph.show(); } else { specialparagraph.hide(); } } $('#toggleshowhide').change(function() { toggle(); }); toggle(); }); </script>
AngularJS 예제 <input ng-model="showspecial" type="checkbox"> <div ng-hide="showspecial"> 위의체크박스를클릭하면보시는내용은숨겨질것입니다. </div>
MVC 구조제공예제를통해알아봐요!
MVC 구조가없는코드 HTML <div id="search-panel"> <label> 부서 </label> <select class="dept-dropbox"><option value=""> 선택 </option></select> <label> 직급 </label> <select class="pos-dropbox"><option value=""> 선택 </option></select> <button id="sfind"> 검색 </button> </div> <div id="gridpanel"> <table> <thead> <tr><td> 사번 </td><td> 이름 </td><td> 부서 </td></tr> </thead> <tbody></tbody> </table> </div>
MVC 구조가없는코드 JavaScript // listdata 를이용하여 dropbox(select) 의 option 을구성한다. function makedropbox(dropbox, listdata){ var option; if(listdata){ for(var i = 0, length = listdata.length; i < length; i++) { option = document.createelement("option"); option.value = listdata[i].cddetailno; option.text = listdata[i].cddetailname; dropbox.options.add(option); } } }; var searchpanel = document.getelementbyid("search-panel"); var deptdropbox = searchpanel.getelementsbyclassname("dept-dropbox")[0]; var posdropbox = searchpanel.getelementsbyclassname("pos-dropbox")[0]; var suserid = document.getelementbyid("suserid");
MVC 구조화된코드 HTML (Template) <div ng-controller="usermgtctr"> <div> <label> 부서 </label> <select ng-model="sobj.deptid" ng-options="d.deptid as d.deptnm for d in deptlist"> </select> <label> 직급 </label> <select ng-model="sobj.posid" ng-options="p.posid as p.posnm for p in poslist"> </select> <button ng-click="find(sobj)"> 검색 </button> </div> <div> <table> <thead> <tr><td> 사번 </td><td> 이름 </td><td> 부서 </td></tr> </thead> <tbody> <tr ng-repeat="user in userlist"> <td>{{user.userid}}</td><td>{{user.usernm}}</td><td>{{user.deptcd}}</td>
MVC 구조화된코드 JavaScript (Controller) function usermgtctr ($scope,$http) { $scope.sobj={deptid:'',posid:''}; $scope.deptlist = [ { deptid: '001', deptnm: ' 부서 A'}, { deptid: '002', deptnm: ' 부서 B'} ]; $scope.poslist = [ { posid: '001', posnm: ' 사원 '}, { posid: '002', posnm: ' 대리 '} ]; $scope.find = function (sobj) { $http({ method: 'GET', url: 'user.json', params: { deptid: sobj.deptid, posid: sobj.posid } }).success(function(data, status, headers, config) {
UI 컴포넌트
그리드
차트
그외에.. Tabs Datepicker Carousel Modal (Dailogue) ComboBox...
AngularJS 는어떤 UI 컴포넌트를 제공할까요?
아무것도없습니다.
jquery 는플러그인이있다!
AngularJS 는 Directive 제공
directive? 지시자란? directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children. (from AngularJS Officail DOC)
Directive 를통하여새로운 HTML 문법을브라우져들에게가르칠수있다.
Built-in Directive a, form, input, ngapp, ngbind, ngchange, ngclass, ngclick, ngcontroller, ngcloak, ngdbclick, ngdisabled, nghide, nghref, nginclude, ngmodel, ngmousedown, ngrepeat, ngview,...
Custom Directive - alert
Custom Directive - tabs
Custom Directive - popover
Directive 사용 DEMO
초간단 hello 지시자 <body ng-app="demo"> <h1 hello></h1> </body> <script type="text/javascript"> angular.module('demo', []). directive('hello', [function () { return { restrict: 'A', link: function (scope, ielement, iattrs) { ielement.append(" 안녕하세요 "); } }; }]); </script>
템플릿을이용한개발
페널을만들어봐요.
<body> <panel title=" 안녕하세요 " contents=" 안녕?"></panel> <panel title=" 안녕하세요 4" contents=" 안녕?"></panel> </body> <script type="text/javascript"> angular.module('demo', []).directive('panel', ['$log', function($log){ return { scope: { title :"@", contents:"@" }, restrict: 'AE', templateurl: 'panel.tmpl.html', link: function($scope, ielm, iattrs, controller) { jquery(ielm).find('.panel-heading').click(function() { jquery(ielm).find('.panel-body').toggle();
외부라이브러리를이용한개발
jquery 의 sparkline 을이용해봐요!
<body ng-controller="democtrl"> <sparkline data="array"></sparkline> <button ng-click="change()">change Data</button> </body> <script type="text/javascript"> angular.module('demo', []).controller('democtrl',function ($scope) { $scope.array = [10,8,5,7,4,4,1,10,8,5,7,4,4]; $scope.change = function () { $scope.array = [1,2,3,2,4,2,10,1,2,9,2,1,10]; } }).directive('sparkline', ['$log', function($log){ return { scope: { data : "=" }, restrict: 'AE',
많은외부모듈 (UI 컴포넌트포함 )
egovangularjs 프로젝트
다양한 UI 컴포넌트제공
개발을쉽게도와주는 개발자사이트제공
의존관계주입 Dependency Injection
자바스크립트상에서객체들사이의의존관계가크게세가지경우에생성된다 new 키워드를통한의존관계성립 전역변수참조를통한의존관계성립 인자를통하여참조를전달받아의존관계성립 ( 참고 : AngualrJS 개발자문서 )
강하게결합된경우
느슨하게결합된경우
DI는자신이사용하는오브젝트에대한선택과생성제어권을외부로넘기고자신은수동적으로주입받은오브텍트를사용하게된다. 이는특히 Unit 테스트작성에큰도움을준다. 사용하는오브젝트에트의 Mock을만들어서주입이가능하기때문이다.
Router Promise/Deferred $http(ajax) ngtouch nganimation Unit Test & E2E Test
Wanna Learn? Come to 오픈커뮤니티
QnA
감사합니다.