AngularJS ng-init를 이용한 여러가지 초기화방법

JAVA/AngularJS 2016. 1. 28. 14:22

정수 초기화

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>




<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>


스트링 값 초기화

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>



<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>




객체형태로초기화 

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">


<p>The name is {{ person.lastName }}</p>

</div>



<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is <span ng-bind="person.lastName"></span></p>

</div>



배열로 초기화하는 방법

div ng-app="" ng-init="points=[1,15,19,2,40]">


<p>The third result is {{ points[2] }}</p>

</div>

저작자표시 비영리 변경금지

'JAVA > AngularJS' 카테고리의 다른 글

AngularJS  (0) 2016.01.28
AngularJS 흔히 알고있는 Print와 같은 {{}}  (0) 2016.01.28
AngularJS 변수초기화해주는 NG-INIT  (0) 2016.01.28
AngularJS 시작  (0) 2016.01.28
블로그 이미지

왕왕왕왕

왕

,

AngularJS

JAVA/AngularJS 2016. 1. 28. 14:09

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>


Module 

var app = angular.module('myApp', []);


Controller

app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});


출력 First Name : John

       Last Name : Doe


Full Name : John Doe



저작자표시 비영리 변경금지

'JAVA > AngularJS' 카테고리의 다른 글

AngularJS ng-init를 이용한 여러가지 초기화방법  (0) 2016.01.28
AngularJS 흔히 알고있는 Print와 같은 {{}}  (0) 2016.01.28
AngularJS 변수초기화해주는 NG-INIT  (0) 2016.01.28
AngularJS 시작  (0) 2016.01.28
블로그 이미지

왕왕왕왕

왕

,

AngularJS 흔히 알고있는 Print와 같은 {{}}

JAVA/AngularJS 2016. 1. 28. 14:00

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>


출력 My first expression: 10


앵귤러는 OUTPUT을  {{}} 두번괄호 안에 작성하게된다.


흔히알고 있는 PRINT문처럼  식을 사용하여 합산 결과를 확인 할 수도 있다.

저작자표시 비영리 변경금지

'JAVA > AngularJS' 카테고리의 다른 글

AngularJS ng-init를 이용한 여러가지 초기화방법  (0) 2016.01.28
AngularJS  (0) 2016.01.28
AngularJS 변수초기화해주는 NG-INIT  (0) 2016.01.28
AngularJS 시작  (0) 2016.01.28
블로그 이미지

왕왕왕왕

왕

,

AngularJS 변수초기화해주는 NG-INIT

JAVA/AngularJS 2016. 1. 28. 13:52

<div ng-app="">

  <p>Name : <input type="text" ng-init="firstname='john'">

  <h1>The name is {{firstname}}</h1>

  <p ng-bind='firstname'></p>

</div>


1. ng-init에 firstname=john 이라고 초기화해줬다.

2. h1태그에서 firstname을 불러와서 john을 출력해줬다.

3. p태그에 정의해준 firstname으로 ng-bind지시자를 사용해 john을 부를 수있다.




같은 기능으로 


data-ng-init와  data-ng-bind를사용 할 수도있다. 똑같다.









저작자표시 비영리 변경금지

'JAVA > AngularJS' 카테고리의 다른 글

AngularJS ng-init를 이용한 여러가지 초기화방법  (0) 2016.01.28
AngularJS  (0) 2016.01.28
AngularJS 흔히 알고있는 Print와 같은 {{}}  (0) 2016.01.28
AngularJS 시작  (0) 2016.01.28
블로그 이미지

왕왕왕왕

왕

,

AngularJS 시작

JAVA/AngularJS 2016. 1. 28. 13:39

<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

</head>

<body>


<div ng-app="">

  <p>Name : <input type="text" ng-model="name">

  <h1>Hello {{name}}</h1>

  <p ng-bind='name'></p>

</div>

</body>

</html>



1. 앵귤러JS사용 하려면 스크립트경로를 추가해줘야된다.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>


2,NG-APP은 <DIV> 요소는 AngularJS 응용 프로그램의 "소유자"입니다 AngularJS을 알려줍니다.


NG-MODEL은 애플리케이션 변수 이름 입력 필드의 값을 결합한다.


NG-BIND 지시문은 응용 프로그램 변수 이름에 <P> 요소의 innerHTML을 결합한다.



출력결과


input에 123을 작성하게 되면


{{name}}에 123이 입력되고


동시에 바인드된 <p>태그에서도 123이 작성된다.




저작자표시 비영리 변경금지

'JAVA > AngularJS' 카테고리의 다른 글

AngularJS ng-init를 이용한 여러가지 초기화방법  (0) 2016.01.28
AngularJS  (0) 2016.01.28
AngularJS 흔히 알고있는 Print와 같은 {{}}  (0) 2016.01.28
AngularJS 변수초기화해주는 NG-INIT  (0) 2016.01.28
블로그 이미지

왕왕왕왕

왕

,

공지사항

태그목록

글 보관함

달력

«   2024/06   »
일 월 화 수 목 금 토
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

티스토리툴바