2023 04 12

2023-04-12¶

Angular JS 접하기¶

참고: https://www.youtube.com/watch?v=EklH54kysps&list=PLs_XsVQJKaBk_JN5RctLmmVrGwEzpzqaj

앵귤러 개념들
- Directive: 확장된 엘리멘트. HTML 태그/속성 직접 정의해서 사용.
- Expressions: 자바의 함수/변수
```
<p>hello {{ name }} !!</p>
```
- Module: 기능적으로 비슷한 것을 모아 하나의 컨테이너로
- Controller: HTML 뒤에서 비즈니스 로직을 다루는 곳
  - DOM 조작, Input 포맷 등... 비즈니스 로직 아닌건 건들지마~!
- Service: 뷰에 의존적인 싱글톤으로 구성된 서비스 로직

디렉티브
- ng-app: 여기서 부터 앵귤러 쓸게요~ 여긴 앵귤러로 해석~
- ng-init: 자바스크립트 변수/함수 초기화할 때 사용
```
<body ng-app ng-init="name = 'Chris'">
    # Expression Mapping
    <h1>Hello {{ name }} </h1> 
</body>
```
- ng-model: 컨트롤러에서 넘겨받은 모델 값 매핑

모듈 & 컨트롤러

자스 파일에 뷰에서 사용할 모듈을 정의해보자

모듈은 큰 컨테이너!

모듈 안에 디렉티브, 서비스, 컨트롤러 다 있어

(function() {
    var app = angular.module('todo', []); // app 이라는 변수에 todo [] 모듈 정의

    app.controller('TodoCtrl', function($scope) {
        $scope.todo = {
            title: '요가 수련',
            complete: false,
            createdAt: Date.now()
        }
    });
})();

프론트에 매핑해주자

<body ng-app="todo" ng-controller="TodoCtrl">
    <h1>Todo</h1>
    {{ todo }}
    <input type="text" ng-model="todo.title">
    <input type="checkbox" ng-model="todo.completed">
    <h3>{{todo.title}}</h3>
    <p>{{todo.completed}}</p>
    <date>{{todo.createdAt}}</date>
</body>

디렉티브: ng-repeat

(function() {
    var app = angular.module('todo', []); // app 이라는 변수에 todo [] 모듈 정의

    app.controller('TodoCtrl', function($scope) {
        $scope.todos = [
            {
                title: '요가 수행',
                complete: true,
                createdAt: Date.now()
            },
            {
                title: '요가 수련',
                complete: false,
                createdAt: Date.now()
            },
            {
                title: '요가 요가',
                complete: false,
                createdAt: Date.now()
            }
        ]
    });
})();

<body ng-app="todo" ng-controller="TodoCtrl">
    <div ng-repeat="todo in todos">
        <input type="text" ng-model="todo.title">
        <input type="checkbox" ng-model="todo.completed">
        <date>{{ todo.createdAt }}</date>
    </div>
</body>

디렉티브: ng-filter
- date를 통해 값을 포맷팅할 수 있음
- | 을 사용하여 필터를 적용할 수 있다!!!!

디렉티브: ng-click

(function() {
    var app = angular.module('todo', []); // app 이라는 변수에 todo [] 모듈 정의

    app.controller('TodoCtrl', function($scope) {
        $scope.todos = [
            {
                title: '요가 수행',
                complete: true,
                createdAt: Date.now()
            },
            {
                title: '요가 수련',
                complete: false,
                createdAt: Date.now()
            },
            {
                title: '요가 요가',
                complete: false,
                createdAt: Date.now()
            }
        ];
        $scope.remove = function (todo) {
            // find& delete logic
            $scope.todos.findIndex()
        } 
    });
})();

<body ng-app="todo" ng-controller="TodoCtrl">
    <div ng-repeat="todo in todos">
        <input type="text" ng-model="todo.title">
        <input type="checkbox" ng-model="todo.completed">
        <date>{{ todo.createdAt }}</date>
        <button ng-click="remove()"></button>
    </div>
</body>

필터 버튼

요런식으로 필터링~

<li ng-repeat="todo in todos | filter:{completed: true}">