클릭에 대한 핸들러 연결
<tag ng-click="controller명.함수()"/>
예제
<button ng-click="controller.delete()">삭제</button>
클릭에 대한 핸들러 연결
<tag ng-click="controller명.함수()"/>
예제
<button ng-click="controller.delete()">삭제</button>
바인딩될 데이터를 필터 지시어에 맞게 데이터 포맷을 변경
용법
<tag>{{ expression | filter:argument1:argument2:... | filter | ...}}</tag>
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>
<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>
<li>Create: {{Student.Create | date:"yyyy-MM-dd HH:mm:ss"}}</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", Create: Date.now()},
{Name: "Alice", Grade: 10, Gender: "Female", Create: Date.now()},
{Name: "Ann", Grade: 7, Gender: "Female", Create: Date.now()},
{Name: "Brown", Grade: 8, Gender: "Male", Create: Date.now()},
]
}])
})();
반복된 데이터(배열)를 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"},
]
}])
})();
기본 컨트롤러 선언 및 구현방법
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"
}
}])
})();
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>