AngularJS 튜토리얼 - Hello 예제 5

1 개요[ | ]

AngularJS 튜토리얼 - Hello 예제 5

3개의 파일로 분할한 예제
AngularJS 폴더 구조 적용
AngularJS 튜토리얼 - Hello 예제 4에서 구조만 변경한 것

2 index.html[ | ]

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app="HelloApp5">

<div ng-controller="HelloController">
  <label>이름:</label>
  <input type="text" ng-model="yourName" placeholder="여기에 이름을 입력하세요">
  <h1>안녕 {{yourName}}!</h1>
</div>

<!-- Modules -->
<script src="js/app.js"></script>
 
<!-- Controllers -->
<script src="js/controllers/HelloController.js"></script>
 
<!-- Services -->
<!-- Directives -->

</body>
</html>

3 js/app.js[ | ]

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

4 js/controllers/HelloController.js[ | ]

app.controller('HelloController', ['$scope', function($scope) {
  $scope.yourName = "친구들";
}]);

5 테스트[ | ]

http://zetawiki.com/ex/angular/hello5/

6 같이 보기[ | ]