ionic으로 모바일앱 만들기 #3

71
Ionic 으로 모바일앱 만들기 #3. Angularjs, Javascript Component ABCD, 스노우키위 한성일

Upload: -

Post on 28-Jul-2015

322 views

Category:

Software


4 download

TRANSCRIPT

Page 1: Ionic으로 모바일앱 만들기 #3

Ionic����������� ������������������  으로����������� ������������������  모바일앱����������� ������������������  만들기#3.����������� ������������������  Angularjs,����������� ������������������  Javascript����������� ������������������  Component

ABCD,����������� ������������������  스노우키위����������� ������������������  한성일

Page 2: Ionic으로 모바일앱 만들기 #3

1. Angularjs

2. Angularjs 실습

3. 스마트폰 테스트

4. 아이오닉 자바스크립트 컴포넌트 #1

코스

Page 3: Ionic으로 모바일앱 만들기 #3

1.����������� ������������������  Angularjs

Page 4: Ionic으로 모바일앱 만들기 #3

Angularjs

제이쿼리보다 쉬워요.

Page 5: Ionic으로 모바일앱 만들기 #3

Angularjs

Page 6: Ionic으로 모바일앱 만들기 #3

익숙치����������� ������������������  않은����������� ������������������  콘솔

<!DOCTYPE����������� ������������������  html>����������� ������������������  <html>����������� ������������������  <head����������� ������������������  lang="en">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <meta����������� ������������������  charset="UTF-8">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <title></title>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <script����������� ������������������  src=����������� ������������������  "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>����������� ������������������  </head>����������� ������������������  <body>����������� ������������������  </body>����������� ������������������  </html>

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

<head> 와 </head> 사이에 나은 줄이 꼭 필요합니다. 제이쿼리와 비슷하죠.

Page 7: Ionic으로 모바일앱 만들기 #3

작업디렉토리로

cd c:\ionic-space

cd ~/Document/ionic-space

Page 8: Ionic으로 모바일앱 만들기 #3

작업디렉토리로

md angularjs

mkdir angularjs

Page 9: Ionic으로 모바일앱 만들기 #3

2.����������� ������������������  Angularjs����������� ������������������  실습

Page 10: Ionic으로 모바일앱 만들기 #3

first

<!DOCTYPE����������� ������������������  html>����������� ������������������  <html>����������� ������������������  <head����������� ������������������  lang="ko">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <meta����������� ������������������  charset="UTF-8">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <title></title>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <script����������� ������������������  src=����������� ������������������  "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>����������� ������������������  </head>����������� ������������������  <body>����������� ������������������  ����������� ������������������  ����������� ������������������  <div����������� ������������������  ng-app="">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <p>Name����������� ������������������  :����������� ������������������  <input����������� ������������������  type="text"����������� ������������������  ng-model="name"></p>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <h1>Hello����������� ������������������  {{name}}</h1>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <p>Userid����������� ������������������  :����������� ������������������  <input����������� ������������������  type="text"����������� ������������������  ng-model="id"></p>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <h2>Hello����������� ������������������  {{id}}</h2>����������� ������������������  ����������� ������������������  ����������� ������������������  </div>����������� ������������������  </body>����������� ������������������  </html>

Page 11: Ionic으로 모바일앱 만들기 #3

Expressions

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

Page 12: Ionic으로 모바일앱 만들기 #3

Expressions

<div����������� ������������������  ng-app=""����������� ������������������  ng-init="quantity=1;cost=5">����������� ������������������  ����������� ������������������  ����������� ������������������  <p>Total����������� ������������������  in����������� ������������������  dollar:����������� ������������������  {{����������� ������������������  quantity����������� ������������������  *����������� ������������������  cost����������� ������������������  }}</p>����������� ������������������  </div>

Page 13: Ionic으로 모바일앱 만들기 #3

Expressions

<div����������� ������������������  ng-app=""����������� ������������������  ng-init="quantity=1;cost=5">����������� ������������������  ����������� ������������������  ����������� ������������������  <p>Total����������� ������������������  in����������� ������������������  dollar:����������� ������������������  <span����������� ������������������  ng-bind="quantity����������� ������������������  *����������� ������������������  cost"></span></p>����������� ������������������  </div>

Page 14: Ionic으로 모바일앱 만들기 #3

Expressions

<div����������� ������������������  ng-app=""����������� ������������������  ng-init="firstName='John';lastName='Doe'">����������� ������������������  <p>The����������� ������������������  full����������� ������������������  name����������� ������������������  is:����������� ������������������  {{����������� ������������������  firstName����������� ������������������  +����������� ������������������  "����������� ������������������  "����������� ������������������  +����������� ������������������  lastName����������� ������������������  }}</p>

Page 15: Ionic으로 모바일앱 만들기 #3

Expressions

<div����������� ������������������  ng-app=""����������� ������������������  ng-init="firstName='John';lastName='Doe'">����������� ������������������  ����������� ������������������  ����������� ������������������  <p>The����������� ������������������  name����������� ������������������  is����������� ������������������  <span����������� ������������������  ng-bind="firstName����������� ������������������  +����������� ������������������  '����������� ������������������  '����������� ������������������  +����������� ������������������  lastName"></span></p>����������� ������������������  </div>

Page 16: Ionic으로 모바일앱 만들기 #3

Expressions

<div����������� ������������������  ng-app=""����������� ������������������  ng-init="person={firstName:'John',lastName:'Doe'}">����������� ������������������  ����������� ������������������  ����������� ������������������  <p>The����������� ������������������  name����������� ������������������  is����������� ������������������  {{����������� ������������������  person.lastName����������� ������������������  }}</p>����������� ������������������  </div>

Page 17: Ionic으로 모바일앱 만들기 #3

Expressions

<div����������� ������������������  ng-app=""����������� ������������������  ng-init="person={firstName:'John',lastName:'Doe'}">����������� ������������������  ����������� ������������������  ����������� ������������������  <p>The����������� ������������������  name����������� ������������������  is����������� ������������������  <span����������� ������������������  ng-bind="person.lastName"></span></p>����������� ������������������  </div>

Page 18: Ionic으로 모바일앱 만들기 #3

Expressions

<div����������� ������������������  ng-app=""����������� ������������������  ng-init="points=[1,15,19,2,40]">����������� ������������������  ����������� ������������������  ����������� ������������������  <p>The����������� ������������������  third����������� ������������������  result����������� ������������������  is����������� ������������������  {{����������� ������������������  points[2]����������� ������������������  }}</p>����������� ������������������  </div>

Page 19: Ionic으로 모바일앱 만들기 #3

Directives

<div����������� ������������������  ng-app=""����������� ������������������  ng-init="points=[1,15,19,2,40]">����������� ������������������  ����������� ������������������  ����������� ������������������  <p>The����������� ������������������  third����������� ������������������  result����������� ������������������  is����������� ������������������  <span����������� ������������������  ng-bind="points[2]"></span></p>����������� ������������������  </div>

Page 20: Ionic으로 모바일앱 만들기 #3

Directives

<div����������� ������������������  data-ng-app=""����������� ������������������  data-ng-init="quantity=1;price=5">����������� ������������������  ����������� ������������������  ����������� ������������������  <h2>Cost����������� ������������������  Calculator</h2>����������� ������������������  ����������� ������������������  ����������� ������������������  Quantity:����������� ������������������  <input����������� ������������������  type="number"����������� ������������������  ng-model="quantity">����������� ������������������  ����������� ������������������  ����������� ������������������  Price:����������� ������������������  <input����������� ������������������  type="number"����������� ������������������  ng-model="price">����������� ������������������  ����������� ������������������  ����������� ������������������  <p><b>Total����������� ������������������  in����������� ������������������  dollar:</b>����������� ������������������  {{quantity����������� ������������������  *����������� ������������������  price}}</p>����������� ������������������  </div>

Page 21: Ionic으로 모바일앱 만들기 #3

Directives

<div����������� ������������������  data-ng-app=""����������� ������������������  data-ng-init="names=['Jani','Hege','Kai']">����������� ������������������  ����������� ������������������  ����������� ������������������  <p>Looping����������� ������������������  with����������� ������������������  ng-repeat:</p>����������� ������������������  ����������� ������������������  ����������� ������������������  <ul>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <li����������� ������������������  data-ng-repeat="x����������� ������������������  in����������� ������������������  names">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {{����������� ������������������  x����������� ������������������  }}����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  </li>����������� ������������������  ����������� ������������������  ����������� ������������������  </ul>����������� ������������������  </div>

Page 22: Ionic으로 모바일앱 만들기 #3

Directives

<div����������� ������������������  ng-app=""����������� ������������������  ng-init="names=[����������� ������������������  ����������� ������������������  ����������� ������������������  {name:'Jani',country:'Norway'},����������� ������������������  ����������� ������������������  ����������� ������������������  {name:'Hege',country:'Sweden'},����������� ������������������  ����������� ������������������  ����������� ������������������  {name:'Kai',country:'Denmark'}]">����������� ������������������  

����������� ������������������  ����������� ������������������  <ul>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <li����������� ������������������  ng-repeat="x����������� ������������������   in����������� ������������������  names">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {{����������� ������������������  x.name����������� ������������������  +����������� ������������������  ',����������� ������������������  '����������� ������������������  +����������� ������������������  x.country����������� ������������������  }}����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  </li>����������� ������������������  ����������� ������������������  ����������� ������������������  </ul>����������� ������������������  

</div>

Page 23: Ionic으로 모바일앱 만들기 #3

Controllers

<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>

Page 24: Ionic으로 모바일앱 만들기 #3

Controllers

<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="personCtrl">����������� ������������������  

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

</div>����������� ������������������  

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

Page 25: Ionic으로 모바일앱 만들기 #3

Controllers

<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="personCtrl">����������� ������������������  

����������� ������������������  ����������� ������������������  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����������� ������������������  src="personController.js"></script>

Page 26: Ionic으로 모바일앱 만들기 #3

personController.js

angular.module('myApp',����������� ������������������  []).controller('personCtrl',����������� ������������������  function($scope)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $scope.firstName����������� ������������������  =����������� ������������������  "John",����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $scope.lastName����������� ������������������  =����������� ������������������  "Doe",����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $scope.fullName����������� ������������������  =����������� ������������������  function()����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  return����������� ������������������  $scope.firstName����������� ������������������  +����������� ������������������  "����������� ������������������  "����������� ������������������  +����������� ������������������  $scope.lastName;����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  }����������� ������������������  });

Page 27: Ionic으로 모바일앱 만들기 #3

Controllers

<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="namesCtrl">����������� ������������������  ����������� ������������������  

����������� ������������������  ����������� ������������������  <ul>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <li����������� ������������������  ng-repeat="x����������� ������������������  in����������� ������������������  names">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {{����������� ������������������  x.name����������� ������������������  +����������� ������������������  ',����������� ������������������  '����������� ������������������  +����������� ������������������  x.country����������� ������������������  }}����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  </li>����������� ������������������  ����������� ������������������  ����������� ������������������  </ul>����������� ������������������  

</div>����������� ������������������  

<script����������� ������������������  src="namesController.js"></script>

Page 28: Ionic으로 모바일앱 만들기 #3

namesController.js

angular.module('myApp',����������� ������������������  []).controller('namesCtrl',����������� ������������������  function($scope)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  names=[����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {name:'Jani',country:'Norway'},����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {name:'Hege',country:'Sweden'},����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {name:'Kai',country:'Denmark'}];����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $scope.names����������� ������������������  =����������� ������������������  names;����������� ������������������  });

Page 29: Ionic으로 모바일앱 만들기 #3

Filter

<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="personCtrl">����������� ������������������  ����������� ������������������  ����������� ������������������  <p>The����������� ������������������  name����������� ������������������  is����������� ������������������  {{����������� ������������������  lastName����������� ������������������  |����������� ������������������  uppercase����������� ������������������  }}</p>����������� ������������������  ����������� ������������������  ����������� ������������������  <p>The����������� ������������������  name����������� ������������������  is����������� ������������������  {{����������� ������������������  lastName����������� ������������������  |����������� ������������������  lowercase����������� ������������������  }}</p>����������� ������������������  </div>����������� ������������������  

<script����������� ������������������  src="personController.js"></script>

Page 30: Ionic으로 모바일앱 만들기 #3

Filter

<div����������� ������������������  ng-app=""����������� ������������������  >����������� ������������������  ����������� ������������������  ����������� ������������������  <input����������� ������������������  type="number"����������� ������������������  ng-model="quantity">����������� ������������������  ����������� ������������������  ����������� ������������������  <input����������� ������������������  type="number"����������� ������������������  ng-model="price">����������� ������������������  

����������� ������������������  ����������� ������������������  <p>Total����������� ������������������  =����������� ������������������  {{����������� ������������������  (quantity����������� ������������������  *����������� ������������������  price)����������� ������������������  |����������� ������������������  currency����������� ������������������  }}</p>����������� ������������������  </div>

Page 31: Ionic으로 모바일앱 만들기 #3

Filter

<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="namesCtrl">����������� ������������������  

<p>Looping����������� ������������������  with����������� ������������������  objects:</p>����������� ������������������  <ul>����������� ������������������  ����������� ������������������  ����������� ������������������  <li����������� ������������������  ng-repeat="x����������� ������������������  in����������� ������������������  names����������� ������������������  |����������� ������������������  orderBy:'country'">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {{����������� ������������������  x.name����������� ������������������  +����������� ������������������  ',����������� ������������������  '����������� ������������������  +����������� ������������������  x.country����������� ������������������  }}����������� ������������������  ����������� ������������������  ����������� ������������������  </li>����������� ������������������  </ul>����������� ������������������  

</div>����������� ������������������  <script����������� ������������������  src="namesController.js"></script>

Page 32: Ionic으로 모바일앱 만들기 #3

Filter

<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="namesCtrl">����������� ������������������  ����������� ������������������  ����������� ������������������  <p>Filtering����������� ������������������  input:</p>����������� ������������������  ����������� ������������������  ����������� ������������������  <p><input����������� ������������������  type="text"����������� ������������������  ng-model="test"></p>����������� ������������������  

����������� ������������������  ����������� ������������������  <ul>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <li����������� ������������������  ng-repeat="x����������� ������������������  in����������� ������������������  names����������� ������������������  |����������� ������������������  filter:test����������� ������������������  |����������� ������������������  orderBy:'country'">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {{����������� ������������������  (x.name����������� ������������������  |����������� ������������������  uppercase)����������� ������������������  +����������� ������������������  ',����������� ������������������  '����������� ������������������  +����������� ������������������  x.country����������� ������������������  }}����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  </li>����������� ������������������  ����������� ������������������  ����������� ������������������  </ul>����������� ������������������  

</div>����������� ������������������  <script����������� ������������������  src="namesController.js"></script>

Page 33: Ionic으로 모바일앱 만들기 #3

Http

<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="customersCtrl">����������� ������������������  ����������� ������������������  

<ul>����������� ������������������  ����������� ������������������  ����������� ������������������  <li����������� ������������������  ng-repeat="x����������� ������������������  in����������� ������������������  names">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {{����������� ������������������  x.Name����������� ������������������  +����������� ������������������  ',����������� ������������������  '����������� ������������������  +����������� ������������������  x.Country����������� ������������������  }}����������� ������������������  ����������� ������������������  ����������� ������������������  </li>����������� ������������������  </ul>����������� ������������������  

</div>����������� ������������������  

<script>����������� ������������������  var����������� ������������������  app����������� ������������������  =����������� ������������������  angular.module('myApp',����������� ������������������  []);����������� ������������������  app.controller('customersCtrl',����������� ������������������  function($scope,����������� ������������������  $http)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  $http.get("http://www.w3schools.com/angular/customers.php")����������� ������������������  ����������� ������������������  ����������� ������������������  .success(function����������� ������������������  (response)����������� ������������������  {$scope.names����������� ������������������  =����������� ������������������  response.records;});����������� ������������������  });����������� ������������������  </script>

Page 34: Ionic으로 모바일앱 만들기 #3

Table

<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="customersCtrl">����������� ������������������  ����������� ������������������  

<table>����������� ������������������  ����������� ������������������  ����������� ������������������  <tr����������� ������������������  ng-repeat="x����������� ������������������  in����������� ������������������  names">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <td>{{����������� ������������������  x.Name����������� ������������������  }}</td>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <td>{{����������� ������������������  x.Country����������� ������������������  }}</td>����������� ������������������  ����������� ������������������  ����������� ������������������  </tr>����������� ������������������  </table>����������� ������������������  

</div>����������� ������������������  

<script>����������� ������������������  var����������� ������������������  app����������� ������������������  =����������� ������������������  angular.module('myApp',����������� ������������������  []);����������� ������������������  app.controller('customersCtrl',����������� ������������������  function($scope,����������� ������������������  $http)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $http.get("http://www.w3schools.com/angular/customers.php")����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  .success(function����������� ������������������  (response)����������� ������������������  {$scope.names����������� ������������������  =����������� ������������������  response.records;});����������� ������������������  });����������� ������������������  </script>

Page 35: Ionic으로 모바일앱 만들기 #3

Table<style>����������� ������������������  table,����������� ������������������  th����������� ������������������  ,����������� ������������������  td����������� ������������������  ����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  border:����������� ������������������  1px����������� ������������������  solid����������� ������������������  grey;����������� ������������������  ����������� ������������������  ����������� ������������������  border-collapse:����������� ������������������  collapse;����������� ������������������  ����������� ������������������  ����������� ������������������  padding:����������� ������������������  5px;����������� ������������������  }����������� ������������������  table����������� ������������������  tr:nth-child(odd)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  background-color:����������� ������������������  #f1f1f1;����������� ������������������  }����������� ������������������  table����������� ������������������  tr:nth-child(even)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  background-color:����������� ������������������  #ffffff;����������� ������������������  }����������� ������������������  </style>

<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="customersCtrl">����������� ������������������  ����������� ������������������  

<table>����������� ������������������  ����������� ������������������  ����������� ������������������  <tr����������� ������������������  ng-repeat="x����������� ������������������  in����������� ������������������  names">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <td>{{����������� ������������������  x.Name����������� ������������������  }}</td>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <td>{{����������� ������������������  x.Country����������� ������������������  }}</td>����������� ������������������  ����������� ������������������  ����������� ������������������  </tr>����������� ������������������  </table>����������� ������������������  

</div>����������� ������������������  

<script>����������� ������������������  var����������� ������������������  app����������� ������������������  =����������� ������������������  angular.module('myApp',����������� ������������������  []);����������� ������������������  app.controller('customersCtrl',����������� ������������������  function($scope,����������� ������������������  $http)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $http.get("http://www.w3schools.com/angular/customers.php")����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  .success(function����������� ������������������  (response)����������� ������������������  {$scope.names����������� ������������������  =����������� ������������������  response.records;});����������� ������������������  });����������� ������������������  </script>

Page 36: Ionic으로 모바일앱 만들기 #3

Table

<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="customersCtrl">����������� ������������������  ����������� ������������������  

<table>����������� ������������������  ����������� ������������������  ����������� ������������������  <tr����������� ������������������  ng-repeat="x����������� ������������������  in����������� ������������������  names">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <td>{{����������� ������������������  x.Name����������� ������������������  }}</td>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <td>{{����������� ������������������  x.Country����������� ������������������  |����������� ������������������  uppercase����������� ������������������  }}</td>����������� ������������������  ����������� ������������������  ����������� ������������������  </tr>����������� ������������������  </table>����������� ������������������  

</div>����������� ������������������  

<script>����������� ������������������  var����������� ������������������  app����������� ������������������  =����������� ������������������  angular.module('myApp',����������� ������������������  []);����������� ������������������  app.controller('customersCtrl',����������� ������������������  function($scope,����������� ������������������  $http)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $http.get("http://www.w3schools.com/angular/customers.php")����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  .success(function����������� ������������������  (response)����������� ������������������  {$scope.names����������� ������������������  =����������� ������������������  response.records;});����������� ������������������  });����������� ������������������  </script>

Page 37: Ionic으로 모바일앱 만들기 #3

Table

<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="customersCtrl">����������� ������������������  ����������� ������������������  

<table>����������� ������������������  ����������� ������������������  ����������� ������������������  <tr����������� ������������������  ng-repeat="x����������� ������������������  in����������� ������������������  names">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <td>{{����������� ������������������  $index����������� ������������������  +����������� ������������������  1����������� ������������������  }}</td>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <td>{{����������� ������������������  x.Name����������� ������������������  }}</td>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <td>{{����������� ������������������  x.Country����������� ������������������  }}</td>����������� ������������������  ����������� ������������������  ����������� ������������������  </tr>����������� ������������������  </table>����������� ������������������  

</div>����������� ������������������  

<script>����������� ������������������  ����������� ������������������  ����������� ������������������  var����������� ������������������  app����������� ������������������  =����������� ������������������  angular.module('myApp',����������� ������������������  []);����������� ������������������  ����������� ������������������  ����������� ������������������  app.controller('customersCtrl',����������� ������������������  function($scope,����������� ������������������  $http)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $http.get("http://www.w3schools.com/angular/customers.php")����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  .success(function����������� ������������������  (response)����������� ������������������  {$scope.names����������� ������������������  =����������� ������������������  response.records;});����������� ������������������  ����������� ������������������  ����������� ������������������  });����������� ������������������  </script>

Page 38: Ionic으로 모바일앱 만들기 #3

Table

<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="customersCtrl">����������� ������������������  ����������� ������������������  

<table>����������� ������������������  ����������� ������������������  ����������� ������������������  <tr����������� ������������������  ng-repeat="x����������� ������������������  in����������� ������������������  names">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <td����������� ������������������  ng-if="$odd"����������� ������������������  style="background-color:#f1f1f1">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {{����������� ������������������  x.Name����������� ������������������  }}</td>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <td����������� ������������������  ng-if="$even">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {{����������� ������������������  x.Name����������� ������������������  }}</td>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <td����������� ������������������  ng-if="$odd"����������� ������������������  style="background-color:#f1f1f1">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {{����������� ������������������  x.Country����������� ������������������  }}</td>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <td����������� ������������������  ng-if="$even">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {{����������� ������������������  x.Country����������� ������������������  }}</td>����������� ������������������  ����������� ������������������  ����������� ������������������  </tr>����������� ������������������  </table>����������� ������������������  </div>����������� ������������������  <script>����������� ������������������  var����������� ������������������  app����������� ������������������  =����������� ������������������  angular.module('myApp',����������� ������������������  []);����������� ������������������  app.controller('customersCtrl',����������� ������������������  function($scope,����������� ������������������  $http)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $http.get("http://www.w3schools.com/angular/customers.php")����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  .success(function����������� ������������������  (response)����������� ������������������  {$scope.names����������� ������������������  =����������� ������������������  response.records;});����������� ������������������  });����������� ������������������  </script>

Page 39: Ionic으로 모바일앱 만들기 #3

DOM

<div����������� ������������������  ng-app=""����������� ������������������  ng-init="mySwitch=true">����������� ������������������  ����������� ������������������  ����������� ������������������  <p>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <button����������� ������������������  ng-disabled="mySwitch">Click����������� ������������������  Me!</button>����������� ������������������  ����������� ������������������  ����������� ������������������  </p>����������� ������������������  ����������� ������������������  ����������� ������������������  <p>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <input����������� ������������������  type="checkbox"����������� ������������������  ng-model="mySwitch"/>Button����������� ������������������  ����������� ������������������  ����������� ������������������  </p>����������� ������������������  ����������� ������������������  ����������� ������������������  <p>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {{����������� ������������������  mySwitch����������� ������������������  }}����������� ������������������  ����������� ������������������  ����������� ������������������  </p>����������� ������������������  </div>����������� ������������������  

Page 40: Ionic으로 모바일앱 만들기 #3

DOM

<div����������� ������������������  ng-app="">����������� ������������������  ����������� ������������������  ����������� ������������������  <p����������� ������������������  ng-show="true">I����������� ������������������  am����������� ������������������  visible.</p>����������� ������������������  ����������� ������������������  ����������� ������������������  <p����������� ������������������  ng-show="false">I����������� ������������������  am����������� ������������������  not����������� ������������������  visible.</p>����������� ������������������  </div>����������� ������������������  

Page 41: Ionic으로 모바일앱 만들기 #3

DOM

<div����������� ������������������  ng-app=""����������� ������������������  ng-init="hour=13">����������� ������������������  ����������� ������������������  ����������� ������������������  <p����������� ������������������  ng-show="hour����������� ������������������  >����������� ������������������  12">I����������� ������������������  am����������� ������������������  visible.</p>����������� ������������������  </div>����������� ������������������  

Page 42: Ionic으로 모바일앱 만들기 #3

DOM

<div����������� ������������������  ng-app="">����������� ������������������  ����������� ������������������  ����������� ������������������  <p����������� ������������������  ng-hide="true">I����������� ������������������  am����������� ������������������  not����������� ������������������  visible.</p>����������� ������������������  ����������� ������������������  ����������� ������������������  <p����������� ������������������  ng-hide="false">I����������� ������������������  am����������� ������������������  visible.</p>����������� ������������������  </div>����������� ������������������  

Page 43: Ionic으로 모바일앱 만들기 #3

Event

<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="myCtrl">����������� ������������������  <button����������� ������������������  ng-click="count����������� ������������������  =����������� ������������������  count����������� ������������������  +����������� ������������������  1">Click����������� ������������������  Me!</button>����������� ������������������  <p>{{����������� ������������������  count����������� ������������������  }}</p>����������� ������������������  

</div>����������� ������������������  <script>����������� ������������������  ����������� ������������������  ����������� ������������������  var����������� ������������������  app����������� ������������������  =����������� ������������������  angular.module('myApp',����������� ������������������  []);����������� ������������������  ����������� ������������������  ����������� ������������������  app.controller('myCtrl',����������� ������������������  function($scope)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $scope.count����������� ������������������  =����������� ������������������  0;����������� ������������������  ����������� ������������������  ����������� ������������������  });����������� ������������������  </script>����������� ������������������  

Page 44: Ionic으로 모바일앱 만들기 #3

Event<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="personCtrl">����������� ������������������  ����������� ������������������  ����������� ������������������  <p����������� ������������������  ng-show="myVar">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  First����������� ������������������  Name:����������� ������������������  <input����������� ������������������  type=text����������� ������������������  ng-model="person.firstName"><br>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  Last����������� ������������������  Name:����������� ������������������  <input����������� ������������������  type=text����������� ������������������  ng-model="person.lastName"><br><br>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  Full����������� ������������������  Name:����������� ������������������  {{person.firstName����������� ������������������  +����������� ������������������  "����������� ������������������  "����������� ������������������  +����������� ������������������  person.lastName}}����������� ������������������  ����������� ������������������  ����������� ������������������  </p>����������� ������������������  ����������� ������������������  <button����������� ������������������  ng-click="toggle()"����������� ������������������  >Click����������� ������������������  Me!</button>����������� ������������������  

</div>����������� ������������������  

<script>����������� ������������������  ����������� ������������������  ����������� ������������������  var����������� ������������������  app����������� ������������������  =����������� ������������������  angular.module('myApp',����������� ������������������  []);����������� ������������������  ����������� ������������������  ����������� ������������������  app.controller('personCtrl',����������� ������������������  function($scope)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $scope.person����������� ������������������  =����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  firstName:����������� ������������������  "John",����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  lastName:����������� ������������������  "Doe"����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  };����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $scope.myVar����������� ������������������  =����������� ������������������  true;����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $scope.toggle����������� ������������������  =����������� ������������������  function()����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $scope.myVar����������� ������������������  =����������� ������������������  !$scope.myVar;����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  };����������� ������������������  ����������� ������������������  ����������� ������������������  });����������� ������������������  </script>����������� ������������������  

Page 45: Ionic으로 모바일앱 만들기 #3

Event

<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="myCtrl">����������� ������������������  ����������� ������������������  ����������� ������������������  {{����������� ������������������  firstName����������� ������������������  +����������� ������������������  "����������� ������������������  "����������� ������������������  +����������� ������������������  lastName����������� ������������������  }}����������� ������������������  </div>����������� ������������������  

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

Page 46: Ionic으로 모바일앱 만들기 #3

Module

<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="myCtrl">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {{����������� ������������������  firstName����������� ������������������  +����������� ������������������  "����������� ������������������  "����������� ������������������  +����������� ������������������  lastName����������� ������������������  }}����������� ������������������  </div>����������� ������������������  

<script����������� ������������������  src="myApp.js"></script>����������� ������������������  <script����������� ������������������  src="myCtrl.js"></script>

Page 47: Ionic으로 모바일앱 만들기 #3

myApp.js

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

Page 48: Ionic으로 모바일앱 만들기 #3

myCtrl.js

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

Page 49: Ionic으로 모바일앱 만들기 #3

Module

<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="myCtrl">����������� ������������������  ����������� ������������������  ����������� ������������������  {{����������� ������������������  firstName����������� ������������������  +����������� ������������������  "����������� ������������������  "����������� ������������������  +����������� ������������������  lastName����������� ������������������  }}����������� ������������������  </div>����������� ������������������  

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

Page 50: Ionic으로 모바일앱 만들기 #3

Form<div����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="formCtrl">����������� ������������������  ����������� ������������������  ����������� ������������������  <form����������� ������������������  novalidate>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  First����������� ������������������  Name:<br>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <input����������� ������������������  type="text"����������� ������������������  ng-model="user.firstName"><br>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  Last����������� ������������������  Name:<br>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <input����������� ������������������  type="text"����������� ������������������  ng-model="user.lastName">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <br><br>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <button����������� ������������������  ng-click="reset()">RESET</button>����������� ������������������  ����������� ������������������  ����������� ������������������  </form>����������� ������������������  ����������� ������������������  ����������� ������������������  <p>form����������� ������������������  =����������� ������������������  {{user����������� ������������������  }}</p>����������� ������������������  ����������� ������������������  ����������� ������������������  <p>master����������� ������������������  =����������� ������������������  {{master}}</p>����������� ������������������  </div>����������� ������������������  

<script>����������� ������������������  ����������� ������������������  ����������� ������������������  var����������� ������������������  app����������� ������������������  =����������� ������������������  angular.module('myApp',����������� ������������������  []);����������� ������������������  ����������� ������������������  ����������� ������������������  app.controller('formCtrl',����������� ������������������  function($scope)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $scope.master����������� ������������������  =����������� ������������������  {firstName:"John",����������� ������������������  lastName:"Doe"};����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $scope.reset����������� ������������������  =����������� ������������������  function()����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $scope.user����������� ������������������  =����������� ������������������  angular.copy($scope.master);����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  };����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $scope.reset();����������� ������������������  ����������� ������������������  ����������� ������������������  });����������� ������������������  </script>

Page 51: Ionic으로 모바일앱 만들기 #3

Validation<h2>Validation����������� ������������������  Example</h2>����������� ������������������  <form����������� ������������������  ng-app="myApp"����������� ������������������  ng-controller="validateCtrl"����������� ������������������  name="myForm"����������� ������������������  novalidate>����������� ������������������  ����������� ������������������  ����������� ������������������  <p>Username:<br>����������� ������������������  ����������� ������������������  ����������� ������������������  <input����������� ������������������  type="text"����������� ������������������  name="user"����������� ������������������  ng-model="user"����������� ������������������  required>����������� ������������������  ����������� ������������������  ����������� ������������������  <span����������� ������������������  style="color:red"����������� ������������������  ng-show="myForm.user.$dirty����������� ������������������  &&����������� ������������������  myForm.user.$invalid">����������� ������������������  ����������� ������������������  ����������� ������������������  <span����������� ������������������  ng-show="myForm.user.$error.required">Username����������� ������������������  is����������� ������������������  required.</span>����������� ������������������  ����������� ������������������  ����������� ������������������  </span>����������� ������������������  ����������� ������������������  ����������� ������������������  </p>����������� ������������������  ����������� ������������������  ����������� ������������������  <p>Email:<br>����������� ������������������  ����������� ������������������  ����������� ������������������  <input����������� ������������������  type="email"����������� ������������������  name="email"����������� ������������������  ng-model="email"����������� ������������������  required>����������� ������������������  ����������� ������������������  ����������� ������������������  <span����������� ������������������  style="color:red"����������� ������������������  ng-show="myForm.email.$dirty����������� ������������������  &&����������� ������������������  myForm.email.$invalid">����������� ������������������  ����������� ������������������  ����������� ������������������  <span����������� ������������������  ng-show="myForm.email.$error.required">Email����������� ������������������  is����������� ������������������  required.</span>����������� ������������������  ����������� ������������������  ����������� ������������������  <span����������� ������������������  ng-show="myForm.email.$error.email">Invalid����������� ������������������  email����������� ������������������  address.</span>����������� ������������������  ����������� ������������������  ����������� ������������������  </span>����������� ������������������  ����������� ������������������  ����������� ������������������  </p>����������� ������������������  ����������� ������������������  ����������� ������������������  <p>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <input����������� ������������������  type="submit"����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ng-disabled="myForm.user.$dirty����������� ������������������  &&����������� ������������������  myForm.user.$invalid����������� ������������������  ||����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  myForm.email.$dirty����������� ������������������  &&����������� ������������������  myForm.email.$invalid">����������� ������������������  ����������� ������������������  ����������� ������������������  </p>����������� ������������������  </form>����������� ������������������  <script>����������� ������������������  var����������� ������������������  app����������� ������������������  =����������� ������������������  angular.module('myApp',����������� ������������������  []);����������� ������������������  app.controller('validateCtrl',����������� ������������������  function($scope)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $scope.user����������� ������������������  =����������� ������������������  'John����������� ������������������  Doe';����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $scope.email����������� ������������������  =����������� ������������������  '[email protected]';����������� ������������������  });����������� ������������������  </script>

Page 52: Ionic으로 모바일앱 만들기 #3

사실..

http://www.w3schools.com/angular/default.asp

Page 53: Ionic으로 모바일앱 만들기 #3

3.����������� ������������������  스마트폰����������� ������������������  테스트

Page 54: Ionic으로 모바일앱 만들기 #3

기본����������� ������������������  소스����������� ������������������  다운로드

https://drive.google.com/folderview?id=0B_dqOWjvHbO9T1NDd3V6cXNjZmM&usp=sharing

Page 55: Ionic으로 모바일앱 만들기 #3

ionic upload

이메일

패스워드

cd secondApp

ionic upload

ionic upload 는 ionic 에서 관리하는 클라우드로 본앱을 업로드하는 명령어

Page 56: Ionic으로 모바일앱 만들기 #3

ionic����������� ������������������  cloud

https://apps.ionic.io/apps

Page 57: Ionic으로 모바일앱 만들기 #3

아이폰����������� ������������������  테스트

ionic view 앱 다운로드1

2

Page 58: Ionic으로 모바일앱 만들기 #3

안드로이드����������� ������������������  테스트

ionic view 앱 다운로드

Download files 필수

1

2

3

Page 59: Ionic으로 모바일앱 만들기 #3

4.����������� ������������������  아이오닉����������� ������������������  자바스크립트����������� ������������������  컴포넌트����������� ������������������  #1

http://codepen.io/gnomeontherun/ 참고

Page 60: Ionic으로 모바일앱 만들기 #3

앞으로의����������� ������������������  실습����������� ������������������  방법

www/app.js 경로 추가

www/templates/ 폴더에 새로운 템플릿 파일 추가

www/js/controllers.js 수정

1

2

3

Page 61: Ionic으로 모바일앱 만들기 #3

1.����������� ������������������  Actionsheet

Page 62: Ionic으로 모바일앱 만들기 #3

app.js

.state('ch1',����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  url:����������� ������������������  "/ch1",����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  templateUrl:����������� ������������������  "templates/ch1.html"����������� ������������������  })

Page 63: Ionic으로 모바일앱 만들기 #3

controller.js.controller('ActionsheetCtrl',����������� ������������������  function($scope,����������� ������������������  $ionicActionSheet)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $scope.showActionsheet����������� ������������������  =����������� ������������������  function()����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $ionicActionSheet.show({����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  titleText:����������� ������������������  'ActionSheet����������� ������������������  Example',����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  buttons:����������� ������������������  [����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {����������� ������������������  text:����������� ������������������  '<i����������� ������������������  class="icon����������� ������������������  ion-share"></i>����������� ������������������  Share'����������� ������������������  },����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {����������� ������������������  text:����������� ������������������  '<i����������� ������������������  class="icon����������� ������������������  ion-arrow-move"></i>����������� ������������������  Move'����������� ������������������  },����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ],����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  destructiveText:����������� ������������������  'Delete',����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  cancelText:����������� ������������������  'Cancel',����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  cancel:����������� ������������������  function()����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  console.log('CANCELLED');����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  },����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  buttonClicked:����������� ������������������  function(index)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  console.log('BUTTON����������� ������������������  CLICKED',����������� ������������������  index);����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  return����������� ������������������  true;����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  },����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  destructiveButtonClicked:����������� ������������������  function()����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  console.log('DESTRUCT');����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  return����������� ������������������  true;����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  }����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  });����������� ������������������  ����������� ������������������  ����������� ������������������  };����������� ������������������  })

Page 64: Ionic으로 모바일앱 만들기 #3

/www/templates/ch1.html

<ion-view����������� ������������������  view-title="Chapter1">����������� ������������������  ����������� ������������������  ����������� ������������������  <ion-content����������� ������������������  ng-controller="ActionsheetCtrl">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <div����������� ������������������  class="content����������� ������������������  padding����������� ������������������  has-header">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <button����������� ������������������  class="button����������� ������������������  button-light"����������� ������������������  ng-click="showActionsheet()">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  showActionsheet����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  </button>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  </div>����������� ������������������  ����������� ������������������  ����������� ������������������  </ion-content>����������� ������������������  </ion-view>

Page 65: Ionic으로 모바일앱 만들기 #3

/www/templates/home.html

<ion-view����������� ������������������  view-title="Menu">����������� ������������������  ����������� ������������������  ����������� ������������������  <ion-content>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <div����������� ������������������  class="content">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <button����������� ������������������  class="button����������� ������������������  button-full����������� ������������������  button-light"����������� ������������������  ui-sref="ch1">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  Chapter1����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  </button>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  </div>����������� ������������������  ����������� ������������������  ����������� ������������������  </ion-content>����������� ������������������  </ion-view>

Page 66: Ionic으로 모바일앱 만들기 #3

2.����������� ������������������  Loading

Page 67: Ionic으로 모바일앱 만들기 #3

app.js

.state('ch2',����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  url:����������� ������������������  "/ch2",����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  templateUrl:����������� ������������������  "templates/ch2.html"����������� ������������������  })����������� ������������������  

Page 68: Ionic으로 모바일앱 만들기 #3

controller.js

.controller('LoadingCtrl',����������� ������������������  function($scope,����������� ������������������  $timeout,����������� ������������������  $ionicLoading)����������� ������������������  {����������� ������������������  

����������� ������������������  ����������� ������������������  //����������� ������������������  Setup����������� ������������������  the����������� ������������������  loader����������� ������������������  ����������� ������������������  ����������� ������������������  $ionicLoading.show({����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  content:����������� ������������������  'Loading',����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  animation:����������� ������������������  'fade-in',����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  showBackdrop:����������� ������������������  true,����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  maxWidth:����������� ������������������  200,����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  showDelay:����������� ������������������  0����������� ������������������  ����������� ������������������  ����������� ������������������  });����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $timeout(function����������� ������������������  ()����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $ionicLoading.hide();����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $scope.stooges����������� ������������������  =����������� ������������������  [{name:����������� ������������������  'Moe'},����������� ������������������  {name:����������� ������������������  'Larry'},����������� ������������������  {name:����������� ������������������  'Curly'}];����������� ������������������  ����������� ������������������  ����������� ������������������  },����������� ������������������  2000);����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  });

Page 69: Ionic으로 모바일앱 만들기 #3

/www/templates/home.html

<ion-view����������� ������������������  view-title="Menu">����������� ������������������  ����������� ������������������  ����������� ������������������  <ion-content>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <div����������� ������������������  class="content">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <button����������� ������������������  class="button����������� ������������������  button-full����������� ������������������  button-light"����������� ������������������  ui-sref="ch1">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  Chapter1����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  </button>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <button����������� ������������������  class="button����������� ������������������  button-full����������� ������������������  button-light"����������� ������������������  ui-sref="ch2">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  Chapter2����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  </button>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  </div>����������� ������������������  ����������� ������������������  ����������� ������������������  </ion-content>����������� ������������������  </ion-view>

chapter2 입력

Page 70: Ionic으로 모바일앱 만들기 #3

/www/templates/ch2.html

<ion-view����������� ������������������  title="Chapter2">����������� ������������������  ����������� ������������������  ����������� ������������������  <ion-content����������� ������������������  ng-controller="LoadingCtrl">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <ion-list>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <ion-item����������� ������������������  ng-repeat="stooge����������� ������������������  in����������� ������������������  stooges"����������� ������������������  href="#">����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  {{stooge.name}}����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  </ion-item>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  </ion-list>����������� ������������������  ����������� ������������������  ����������� ������������������  </ion-content>����������� ������������������  </ion-view>

chapter2 입력

Page 71: Ionic으로 모바일앱 만들기 #3

수고하셨습니다.����������� ������������������  :)

ABCD����������� ������������������  ����������� ������������������   http://abcds.kr����������� ������������������  ����������� ������������������  ����������� ������������������   https://www.facebook.com/groups/562787713823026/����������� ������������������  

한성일����������� ������������������  ����������� ������������������   https://www.facebook.com/jamie.han.16����������� ������������������  ����������� ������������������   [email protected]