프론트엔드 정복하기
앵귤러 Directive 본문
앵귤러 내장 디렉티브
ng-app
: ng-app이 선언되는 부분부터 '앵귤러를 시작할거다!' 라고 알려주는 개념이다.
코드가 아래와 같을 때, body 태그 부분에 앵귤러 코드가 있다고 알려준다.
앵귤러는 body 코드 중에서 앵귤러 디렉티브를 찾아서 파싱하게 된다.
<body ng-app>
<p></p>
</body>
ng-init
js 변수, 함수를 초기화한다.
코드가 아래와 같다면, name이라는 변수에 Chris라는 string을 할당한다.
<body ng-app ng-init="name='Chris'">
<p>Hello {{name}}</p>
</body>
보통 ng-init 디렉티브는 프로토타입을 만들 때 정도로 사용하고,
실제로 데이터를 가공할 때는 모듈, 컨트롤러 구조로 많이 사용한다.
module (선언하기)
angular.module('모듈명',[])위는 angular 내장 함수다.
첫번째 param으로 모듈명을 입력, 두번째 param으로 배열을 가져오면 모듈이 생성된다.
-
모듈 적용하기
- 선언 모듈을 적용하려면.. ng-app 디렉티브에 ng-app="모듈명" 이라고 적어준다.
controller (선언하기)
var app = angular.module('모듈명',[])
app.controller('TodoCtrl', ['$scope', function($scope){
}])1) 앵귤러 모듈에 .controller 함수를 작성한다.
2) 첫번째 파라미터는 '컨트롤러명'이 들어가고, 보통 첫글자를 대문자로 쓴다.
3) 두번째 파라미터는 모듈과 마찬가지로 배열 안에 function을 넣어준다. [ ]
4) 그리고 $scope 변수를 위와 같이 넣어주면 함수 안에서 scope 변수를 사용할 수 있다.
- scope 변수 역할 : 컨트롤러가 html 파일 안에 연결고리 역할을 한다.
- $scope.name='Hyeji' 라고 쓰면 => html에서 ng-controller="TodoCtrl" 이라는 디렉티브를 썼을 때, name 변수를 'Hyeji'로 호출할 수 있다.
ng-model
<div ng-app="todo" ng-controll="TodoCtrl">
<input type="text" ng-model="todo.title"/>
<input type="checkbox" ng-model="todo.completed"/>
</div>
(function(){
var app=angular.module('todo',[]);
app.controller('TodoCtrl',['$scope', function($scope){
$scope.todo={
title:'요가수업',
completed:false,
createAt:Date.now()
}
}])
})();위와 같이 ng-controll에서 title 변수를 '요가수업', completed 변수를 false값으로 지정했다.
=> 이것을 html에서 ng-controller를 이용해 각각 input 태그에 바인딩하여 출력했다.
=> 또 이것을 view에서 체크박스를 클릭해서 체크박스 값을 true로 바꿨다고 하자.
=> view에서 값이 변경되면 컨트롤러의 javascript 값도 변경된다.
=> 이 모든 것은 'ng-model'로 컨트롤러값과 view 값을 바인딩했기 때문 !!!
=> 이것을 양방향 바인딩이라고 한다!!
ng-repeat
for문 반복문처럼 쓴다.
<ul>
<li ng-repeat="todo in todos">
<input type="text" ng-model="todo.title"/>
<input type="checkbox" ng-model="todo.completed"/>
<date style="margin-bottom:10px;">{{todo.createAt}}</date>
</li>
</ul>
(function(){
var app=angular.module('todo',[]);
app.controller('TodoCtrl',['$scope', function($scope){
$scope.todos=[
{
title:'요가수업',
completed:false,
createAt:Date.now()
},
{
title:'앵귤러 학습',
completed:false,
createAt:Date.now()
},
{
title:'운동하기',
completed:true,
createAt:Date.now()
}
]
}])
})();
controller에서 'todos'라는 scope에 여러 개의 객체를 배열 안에 삽입한다.
html에서 ng-repeat 디렉티브에 'todo in todos' 라고 쓴다.
=> todos 배열 내에 여러 개의 객체가 for 문을 돌면서 출력된다.
2분 부터 들을 차례
www.youtube.com/watch?v=uCGakR63vP4&list=PLs_XsVQJKaBk_JN5RctLmmVrGwEzpzqaj&index=9
'Angular' 카테고리의 다른 글
| 앵귤러 filter (0) | 2020.11.19 |
|---|---|
| 앵귤러 기본 개념 용어 (0) | 2020.11.17 |