Step02_controller 만들어
myApp과 Ctrl1 이라고 이름을 2개 지어 준것
이름지어준 것이니 마음대로 바꿔도 됨
이름지은 2개를 여기다가 각각 적어줘
하나의 모듈에 여러개의 컨트롤러를 둘수도 있고
각각의 컨트롤러를 따로 관리를 할 수가 있어
일단 하나를 만들어보고 하나 더 추가해 볼것임
scope는 Angular 에서 관리하는 변수임
이렇게 해서 출력을 해보면
이렇게 출력이 됌
( 빨간색 코드는 Jquery 로 했을때의 예 )
name 라는 모델에다가 김구라를 넣은 것임
이렇게 컨트롤러를 하나 더 추가해 보면
이렇게 출력이 되는 것을 확인가능하다
myApp 이라는 모듈을 만들고
컨트롤러를 여러개 찍어낼수 있는 것이다.
이렇게 clicked 라는 함수를 만들어 주면
밑에서 clicked 라는 함수를 콜하면 실행순서가 안으로 들어옴
그럼 그 함수 안에서 어떤 작업을 할수 있는 것임
클릭 처리는 ng-click
이제 눌러보셈 버튼을 누르면 실행순서가 저 함수 안으로 들어 가는 것
알림창이 나오도록 코딩해주고
실행시켜서 확인해 보면
alert 창이 출력되는 것을 확인가능
nums 라는 배열을 하나 만들어서
ul / li 안에다가 출력을 하고 싶어
Jquery 로 한다면
for( var i=0; i<nums.length; i++){
var tmp=nums[i];
$(“<li/>”).text(tmp).appendto(“ul”)
}
이런 식으로 될거야
이 4줄을
이렇게 1줄로 대체 가능해
이런 배열을 만들어서
여기다가 출력을 하고 싶다면
이렇게 코딩을 해주면 됌
{{tmp.addr}} 과 ng-bind="tmp.addr" 은 같은 것임
이렇게 잘 출력이 되는 것을 확인 가능하다
마지막으로 전체 코드 ~
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Step02_controller.html</title> <script src="js/angular.min.js"></script> <script> // angular 모듈 만들기 var myApp=angular.module("myApp",[]); // Ctrl1 이라는 이름의 컨트롤러 만들기 myApp.controller("Ctrl1",["$scope", function($scope){ $scope.name="김구라"; $scope.clicked=function(){ alert("버튼을 눌렀네?"); }; $scope.nums=[10, 20, 30, 40, 50]; }]); // Ctrl2 이라는 이름의 컨트롤러 만들기 myApp.controller("Ctrl2",["$scope", function($scope){ $scope.name="원숭이"; $scope.friends=[ {num:1,name:"김구라",addr:"노량진"}, {num:2,name:"해골",addr:"행신동"}, {num:3,name:"원숭이",addr:"동물원"} ]; }]); </script> </head> <body> <div ng-controller="Ctrl1"> <p>내이름은 : <strong>{{name}}</strong></p> <button ng-click="clicked()">눌러보셈</button> <ul> <li ng-repeat="tmp in nums">{{tmp}}</li> </ul> </div> <div ng-controller="Ctrl2"> <p>너의 이름은 : <strong>{{name}}</strong></p> <table> <thead> <tr> <th>번호</th> <th>이름</th> <th>주소</th> </tr> </thead> <tbody> <tr ng-repeat="tmp in friends"> <td>{{tmp.num}}</td> <td>{{tmp.name}}</td> <td ng-bind="tmp.addr"></td> </tr> </tbody> </table> </div> </body> </html> | cs |
'FrameWork > AngularJS' 카테고리의 다른 글
| Step04_showHide (0) | 2017.08.25 |
|---|---|
| Step03_class (0) | 2017.08.25 |
| Step02_controller2 (0) | 2017.08.25 |
| Step01_click (0) | 2017.08.25 |
| AngularJS 설치 및 HelloWorld (0) | 2017.08.25 |
