[BI Dashboard] Angular.js 엔터프라이즈 애플리케이션 구조 만들기

2013. 11. 22. 03:53 My Projects/BI Dashboard

[BI Dashboard] Angular.js 엔터프라이즈 애플리케이션 구조 만들기

Angular.js를 하면서 모듈단위로 개발을 할 수 있고, 여러명이 동시에 관련 모듈을 개발하여 합칠 수도 있다. 즉, 엔터프라이즈급 애플리케이션 개발 공수가 든다면 모듈을 나누고 어떻게 합쳐서 하나의 SPA로 만드는지 알아보자

1. 모듈 단위 나누기

- 기존의 하나의 애플리케이션 모듈로 진행되는 것을 여러 모듈로 나어 큰 규모의 애플리케이션을 만들자 (참조)

+ 하나의 애플리케이션 .js 파일을 하나의 모듈로 한다

+ 모듈은 앞글자가 대문자로 시작한다 (App, Biz / Ctrl, Svc, Flt, Drtv 등 접미어를 붙여서 구분한다)

+ 모듈파일이 많이 커질때는 Lazy Loading을 고려한다 (참조1, 참조2)

+ 일반 기능들의 명칭은 소문자로 시작한다 (Ctrl, Svc, Flt, Drtv 등 접미어를 붙인다)

+ 공통으로 사용되는 것은 $rootScope 또는 Factory를 이용한다

+ 파일과 모듈이 분리되어 테스트 코드를 쉽게 만들어 테스트 가능하다

- 업무 모듈 유형

+ Application Main 모듈 : <ProjectName>App.js (주로 routing 관련 설정)

+ Biz 모듈 : <UI명칭>Biz.js (화면과 맵핑되는 모듈 = n controller + n service/factory 존재)

- 공통 모듈 유형

+ Controller 모듈 : CommonCtrl.js (메뉴, 로그인/로그아웃 UI 핸들링)

+ Service 모듈 : CommonSvc.js (메뉴, 로그인/로그아웃 서버통신 처리)

+ Directives 모듈 : CommonDrtv.js (일반적인 지시자들), UtilDrtv.js (유틸리티), UXDrtv.js (UI), <User Defined>Dtrv

+ Filters 모듈 : CommonFlt (공통), UtilFlt (유틸) 필터링 관련 모듈

- /src/main/scripts의 기능별 폴더를 생성하여 모듈을 분리한다. 또는 업무적으로 폴더를 분리할 수도 있다

// /src/main/scripts 에서

// 기존 폴더

/controllers/main.js

app.js

// 추가 폴더 및 명칭변경

/controllers

/directives

/filters

/services

DashboardApp.js

- 주로 많이 개발하는 것이 화면단위의 <BizName>Ctrl/Svc.js 가 될 것이다

- vendor가 제공하는 컴포넌트는 B ower를 통하여 설치 관리되며, 배포시에 Grunt를 통하여 minification 된다

2. 공통 모듈 분리하기

- 폴더를 만들었으면 이제 .js 안에 모듈명을 지정하고, 의존관계를 설정한다

- 모듈 명칭은 namespace 구분을 위하여 자바의 패키지처럼 <ApplicatonName>.<구분>.<FileName> 이라고 대소문자 작명한다

- 모듈 분리 순서

+ app.js 파일명칭을 DashboarApp.js 로 변경하고, 모듈명칭을 DashboardApp로 시작한다

+ controllers/main.js 파일명칭을 CommonCtrl.js 로 변경하고, 모듈명칭을 <ApplicationName>.CommonCtrl로 변경한다

// DashboardApp.js 에서

// 두번째 파라미터 배열에서 의존관계에 있는 모듈을 정의한다

var DashboardApp = angular.module('DasbhoardApp', [

'ngCookies',

'ngResource',

'ngSanitize',

'DasbhoardApp.CommonCtrl'

]);

// CommonCtrl.js 에서

var CommonCtrl = angular.module('DasbhoardApp.CommonCtrl', []);

+ 분리된 파일은 index.html 에 추가한다 : 향후 파일이 늘어나면 Lazy loading을 고려한다

// index.html 에서

.. 이곳에 추가를 한다 ..

3. 업무 모듈 분리하기

- Person 테이블을 보여주는 restTest.html 파일에 대한 별도 모듈을 만든다. (resttest.html을 restTest.html로 명칭 변경했음)

- 1 view : 1 module 로 구성하고, 1 module : n controller + n service 를 넣는다. 즉 1 module : 1 biz 로 한다

// step-1 : 기존 scripts 에 나열 되었던 controllers, directives, filters, services 폴더를 common 폴더를 만들어 옮긴다

// step-2 : 업무적인 폴더는 scripts 폴더에 정의한다. 여기서는 person 폴더를 생성함

// step-3 : scripts/person 폴더 밑에 RestTestBiz.js 파일을 만든다

// step-4 : index.html 내역을 다음과 같이 수정한다

// 최종 모습

- CommonCtrl.js 에 들어있는 restTestCtrl 코드를 RestTestBiz.js 파일로 옮기고, 명명규칙에 따라 수정한다

var RestTestBiz = angular.module('DasbhoardApp.RestTestBiz', []);

RestTestBiz.controller('RestTestBiz.personCtrl', ['$scope', '$http', function ($scope, $http) {

.. 중략 ..

$scope.deletePerson = function(id) {

console.log('Delete Person : ', id);

$http['delete'](actionUrl + id).success(function () {

load();

});

};

}]);

// RestTestBiz.service or RestTestBiz.factory 를 정의한다

- DashboardApp.RestTestBiz 모듈을 DashboardApp.js에서 의존성을 등록하고, Routing시의 controller 명칭도 수정 등록한다

var DashboardApp = angular.module('DasbhoardApp', [

'ngRoute',

'ngCookies',

'ngResource',

'ngSanitize',

'DasbhoardApp.CommonCtrl',

'DasbhoardApp.RestTestBiz',

]);

DashboardApp.config(['$routeProvider', function ($routeProvider) {

$routeProvider

.when('/', {

templateUrl: 'views/main.html'

})

.when('/resttest', {

templateUrl: 'views/restTest.html',

controller: 'RestTestBiz.personCtrl'

})

.otherwise({

redirectTo: '/'

});

}]);

* Angular.js v1.2.1 업그레이드

- 가장 큰점은 Angular의 route 가 별도로 분리되었다는 것이다 (참조1, 참조2)

- v1.2.1 버전을 설치해 보자

// bower를 통하여 기존 모듈 제거 및 재설치 작업 수행

$ bower uninstall angular angular-resource angular-cookies angular-mocks angular-sanitize angular-scenario

bower uninstall angular

bower uninstall angular-resource

bower uninstall angular-cookies

bower uninstall angular-mocks

bower uninstall angular-sanitize

bower uninstall angular-scenario

// bower.json에서 버전 정보를 삭제한다

// --save 설치

$ bower install angular angular-route angular-resource angular-cookies angular-sanitize --save

// --save-dev 설치

$ bower install angular-mocks angular-scenario --save-dev

// 설치 버전 의존성 정보

$ bower list

bower check-new Checking for new versions of the project dependencies..

SolarDasbhoard#0.0.0 /Users/nulpulum/development/eclipse_workspace/lg_solar/SPA_ASE

├── angular#1.2.1

├─┬ angular-cookies#1.2.1

│ └── angular#1.2.1

├─┬ angular-mocks#1.2.1

│ └── angular#1.2.1

├─┬ angular-resource#1.2.1

│ └── angular#1.2.1

├─┬ angular-route#1.2.1

│ └── angular#1.2.1

├─┬ angular-sanitize#1.2.1

│ └── angular#1.2.1

├─┬ angular-scenario#1.2.1

│ └── angular#1.2.1

├─┬ bootstrap#3.0.2

│ └── jquery#1.9.1 (2.0.3 available)

├── es5-shim#2.0.12 (latest is 2.1.0)

├── jquery#1.9.1 (latest is 2.0.3)

├── jquery-migrate#1.2.1

├── json3#3.2.5

└── respond#1.3.0

- routing 관련 설정 변경

// index.html 에서 angular.js 밑으로 angular-route.js 추가

// DashboardApp.js 파일에서 ngRoute 모듈 추가

var DashboardApp = angular.module('DasbhoardApp', [

'ngRoute',

'ngCookies',

'ngResource',

'ngSanitize',

'DasbhoardApp.CommonCtrlMod'

]);

* HTML5 지원하는 모듈 넣기

- html5shiv를 포함한 modernizr를 설치하여 오랜된 브라우져에서는 HTML5가 지원토록 한다 (참조)

- IE 9 이하에서 선택적으로 넣자

// bower install

$ bower install modernizr --save

// index.html 에서

<!--[if lt IE 9]>

<![endif]-->

* 메뉴 동작방식 변경하기

- data-ng-click 방식으로도 변경해 본다

// index.html 에서

// 기존 코드

<li data-ng-class="activeWhen(path()=='/resttest')"><a href="#/resttest">RESTTest</a></li>

</ul>

</div>

// 변경 코드

</li>

<a href="" data-ng-click="setRoute('/resttest')">RESTTest</a>

</li>

</ul>

</div>

- 모듈안에서 사용되는 controller, service, filter, directive의 명칭은 <Module명>.<기능명칭> 처음에는 소문자로 시작한다

// index.html 에서

..중략..

</div>

- menuCtrl안에 setRoute 메소드를 정의한다

CommonCtrlMod.controller('CommonCtrlMod.menuCtrl', ['$scope', '$location', function ($scope, $location) {

$scope.activeWhen = function (value) {

return value ? 'active' : '';

};

$scope.path = function () {

return $location.url();

};

$scope.setRoute = function (url) {

$location.path(url);

}

}]);

* 소스 : https://github.com/ysyun/SPA_Angular_SpringFramework_Eclipse_ENV/tree/feature_angular_modules

<참조>

- Angular.js 기반 큰규모 애플리케이션 구조 만들기

- Angular.js v1.2 에서 변경 추가된 사항들-Outsider

- Angular.js v1.2 에서 변경된 것들

- HTML5 지원을 위한 Modernizr vs Html5shiv 에 대하여

저작자표시 비영리 변경금지

'My Projects > BI Dashboard' 카테고리의 다른 글

[BI Dashboard] jqGrid 와 Angular.js 연동하기 (0)	2013.11.28
[BI Dashboard] Angular.js $resource 이용하여 Service 만들기 (0)	2013.11.27
[BI Dashboard] Angular+Bootstrap을 Windows와 IE8 이상에 적응시키기 (0)	2013.11.21
[BI Dashboard] myBatis에서 Mapper Interface로 고도화하기 (0)	2013.11.20
[BI Dashboard] Spring + MyBatis 연동 설정 및 테스트하기 (1)	2013.11.20

posted by Peter Note

AI Convergence

Publication

Tag

Category

Recent Post