2023 04 13

2023-04-13¶

Angular 역사¶

AngularJS
- Angular1 이라고도 불림
- 2010년 출시
- JS 베이스 오픈소스 웹앱 프레임워크이며, 구글에 의해 개발됨
- SPA 만드는데 많이 쓰임
- 2-way data binding
  - model 바뀌면 view 바뀌는 거
- 자스로 만들어짐

Angular
- Angular2+ 라고도 불림
- 2016년 출시
- AngularJS를 완전히 갈아 엎은 것
- 이 역시 JS 베이스 오픈소스 웹앱 프레임워크이며, 구글에 의해 개발됨
- AngularJS와 다르게 Angular는 컴포넌트 기반의 아키텍처임
- Angular는 1-way data binding 접근 방식을 사용
  - DOM 조작 횟수를 줄임
- 타스로 만들어짐
- AngularJS 보다 빠름

AngularJS v1.5.0¶

참고: https://www.youtube.com/watch?v=FlUCU13dJyo&list=PL4cUxeGkcC9gsJS5QgFT2IvWIX78dV3_v&index=1
Angular JS란?
- MVC 스타일의 JS 프레임워크 for spa
- 기능
  - 2 way data binding
  - templating
  - DOM interaction
  - filters
  - directives
  - many more...
- SPA
  - Views, routing으로 뚝딱

Angular JS MVC
- Model
  - json, db
- View
  - HTML
  - insert data into views
  - <html tag> {{data}} </html tag>
- Controller
  - functionality of our views
  - interaction model <-> view
  - diff controllers for diff areas of application

2-way data binding
- update model -> update view
- update view -> update model

Directives
- 참고: https://docs.angularjs.org/api/ng/directive

Modules

app.js 에서 제어하고자 하는 모듈을 만들어보자

// 각각 모듈의 이름, 모듈의 디펜던시를 나타냄
var joelApp = angular.module('joelApp', []);

// configurations: 어플리케이션이 실행되기 전에 수행되는 설정들
joelApp.config(function() {})

// run: 어플리케이션이 실행되면서 수행되는 함수들
joelApp.run(function() {})

// 컨트롤러 제어는 여기서 할 수 있음
joelApp.controller

html 페이지에서 모듈로 제어될 친구들을 설정하여 지정해보자
```
<html ng-app="joel-app">
    
</html>
```

Controllers

app.js에서 controller를 만들 수 있음
여기에서 MVC 패턴을 적용하자
- View: HTML
- Controller: JS code
- Model: $scope

controller에서 정의한 함수 안에서 $scope에 여러 js 객체를 저장할 수 있음

myNinjaApp.controller('NinjaController', ['$scope', function($scope) {
    // scope HTML view <-> JS controller <-> Model Scope
    $scope.message = "hey y;all";
    $scope.ninjas = ['a', 'b', 'c', 'd']
}]);

이후에 저장된 js 객체를 화면에 띄워주자

<div ng-controller="NinjaController">
  <p>{{message}}</p>
  <ul>
    <li ng-repeat="ninja in ninjas">{{ninja}}</li>
  </ul>
</div>

filters

태그 속성에 |를 활용해 필터링 기능을 만들 수 있음

혹은 템플릿 {{}} 자체에서 |를 통해 필터 기능 제공할 수 있음

<div ng-controller="NinjaController">
  <input type="text" ng-model="search" />
  <p>{{message}}</p>
  <ul>
    <li ng-repeat="ninja in ninjas | orderBy: '-name' | filter: search ">
      {{ninja.name}} - {{ninja.rate | currency}}
    </li>
  </ul>
</div>

ng-show & ng-hide
- ng-show: 조건에 따라 보여주자 ng-show="ninja.available"
- ng-hide: 조건에 따라 숨기자 ng-hide="ninja.available"

ng-click
- 클릭을 함으로써 특정한 변수에 매핑을 할 수 있음 (함수라고 생각)
- 컨트롤러와 인터랙션 가능
- 함수를 컨트롤러에 정의하고, 뷰에서 ng-click을 통해 해당 함수 사용하도록 하자

ng-submit

form 만들고 submit 할 수 있도록 지원할 것!

<form ng-submit="addNinja()">
  <input type="text" placeholder="name" ng-model="newninja.name" />
  <input type="text" placeholder="belt" ng-model="newninja.belt" />
  <input type="text" placeholder="rate" ng-model="newninja.rate" />
  <input type="submit" value="Add new ninja">
</form>

단! ng-controller 스코프 안에서 지지고 볶을 수 있도록 기억하자...!

views & routes

app.js 에서 컨피그를 정의해주자~

myNinjaApp.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/home', {
            templateUrl: 'views/home.html'
        })
        .when('/directory', {
            templateUrl: 'views/directory.html',
            controller: 'NinjaController'
        })
        .otherwise({
            redirectTo: '/home'
        })
}]);

이때, when 절에서 controller를 정의해주면, 해당 (컴포넌트라 해야하나...)는 컨트롤러에 자동 매핑되어 ng-controller 안써줘도 됨!

Http 통신

app.js 컨트롤러 단에서 $http 모듈을 가져와서 사용해보자

myNinjaApp.controller('NinjaController', ['$scope', '$http', function($scope, $http) {
    $http.get('data/ninjas.json').success(function (data) {
      $scope.ninjas = data;
      console.log($scope.ninjas)
    });
}]);

Custom Directives

자기 맘대로 html 태그를 만들어 재사용 할 수 있다!
해당 태그의 기능은 app.js에 넣어 정의해두도록 하자

아래 예시 맹키로다가 <random-ninja> 태그를 정의해 둘 수 있음

myNinjaApp.directive('randomNinja', [function(){
    return {
        // E: element, A: Attiribute
        restrict: 'EA',
        scope: {
            ninjas: '=',
            title: '='
        },
        templateUrl: 'views/random.html',
        controller: function($scope) {
            $scope.random = Math.floor(Math.random() * 4)
        }
    };
}])

<random-ninja ninjas="ninjas" title="'Random Ninja'"></random-ninja>

Animations
- angular-animate.min.js
- css + js 조합으로 휘뚜루 마뚜루
  - css에서 id/class 선택하고 .ng-enter.ng-enter-active 를 만들자

Form Validation
- Form classes
  - ng-pristine: form/input 아직 안쓰임 => $pristine (true/false)
  - ng-dirty: form/input 쓰임 => $dirty
  - ng-untouched: input이 건드려진적이 없음
  - ng-touched: input이 건드려짐 => $touched
  - ng-valid: form 필드가 유효함 => $valid
  - ng-invalid: form 필드가 유효하지 않음 => $invalid
- directives 사용하기
  - ng-required="true"
  - ng-model=""
- CSS를 통한 UI 제어
  - ng-invalid가 생기면 border를 2px solid red로 박아버린다던지...