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 |
주석에 설명이 다 붙어있어서 다른 설명은 생략하겠습니다.
감사합니다.
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를 다뤄보겠습니다.
감사합니다.
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
감사합니다.
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}}
감사합니다.
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 |
샘플 통신 사이트는 가지고 있지 안아서 제가 결과화면은 제공하지 못해요.
하지만 소스안에 있는 것을 참조해시면 될거같아요.
감사합니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요.
이번엔 expression 변수끼리 계산하는 것을 보려드릴꼐요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<!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>
<!-- quantity에는 20, cost에는 5를 초기화합니다. -->
<div ng-app="" ng-init="quantity=20;cost=5">
<!-- 변수사이에 기호를 넣어 계산해줍니다. -->
<p>숫자계산: {{ quantity * cost }}</p>
</div>
</body>
</html>
|
cs |
설명은 보시다시피 위 주석에 다 있습니다.
소스코드를 실행하면 숫자계산: 100이 나오는 것을 확인할 수 있습니다.
두번째 방법은 ng-bind를 사용하는 방법입니다. ng-init까지 같지만 조금 다릅니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<!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>
<!-- quantity에는 20, cost에는 5를 초기화합니다. -->
<div ng-app="" ng-init="quantity=20;cost=5">
<!-- 변수사이에 기호를 넣어 계산해줍니다. -->
<p>숫자계산: <span ng-bind="quantity+cost"></span></p>
</div>
</body>
</html>
|
cs |
이번에는 태그안에서 결과를 출력해줍니다.
자세히 보니까 더하기입니다.
결과는 숫자계산: 25가 나옵니다. 궁금하시다면 복사 붙여넣기해서 확인해주세요.
이제 마지막으로 변수에 있는 문자열들을 합쳐서 출력하는 방법을 알려드릴께요.
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>
<!-- 변수를 2개 선언합니다. -->
<div ng-app="" ng-init="firstSiteName='J';lastSiteName='DK'">
<!-- 연산 방지를 위해 +''+를 넣습니다. -->
<p>사이트: <span ng-bind="firstSiteName + ' ' + lastSiteName"></span></p>
</div>
</body>
</html>
|
cs |
약간 다른점이 있다는 문자열을 붙여서 나오게 +' '+를 했습니다.
결과는 사이트: J DK로 출력됩니다.
봐주셔서 감사합니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요.
angularJS script단에서 값을 지정해주는 소스코드를 알려드리겠습니다.
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 |
<!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>
<p>Test 페이지입니다.</p>
<!-- app이름과 controller이름입니다. -->
<div ng-app="myApp" ng-controller="myCon">
<!-- 각각 firstSite과 -->
Javascript : <input type="text" ng-model="javascript"><br>
Language: <input type="text" ng-model="language"><br>
<br>
<!-- 결과적으론 밑 controller에 있는 값이 들어옵니다. -->
Full Name: {{javascript + " " + language}}
</div>
<script>
/* 해당 앱을 활성화합니다. */
var app = angular.module('myApp', []);
/*정의한 앱에 controller를 실행합니다.*/
app.controller('myCon', function($scope) {
/* $scope.변수로 값을 넣어줍니다. */
$scope.javascript= "framework";
$scope.language= "angularJS";
});
</script>
</body>
</html>
|
cs |
설명은 소스코드에 있어서 생략하겠습니다.
이것은 결과화면입니다.
위에 보시는대로 framework와 angularJS가 controller단에서 값이 갱신되어서 그것을 FullName 옆에 변수가 들어간 것을 확인할 수 있습니다.
감사합니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요.
이번에는 숫자만으로 계산하는 expression을 해보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<!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="">
<!-- 변수불러오는 곳에서 똑같이 식을 처리합니다. -->
<p>5 * 25 = {{ 5 * 25 }}</p>
</div>
</body>
</html>
|
cs |
소스코드 설명은 주석에 들어있습니다.
결과그림 보여드리겠습니다.
이렇게 잘나옵니다,
감사합니다.
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>
<!-- ng-init로 site라는 변수에 JDKblog를 넣었습니다. -->
<div ng-app="" ng-init="site='JDKblog'">
<!-- ng-bind로 site라는 변수를 가져옵니다. -->
<p>AngularJS <span ng-bind="site"></span></p>
</div>
</body>
</html>
|
cs |
간단하게 이렇게 출력됩니다.
설명은 소스코드에 다 있어서 참조하시면 되겠습니다.
감사합니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요.
이번에는 간단한 소스 코드 알려드릴꼐요.
간단하게 text입력하면 그 값을 바로 밑에 비동기식으로 출력이 될꺼예요.
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>
<div ng-app=""> <!-- angularJS단위이름(?) -->
<p>기본 text:</p>
<!-- ng-model은 값을 name으로 넣어줍니다. -->
<p>Text값 입력 : <input type="text" ng-model="name" placeholder="아무거나 입력해주세요."></p>
<!-- {{변수 명으로 불러옵니다.}} -->
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
|
cs |
이렇게 내용이 똑같이 나오네요.
혹시 확인하고 싶으시다면 소스를 복사해서 해보세요.
감사합니다.