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 옆에 변수가 들어간 것을 확인할 수 있습니다.

 

감사합니다.

 

 

'ANGULARJS' 카테고리의 다른 글

angularJS While문같은 repeat  (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 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

이번에는 숫자만으로 계산하는 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

 

 

 

간단하게 이렇게 출력됩니다.

설명은 소스코드에 다 있어서 참조하시면 되겠습니다.

감사합니다.

 

 

 

'ANGULARJS' 카테고리의 다른 글

angularJS While문같은 repeat  (0) 2016.06.27
angularJS contoller단을 이용하기  (0) 2016.06.27
angularJS Text박스 내용을 출력하기  (2) 2016.06.27
angularJS 설치하기  (0) 2016.06.26
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

 

 

 

이렇게 내용이 똑같이 나오네요.

 

혹시 확인하고 싶으시다면 소스를 복사해서 해보세요.

 

감사합니다.

 

'ANGULARJS' 카테고리의 다른 글

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

안녕하세요.

 

angularJS를 Eclipse에서 설치하는 방법을 알려드릴꼐요.

 

우선 JAVA설치 : http://jdkblog.tistory.com/1

Eclipse설치 :

Eclipse에서 apache Tomcat설치 : http://jdkblog.tistory.com/4

 

하시는 것을 권장해드릴꼐요 Eclipse에서의 연동이니까요 ㅎㅎ

 

 

1. 일단 eclipse에서 help - Check for Updates를 눌러주세요.

 

 

2. angularJS를 검색하면 이렇게 나온것을 Install합니다.

 

 

 

 

 

 

3. 다음화면에서 confirm을 눌르고 I accept를 체크후에 Fisish를 눌러주세요.(설치 도증에 어떤 화면이 나오면 OK를 2번쯤 눌르면 Eclipse를 재시작 할꺼예요.

 

다음 포스팅에서 angularJS설치확인을 할꼐요 ㅎㅎ

감사합니다~

 

 

 

 

 

 

 

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


이방법 혹은 원본파일에서 사용해도됩니다..

var s = document.createElement('script');

s.type = 'text/javascript';

s.async = true;

s.src = '//code.jquery.com/jquery-1.11.3.min.js';

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(s);


$(document).ready(function(){

JQUERY 구문

});

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

HTML 메일에 간단하게 알려드리겠습니다.

 

<!DOCTYPE html>
<html>
<body>

<p>
This is an email link:
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">Send Mail</a>
</p>

<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
</p>

</body>
</html>

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

 

 

$.ajax({
   type:'POST',
   data:new FormData($('#formId')[0]),
   cache: false,
   processData: false,
   contentType:false,
   url:"URL주소",
   success:성공함수,
   error:에러함수
  });

 

 

 

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

안녕하세요 이번엔 PHP에서 주소를 가져오는 방법을 알려드릴꼐요.

 

<?

   

    $hostname=$_SERVER["HTTP_HOST"]; //도메인명(호스트)명을 구합니다.
   $uri= $_SERVER['REQUEST_URI']; //uri를 구합니다.
   $query_string=getenv("QUERY_STRING"); // Get값으로 넘어온 값들을 구합니다.
   $phpself=$_SERVER["PHP_SELF"]; //현재 실행되고 있는 페이지의 url을 구합니다.
   $basename=basename($_SERVER["PHP_SELF"]); //현재 실행되고 있는 페이지명만 구합니다.

   echo$hostname."<br>";
   echo$uri."<br>";
   echo$query_string."<br>";
   echo$phpself."<br>";
   echo$basename."<br>";


?>

순차적으로 예를 나타낸다면

www.nver.com

/test.php?con=ddd

con=ddd

/test.php

test.php

+ Recent posts