AngularJS는 구글이 후원하고 있고 2013년 구글I/O에서도 2개의 세션에서 소개가 될 정도로 관심이 높은 차기 웹 클라이언트단의 애플리케이션 개발을 위한 프레임워크이다. MVC -Model View Controller - 기반으로 역할을 나누고, SoC (separate of concer)이라는 관심의 분리를 위하여 모듈에 대한 DI (Dependency Injection)을 사용한다.
1. AngularJS 어떻게 배워야 하지?
- AngularJS에 대한 개념적 이해와 익히는 방법을 알아보자
- 전반적으로 다시 한번 복습해 보고
- 이젠 AngularJS만의 길을 가보자
2. AngularJS 스케폴딩 둘러보기
- SmartVisualization/app 폴더는 다음과 같다
+ index.html : 최초 호출 페이지
+ bower_components : bower에 의해서 설치된 client에서 사용하는 library들.
bower 를 통해 install 하면 JavaScript 링크가 index.html에 자동 삽입된다
+ scripts : angular javascript 파일 폴더들
+ views : angular의 template 파일은 .html 확장자이다. 보통 partial 파일이라고 한다
- index.html 가 메인 페이지이다
+ ng-app 를 통하여 AngularJS 애플리케이션 명칭을 정의
+ ng-view 는 views 폴더의 partial html이 표현되는 영역이다. DOM을 보게 되면 해당 영역만 변경이 이루어 진다
+ app.js 가 AngularJS의 메인 수행 파일이고 일반적으로 partial view에 대한 routing을 정의한다
+ controller/main.js 은 AngularJS의 컨트롤러 파일이다. partial html 파일이 여러개 있더라도 동일한 controller를 사용할 수 있다.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.tmp) styles/main.css , 부트스트랩의 RWD까지 적용되어 있다 -->
<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="bower_components/bootstrap-sass/bootstrap-responsive-2.3.2.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<!-- yo angular:app SmartVisualization 명령수행으로 App 접미어를 붙여서 프로젝트 명칭을 만들었다 -->
<body ng-app="SmartVisualizationApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- Add your site or application content here : ng-view 영역이 실제 partial html 파일로 대체되는 영역 -->
<div class="container" ng-view=""></div>
<!-- angular.js 자체에 light jquery를 내장하고 있지만 정식버전 jquery를 사용하고 싶다면
하기와 같이 angular 위에 놓으면 된다 -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- build:js scripts/plugins.js, 사용하지 않는 부트스트랩 자바스크립트는 제거한다 -->
<script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script>
.. 중략 ..
<script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script>
<!-- endbuild -->
<!-- build:js scripts/modules.js -->
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js, 업무적으로 추가되는 파일은 이곳에 넣는다
단, yo 명령으로 controller 또는 service를 생성하면 자동으로 파일명이 추가된다 -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
</html>
- AngularJS 메인 애플리케이션 파일인 app.js 을 보자
+ module : ng-app에서 정의한 SmartVisualizationApp 명칭이 들어가고
[] 에는 별도로 파일을 구분하였다면 의존관계에 있는 모듈을 정의 한다
+ templateUrl : index.html 위치에서 partial html 상대위치를 정의한다
+ controller : main.html 안의 model 제어를 위한 controller명칭을 정의한다 (controller/main.js 소스에 정의된 컨토롤러 명칭)
+ redirectTo : http://localhost:9000/ 을 넣으면 무조건 views/main.html이 보여지도록 그외의 url에 대한 redirect를 정의한다
'use strict';
angular.module('SmartVisualizationApp', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
- main.html 은 partial html 파일이다
+ 이곳에 이동평균에 관련된 view가 정의될 것이다
<div class="hero-unit">
<h1>'Allo, 'Allo!</h1>
<p>You now have</p>
<ul>
<li ng-repeat="thing in awesomeThings">{{thing}}</li>
</ul>
<p>installed.</p>
<h3>Enjoy coding! - Yeoman</h3>
</div>
3. index.html 메인 뷰페이지 RWD 수행
- RWD는 Responsive Web Design의 약어로 반응형 웹 디자인이라고 한다.
RWD의 목적은 사용자에게 최적의 뷰 경험을 제공하는데 있다.
웹 서비스를 만들 때 중요한 요소로 검색엔진 최적화, 웹 접근성, 반응형 웹 디자인을 필수로 고려해야 한다. (참조)
- RWD는 시각화 표현에 대한 부분이고 웹에서는 CSS가 이를 담당하며, 가장 유명한 CSS Framework으로 Twitter Bootstrap이 있다
하지만 Bootstrap 이외에 GroundWorks, Zurb Foundation, Amazing Web Library 들도 있으니 구미에 맞는 것을 선택한다.
- Bootstrap을 사용하게 되면 몇가지 유용한 도구와 서비스들이 있다.
여기서는 Bootstrap 기반으로 화면의 Layout을 만들어 주는 Bootply를 사용한다
- 화면에서 가운데 메뉴 "Drag-and-Drop"을 선택하면 팝업창에서 3가지 Layout 옵션이 나온다. 여기선 "Simple"을 선택한다
- Editing 화면에서 내역을 수정하고 상단의 "Run"을 클릭하면 변경 내역을 다양한 기기 해상도로 테스트해 볼 수 있다
+ yo angular는 bootstrap 2.3* 기반이니 주의한다. Bootply는 boostrap v3.*도 지원한다 (default v2.3*)
- Bootply의 html 내역중 메뉴 관련 내용을 copy하여 index.html에 추가한다
ng-view 부분에 main.html 내역이 표시될 것이다
// index.html 추가 부분
<body ng-app="SmartVisualizationApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Smart Visualization</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">MovingAverage</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Add your site or application content here -->
<div class="container" ng-view=""></div>
- main.html 전체 내역을 다음과 같이 바꾼다. bootstrap의 container css class로 감싸준다.
app.js에서 루트 '/' 호출은 /views/main.html 로 라우팅되므로 index.html의 ng-view에서 main.html 보여지게 된다
<div class="container">
<h1>Smart Visualization Service</h1>
<p>
Job Less, Feel More - 인위적인 작업을 적게 하면 더 행복해 질 수 있다고 믿습니다.<br>
단순 파일 업로드만으로 데이터 통계를 미려한 차트로 표현해 드립니다.<br>
.csv 파일에 시간과 수치값만 있다면 SVG Chart로 통계 변환 수치를 보여드립니다
</p>
</div> <!-- /container -->
- 변경 내역을 저장하고 확인해 보자
$ grunt server
// 브라우져 사이즈를 줄여보면 RWD 경험을 제공한다
<참조>
- 견고한 Web Applicatoin을 만드는 방법 with AngularJS
- Think in AngularJS Way : 접근 방법에 대한 조언
- Bootstrap Layout 전문 서비스 Bootply
- Boostrap기반의 유용한 도구와 서비스들
