반응형
[Angular] Controller
- Controller 모듈 생성하기
1. angular.module("myApp",[]); 모듈생성하기
2. Ctrl1이라는 이름의 컨트롤러 생성
3. myApp 컨트롤러에서 scope을 설정한다.
4. 설정한 scope내부에서 선언한 name, nums는 해당 Controller에서만 적용된다.
5. Ctrl2에서 선언한 friends는 ng-repeat을 이용해 출력한다. : <tr ng-repeat="tmp in friends">
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 63 | <!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 ng-bind="tmp.name"></td> <td ng-bind="tmp.addr"></td> </tr> </tbody> </table> </div> </body> </html> | cs |
반응형
'WEB기초 > Angular' 카테고리의 다른 글
| [Angular] Angular 1.0 시작하기 (0) | 2017.08.25 |
|---|
댓글