2017.07.27 12:14

반복된 데이터(배열)를 UI에 표시해 줄 때 사용


// index.html

<!DOCTYPE html>

<html ng-app="web">


<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />

  <script src="controller.js"></script>

</head>


<body ng-controller="WebController">

  <h1>student info</h1>

  

  <!-- ng-repeat="변수 in 변수배열" 처럼 사용 -->

  <ul ng-repeat="Student in Students">

    <li><input type="text" ng-model="Student.Name"/></li>

    <li>Grade: {{Student.Grade}}</li>

    <li>Gender: {{Student.Gender}}</li>

  </ul>

</body>


</html>


// controller.js

// Code goes here


(function() {

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

  

  app.controller("WebController", ["$scope", function($scope) {

    //배열로 선언

    $scope.Students = [

      {Name: "Tom", Grade: 8, Gender: "Male"}, 

      {Name: "Alice", Grade: 10, Gender: "Female"}, 

      {Name: "Ann", Grade: 7, Gender: "Female"}, 

      {Name: "Brown", Grade: 8, Gender: "Male"}, 

    ]

  }])

})();


샘플

Posted by CoolDragon

댓글을 달아 주세요

2017.07.27 11:49

기본 컨트롤러 선언 및 구현방법


index.html

<!DOCTYPE html>

<html ng-app="web">


<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />

  <script src="controller.js"></script>

</head>


<!--ng-controller: controller.js에 선언된 컨트롤러를 사용-->

<body ng-controller="WebController">

  <h1>student info</h1>

  <ul>

    <!--ng-model: 양방향 데이터바인딩에 사용, 성능에 영향을 줌-->

    <li><input type="text" ng-model="Student.Name"/></li>

    <li>Grade: {{Student.Grade}}</li>

    <li>Gender: {{Student.Gender}}</li>

  </ul>

</body>


</html>


controller.js

(function() {

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


  // WebController: 컨트롤러 명

  app.controller("WebController", ["$scope", function($scope) {

    $scope.Student = {

      Name: "Tom",

      Grade: 8,

      Gender: "Male"

    }

  }])

})();



샘플

Posted by CoolDragon

댓글을 달아 주세요

2017.07.27 11:18

Directive(지시자)

ng-app: angular를 시작하기 위한 지시자

ng-init: 웹페이지가 시작되면서 웹 사이트의 기본 설정값을 초기화 하기 위한 지시자


<!DOCTYPE html>

<html ng-app>


<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />

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

</head>


<body ng-init="name='Angular'"> <!-- name 변수를 선언 -->

  <h1>Hello {{name}}</h1> <!-- name 변수를 사용 -->

</body>


</html>


https://embed.plnkr.co/YvAQLTZ08J4n9JKbFfXz/
Posted by CoolDragon

댓글을 달아 주세요