1. angular js core file import
<script src="/js/mobile/angular-1.2.9/angular.min.js"></script>
site : https://angularjs.org/
api : https://docs.angularjs.org/api
2. script 작성
//module 명은 userApp, 컨트롤러 명은 userctrl 임
angular.module('userApp', []).controller('UserCtrl', ['$scope', function ($scope) {
//test 용 데이터 넣기
//scope 는 앵귤러에서 제공하는 기본 모델로 여기에 넣어서 하는거 임
//!! 데이터는 json 타입을 기본으로 한다 !!
$scope.basic = result_data.result[0].basic;
$scope.detail = result_data.result[0].detail;
//브라우저 타이틀
top.document.title = $scope.basic[0].APT_NM + " < SK VIEW";
//탭메뉴 관련
if( angular.isUndefinedOrNull($scope.detail) ){
$scope.tab_class = "col_2";
$scope.display_none = "display:none;";
}
else {
$scope.tab_class = "col_3";
$scope.display_none = "";
$scope.view = result_data.result[0].detail[0];
}
//이건 유저 정의 함수임
//평면정보 불러오기
$scope.getTab2 = function(idx) {
$scope.view = result_data.result[0].detail[idx];
//console.log(result_data.result[0].detail[idx]);
}
}]);
3. html 에서 사용하기
마크업에 모듈과 컨트롤러를 바인딩하고
<body class="sub-body" ng-app="userApp">
<div class="off-canvas-wrap" ng-controller="UserCtrl">
...
{{변수명}} 을 쓰면 걍 뿌려진다
<ul class="tabs type2 {{tab_class}}">
...
<div class="selBox_wrap">
<a href="tel:{{basic[0].TEL}}" class="btnCall">{{basic[0].TEL}}</a>
</div>
'Study > Javascript' 카테고리의 다른 글
| [Javascript] input[type=text]와 onchange 이벤트 (0) | 2014.06.03 |
|---|---|
| [Javascript] 한글 및 영문 입력방지 input 만들기 (7) | 2014.05.20 |
| [JQuery] 라디오 및 체크박스 체크 여부 확인하기 (0) | 2014.05.20 |
| [Javascript] 날짜 생성 (2) | 2014.05.20 |
| [Javascript] javascript에서 replaceAll 하기!! (0) | 2014.05.20 |
| [JQuery][ajax] 기본 post 요청 구조 (0) | 2014.05.20 |
| [JQuery] html 문서에서 다른 html 문서 import (1) | 2014.05.20 |
| [angularJS] null 체크 간편하게 하기 (0) | 2014.05.20 |
| [Javascript] 스크립트에서의 키보드 키코드 (0) | 2014.05.20 |
| [JQuery] prototype 과의 충돌 문제 해결법 (0) | 2014.05.20 |