1 개요[ | ]
- AngularJS 튜토리얼 - Hello 예제 5
- 3개의 파일로 분할한 예제
- AngularJS 폴더 구조 적용
- AngularJS 튜토리얼 - Hello 예제 4에서 구조만 변경한 것
2 index.html[ | ]
html
Copy
<!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[ | ]
JavaScript
Copy
var app = angular.module('HelloApp5', []);
4 js/controllers/HelloController.js[ | ]
JavaScript
Copy
app.controller('HelloController', ['$scope', function($scope) {
$scope.yourName = "친구들";
}]);
5 테스트[ | ]
6 같이 보기[ | ]
편집자 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.