본문 바로가기

AngularJs

[Angular.js][앵귤러js] AngularJS 4일차 [Controllers, 컨트롤러]

안녕하세요 슬릭데브 입니다.


오늘도 Angularjs 에 대해서 간단히 배워보겠습니다.

이해안되시거나, 모르시는 부분은 언제든지 글을 남겨주세요. 꼭 답변합니다.


오늘 토픽은 controller (컨트롤러) 입니다.

앵귤러에서 Controller는 데이터 manipulation (조작) 에 많이 쓰이기 때문에 중요합니다.

앵귤러 directive 중에서 ng-controller가 있고 $scope 이라는 parameter (매개변수)가 있습니다.


그럼 ng-controller를 어떡해 사용하고 $scope는 도대체 뭔지 배워봅시다.



앵귤러js 는 뒤에 js가 뜻하듯이 JavaScript (자바스크립트)기반으로 만들어졌습니다.

그럼 앵귤러에서도 function 을 쓸텐데 function을 쓰는 방법중에 하나가 controller (컨트롤러)에서 씁니다.


오늘 예제로 간단한 메뉴판을 만들어 봅시다. 요즘 많이 배고파요 ㅎㅎ ^^;;

일단 JavaScript (자바스크립트) 처럼 script 태그를 이용합니다.



위에 보이는것 처럼 HTML 태그는 항상 같고, head 도 항상 같아요. Title 만 바꿔주면 됩니다.

CDN (Content Network Delivery) 주소를 위에 써주는 이유는 1초라도 더 빨리 다운받아서 앱이 보여주길 바라는 마음에서 head 태그 안에 써줍니다. ㅎㅎ ^^;;


일단 script는 됐는데 브라우저에 보여줘야합니다. 그럼 아래와 같은 코드를 어디에다 넣을까요?



h2 태그 랑 script 태그 사이에 넣어줍니다. 그럼 아래와 같이 코드가 완성됩니다.



조금한 앱을 만드는데 코드가 HTML 코드도 있고 Javascript (자바스크립트) 코드도 있어요.

저는 지져분한 코드를 싫어해요. 예를 들면 서랍에 양말하고 셔츠하고 바지가 섞여있는거 같은 느낌입니다.

그럼 어떡해 하는지는 다음 글에 올리겠습니다. 


코드를 빌드하고 브라우저에 실행시켜면 아래와 같이 보입니다.




오늘도 글을 봐주셔서 감사합니다.

다시 말씀드리지만 제가 배우는 과정을 여기에 올리는거에요.

이해가 안가시거나 조언, 팁은 댓글로 남겨주세요!


감사합니다.

//슬릭데브