AngularJS controller hello world 만들기
4월 12, 2017
In Javascript |
## AMP 환경 설치 - OS : windows10 - xampp 를 받아서 설치 [https://www.apachefriends.org/index.html](https://www.apachefriends.org/index.html) ## angularJS 설정 ### angularJS 다운로드 AngularJS 홈페이지 방문하여 zip으로 소스 다운로드 [https://angularjs.org/](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로 접속하여 테스트 --- 간단하지만 임팩트가 있는것 같다.