336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

이번에는 내용만 바뀌는 템플릿 소스를 보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
 
<!-- 라우팅과 angularJS기본파일입니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
 
<!-- app이름을 설정합니다. -->
<body ng-app="myApp">
 
    <p><a href="#/">Main</a></p>
    
    <a href="#another">another</a>
    
    <div ng-view></div><!-- route가 되면 나올 공간을 가리킵니다. -->
 
<script>
//앱과 routing을 변수에 넣었습니다.
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    /* 처음에 나올 페이지입니다. */
    .when("/", {
        templateUrl : "main.htm"    /* 나올 템플릿 파일을 가리킵니다. */
    })
    /* another클릭시에 나옵니다. */
    .when("/london", {
        templateUrl : "another.htm"    /* 나올 템플릿 파일을 가리킵니다. */
    })
});
</script>
 
</body>
</html>
 
 cs

소스에 설명은 다 있습니다.

감사합니다.

 

 

'ANGULARJS > template' 카테고리의 다른 글

angularJS 내용만 가져오는 Include 사용법  (0) 2016.06.30
angularJS Template Routing과 Directive를 같이 써봤어요  (0) 2016.06.29
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

 

안녕하세요.

 

이번에는 템플릿에 대해서 알아보겠습니다.

템플릿을 관리하는 소스코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
 
<!-- 라우팅과 angularJS기본파일입니다. -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
 
<!-- app이름과 controller이름을 설정합니다. -->
<body ng-app="myApp" ng-controller="myCon">
 
<table width="100%">
    <tr>
        <td>
            <!-- directive대상이될 태그입니다. -->
            <it-menu></it-menu>
        </td>
        <td width="90%">
            <!-- 라우팅하면 보여질 곳 입니다. -->
            <div ng-view></div>
        </td>
    </tr>
</table>
 
<script>
(function(angular) {
    //app과 라우팅을 연결합니다.
    var app = angular.module("myApp", ["ngRoute"]);
    
    
    /* my-tabs 태그에 대한 배치를 활성화 */
    app.directive('itMenu', function() {
        return {
           restrict: 'E',        //
           transclude: true,    //파일포함의 여부 입니다.
           scope: {},            //변수선억지역 입니다.
           /* scope를 넣어서 각각 select,addPane함수를 만들어줍니다. */
           controller: ['$scope', function($scope) {
                  
           }],
           
           templateUrl: 'menu.html'
        }
    });
    
    //라우팅부분입니다.
    app.config(function($routeProvider) {
        $routeProvider
        .when("/", {
            templateUrl : "main.html"    //처음에 main.html을 불러옵니다.
        })
        .when("/color", {
            templateUrl : "color.html"    // /color조건을 만족시키면 color.html로 이동합니다.
        })
    });
    
    //이벤트를 처리하기 위한 controller를 만들었습니다.
    app.controller("myCon",  function($scope){
        
        // testAlert함수입니다. alert와 변수를 넣어줍니다.
        $scope.testAlert = function(scope){
            alert("DDD");
            $scope.add = "추가되었습니다.";
        }
    });
 
})(window.angular);
</script>
 
</body>
</html>
 
 
 
 cs

 

main.html에 해당하는 페이지입니다. 처음 content단에 나올 소스코드입니다.

1
2
<!-- 클릭함수와 add변수를 출력하고 있습니다. -->
<div ng-click="testAlert()">글내용입니다. {{add}} </div>
 cs

 

color를 눌르면 나올 페이지입니다. 간단하게 main인지, color인지 구분만 할 수 있도록 해놓은 코드입니다.

1
color페이지입니다.
 cs

 

이렇게 처리했습니다.

감사합니다.

'ANGULARJS > template' 카테고리의 다른 글

angularJS 내용만 가져오는 Include 사용법  (0) 2016.06.30
angularJS 간단한 routing템플릿  (0) 2016.06.29
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

이번에는 배열을 가지고 있는 변수를 차례로 한개씩 나열할려고 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- angularJS를 불러옵니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<div ng-app="app" ng-controller="con">
 
<ul>
    <!-- phone이라는 변수를 가지고 한개씩 x에 담아줍니다. -->
    <li ng-repeat="x in phone">{{x}}</li>
</ul>
 
</div>
 
<script>
/* app을 가져와서 변수에 넣습니다. */
var app = angular.module('app', []);
 
/* controller를 안에서만 처리할  */
app.controller('con', function($scope) {
    /* phone에 배열형태로 넣어줍니다. */
    $scope.phone = ["android", "IOS", "3G"];
});
</script>
 
</body>
</html>
 
 cs

 

결과는 한줄에 하나씩 android, IOS, 3G를 차례대로 출력해줍니다.

 

감사합니다.

'ANGULARJS' 카테고리의 다른 글

angularJS contoller단을 이용하기  (0) 2016.06.27
angularJS 변수를 출력하는 ng-init  (0) 2016.06.27
angularJS Text박스 내용을 출력하기  (2) 2016.06.27
angularJS 설치하기  (0) 2016.06.26
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

scope의 범위에 대해서 보여드릴려고 합니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- angularJS를 불러옵니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 
<!-- app를 정의합니다. -->
<body ng-app="myApp">
 
<p>언어 :</p>
<h1>{{lan}}</h1>
 
<!-- controller를 정의합니다. -->
<div ng-controller="myCtrl">
 
<p>언어 :</p>
<h1>{{lan}}</h1>
 
</div>
 
<p>언어 :</p>
<h1>{{lan}}</h1>
 
<script>
/* app을 가져와서 변수에 넣습니다. */
var app = angular.module('myApp', []);
/* app안에 있고, controller밖에 있는 것에 대해서 처리하는 것 같습니다. */
app.run(function($rootScope) {
    $rootScope.lan = 'JDK';
});
 
/* controller를 안에서만 처리할  */
app.controller('myCtrl', function($scope) {
    $scope.lan = "블로그";
});
</script>
 
 
</body>
</html>
 
 cs

 

같은 lan변수지만 controller안에 있는 것은 블로그라고 나오고, controller밖에 있는 것은 JDK라고 나옵니다.

 

 

감사합니다.

 

 

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

이벤트 종류에 대해서 설명하겠습니다.

확실한건 아니여서 참조만 해주시면 될거같아요.

 

  • ng-blur : 포커스를 잃었습니다.
  • ng-change : 값이 바뀌었습니다.
  • ng-click : 클릭했습니다.
  • ng-copy : 해당 내용을 복사했습니다.
  • ng-cut : 해당 내용을 잘랐습니다.
  • ng-dblclick : 더블클릭을 했습니다.
  • ng-focus : 포커스가 갔습니다.
  • ng-keydown : 해당 객체서 키를 눌렀습니다.
  • ng-keypress : 해당 객체에서 키를 누르고 있습니다.
  • ng-keyup : 해당 객체에서 키를 누르고 손을 땠습니다.
  • ng-mousedown : 마우스를 클릭했습니다.(손이 내려간 상태입니다.)
  • ng-mouseenter : 마우스가 입장했습니다.
  • ng-mouseleave : 마우스가 해당 객체를 떠났습니다.
  • ng-mousemove : 마우스가 해당 객체안에서 움직이고 있습니다.
  • ng-mouseover : 마우스가 해당 객체 위에 입장했습니다.
  • ng-mouseup : 마우스를 해당 객체에서 클릭하고 손을 땠습니다.
  • ng-paste : 해당 객체에 붙여넣기를 했습니다.

이렇게 설명을 드렸습니다.

 

사용방법은 : http://jdkblog.tistory.com/90 이런식으로 사용하시면 될거같습니다.

너무 간단간단한 설명이라 조금 그렇지만 도움이 되셨으면 좋겠습니다.

감사합니다.

 

'ANGULARJS > event' 카테고리의 다른 글

angularJS click을 이용한 show(보였다가 안보였다가)  (0) 2016.06.27
angularJS 모르면 섭섭한 Event 중 하나 click  (0) 2016.06.27
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

이번에는 클릭할때마다 일부가 보였다가 안보였다가 하는 소스코드를 해볼까합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- angularJS를 불러옵니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<!-- app이름과 controller이름입니다. -->
<div ng-app="myApp" ng-controller="myCtrl">
 
<!-- 클릭시에 잘동하는 myFunc함수 -->
<button ng-click="myFunc()">버튼클릭</button>
 
<div ng-show="showMe">
    <h1>Menu:</h1>
    <div>Java</div>
    <div>C</div>
    <div>C++</div>
</div>
 
</div>
<script>
/* 해당 앱을 활성화합니다. */
var app = angular.module('myApp', []);
/*정의한 앱에 controller를 실행합니다.*/
app.controller('myCtrl', function($scope) {
    /* showMe를 안보이게 합니다. */
    $scope.showMe = false;
    /* myFunc함수구편 */
    $scope.myFunc = function() {
        /* showMe에 반대를 넣어줍니다. ex) 안보이면 보이게, 보이면 안보이게 처리합니다. */
        $scope.showMe = !$scope.showMe;
    }
});
</script>
 
</body>
</html>
 
 cs

주석에 설명이 다 붙어있어서 다른 설명은 생략하겠습니다.

 

감사합니다.

 

 

'ANGULARJS > event' 카테고리의 다른 글

angularJS event 목록 줄줄이 있어용  (0) 2016.06.27
angularJS 모르면 섭섭한 Event 중 하나 click  (0) 2016.06.27
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

event중에 click이벤트를 알아볼께요.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- angularJS를 불러옵니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<!-- app이름과 controller이름입니다. -->
<div ng-app="myApp" ng-controller="myCtrl">
    <!-- 클릭하면 해당 함수를 실행합니다. 참고로 h1범위에서 클릭이면 다 changeText함수를 실행합니다. -->
    <h1 ng-click="changeText()">{{firstname}}</h1>
</div>
 
<script>
/* 해당 앱을 활성화합니다. */
var app = angular.module('myApp', []);
/*정의한 앱에 controller를 실행합니다.*/
app.controller('myCtrl', function($scope) {
    /* $scope.변수로 값을 넣어줍니다. */
    $scope.firstname = "JDK";
    /* changeText 함수를 만들어둡니다. */
    $scope.changeText = function() {
        /* firstname의 값을 치환합니다. */
        $scope.firstname = "BLOG";
    }
});
</script>
JDK를 클릭하면 값이 바뀌어요.
 
</body>
</html>
 
 cs

결과에서 JDK만 있는 줄을 클릭하면 BLOG로 바뀝니다.

 

공통적으로 app이름과 controller이름을 만들고, 안에 함수를 하나 만들고, 태그에 click함수로 해당함수를 연결했습니다.

이와같이 event로 연결가능한 명령어가 여럿있습니다.

 

다음글에선 다른 event를 다뤄보겠습니다.

 

감사합니다.

 

 

'ANGULARJS > event' 카테고리의 다른 글

angularJS event 목록 줄줄이 있어용  (0) 2016.06.27
angularJS click을 이용한 show(보였다가 안보였다가)  (0) 2016.06.27
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

이번엔 angularJS로 Array를 만들어서 출력해볼께요.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- angularJS를 불러옵니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<!-- 배열을 순서대로 넣었습니다. 이 배열은 0부터 위치가 시작됩니다. -->
<div ng-app="" ng-init="points=['java','script','angular','framework','!']">
 
<!-- points의 4번째, framework를 출력합니다. -->
<p>출력된 {{ points[3] }}</p>
 
<!-- points의 1번째, java를 출력합니다. -->
<p>출력된 <span ng-bind="points[0]"></span></p>
 
</div>
 
</body>
</html>
 cs

결과는

출력된 framework

출력된 java

 

감사합니다.

 

'ANGULARJS > expression' 카테고리의 다른 글

angularJS Expression 어딘가에 소속된 값들의 모임  (0) 2016.06.27
angularJS Expression 변수끼리도 한번?!  (0) 2016.06.27
angularJS 변수선언없이 계산사는 expression  (0) 2016.06.27
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

이번에는 어떤곳에 소속되어 있는 값들을 불러오는 것을 알려드리겠습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- angularJS를 불러옵니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<!-- 변수를 lan이라는 곳에 engName과 korName에 변수값을 넣습니다. -->
<div ng-app="" ng-init="lan={engName:'javascript',korName:'(자바스크립트)'}">
 
<!-- lan안에 변수들이 있어서 len.해당변수로 출력이 가능합니다. -->
<p><span ng-bind="lan.engName+' '+lan.korName"></span></p>
 
</div>
 
</body>
</html>
 
 cs

결과값은 javascript(자바스크립트)

ng-init에 보면 변수들이 쉼표를 기준으로 한쌍씩 lan에 들어가는 것을 볼 수 있습니다.

접근방법은 상위변수.값을 소유하고 있는 변수로 불러올수 있습니다.

ex) {{lan.engName}}

 

감사합니다.

 

'ANGULARJS > expression' 카테고리의 다른 글

angularJS 값들의 모임 Array  (0) 2016.06.27
angularJS Expression 변수끼리도 한번?!  (0) 2016.06.27
angularJS 변수선언없이 계산사는 expression  (0) 2016.06.27
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

이번에는 SQL문을 대신하는 통신해서 JSON으로 가져오는 방식을 알려드리겠습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- angularJS를 불러옵니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<!-- app이름과 controller이름입니다. -->
<div ng-app="myApp" ng-controller="myCon">
 
<table>
<!-- names이 차례로 가져올 것이 없을때 까지 x에 1개씩 차례대로 넣습니다. -->
  <tr ng-repeat="item in names">
  <!-- 가져온 것을 출력해줍니다. -->
    <td>{{ item.obj1 }}</td>
    <td>{{ item.obj2 }}</td>
  </tr>
</table>
 
</div>
 
<script>
/* myApp 앱을 활성화합니다. */
var app = angular.module('myApp', []);
/* 정의한 앱에 myCon를 실행합니다. */
/* $scope 안에 변수들을 관장하는 변수, $http통신변수 */
app.controller('myCon', function($scope, $http) {
    //get은 통신해서 결과를 가져옵니다.
   $http.get("해당 URL")
   //통신후에 실행합니다.
   // data -> records안의 값을 names에 넣습니다.
   .then(function (response) {$scope.names = response.data.records;});
});
</script>
 
</body>
</html>
 cs

 

샘플 통신 사이트는 가지고 있지 안아서 제가 결과화면은 제공하지 못해요.

하지만 소스안에 있는 것을 참조해시면 될거같아요.

 

감사합니다.

+ Recent posts

티스토리툴바