AngularJS controller hello world 만들기
4월 12, 2017
In Javascript |
AMP 환경 설치
- OS : windows10
- xampp 를 받아서 설치
https://www.apachefriends.org/index.html
angularJS 설정
angularJS 다운로드
AngularJS 홈페이지 방문하여 zip으로 소스 다운로드
https://angularjs.org/
angularJS 설치
설치까지는 아니고, zip으로 받은 angular 소스의 압축을 풀어
apache web root 에 복사
hello world 코드 작성
html 생성
<!DOCTYPE html>
<html ng-app>
<head>
<script src="/angular-1.6.4/angular.js"></script>
</head>
<body>
<input ng-model="text">
<h1>{{text}}</h1>
</body>
</html>
controller를 사용하여 html 파일 생성
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="/angular-1.6.4/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
$scope.text = 'Hello world';
}]);
</script>
</head>
<body>
<div ng-controller="MainCtrl">
{{ text }}
</div>
</body>
</html>
테스트
localhost로 접속하여 테스트
간단하지만 임팩트가 있는것 같다.