미미의 메모장

AngularJS 정리 본문

memo/Front-End💙

AngularJS 정리

mimi memo 2023. 5. 31. 11:06

expressions 

  • {{ 값 }}

directive : HTML 에게 새로운 동작을 알려주는 방법이다.

  • ng-app : body  요소가 Angular 어플리케이션에 포함되어 있다고 알려준다. html나 body태그에 사용하고 파라미터는 어플리케이션의 이름으로 모듈에서 사용한 이름과 일치해야 한다.
  • ng-controller: 해당 요소의 스코프를 컨트롤러에 할당한다.

 

app.js

var app = angular.module('app', []);
app.controller('MainCtrl', function($scope){
    $scope.message='world';
}

index.html

<body ng-app="app" ng-controller="MainCtrl">
    Hello.{{message}}
</body>

 

*ng-내장디렉티브

  • ng-show : 표현식이 true 일때만 해당 요소를 보여준다.
  • ng-hide: 표현식이 false일 때만 보여준다.
  • ng-click: click 함수 실행
  • ng-repeat: 컬렉션의 아이템마다 새로운 템플릿을 생성한다.
  • ng-repeat-start: 반복 영역의 시작 위치 표시
  • ng-repeat-end: 반복 영역의 종료 위치 표시
  • ng-switch: 데이터 값을 기반으로 DOM엘리먼트 변경
  • ng-filter: 날짜 꾸미기
  • ng-blur: textfild에서 focus 가 out될 때.
  • ng-init: 초깃값 설정
  • ng-model: scope 데이터랑 binding 됨

 

*ng-직접 만들 수 있다.

 

내장 변수

  • $index: 현 객체나 속성의 위치를 반환.
  • $first: 현 객체가 컬렉션에서 첫 번째 객체이면 true
  • $middle: 첫 번째나 마지막 객체가 아니면 true
  • $last: 마지막 객체이면 true
  • $even: 짝수 번째 객체이면 true
  • $odd: 홀수 번째 객체이면 true
  • $dirty: 입력폼에 입력하자마자 true
  • $valid: 유효할 때 true

controller

  • view 조절, 비즈니스 로직 구현만! 

   ↓

service 

  • 비즈니스 로직 중에 재 사용할 수 있는 로직.

module 

  • 기능적으로 비슷한 것, 의존 관계 

 

모듈화

index.html(view)

<todo-form></todo-form>

directive.js(view → directive :모듈화)

angular.module('todo').directive('todoForm',function(){
    return {
        templetUrl: 'todoForm.tpl.html'
    }
}

 

 

localstorage : 데이터를 하드디스크에 저장

  • key,value 저장소
  • localStorage.setItem(key, value)
  • localStorage.getItem(key)
  • 입력은 무조건  string으로 처리됨
  • 최대 약 5mb용량
  • 크롬은 SQLite 사용함

 

 

todoItem.html

<input type="checkbox" ng-model="todo.completed" ng-click="update()">

      ↓

controller.js

$scope.update= function(){
    todoStorage.update();
}

      ↓

service.js

update:function(){
    strorage._saveToLocalStorage(storage.todos);
}

 

 

 체크박스 타입 사용법

 - ng-model ; 바인딩 대상이 되는 모델명

 - name : 폼에서 사용하는 이름

 - ng-true-value : 체크박스를 체크했을 때 바인딩된 모델에 대입할 값(기본값은 true)

 - ng-false-value : 체크박스의 체크를 해제했을 때 바인딩된 모델에 대입할 값(기본값은 false)

 - ng-required : 필수 입력 여부

 - ng-chang : 사용자의 입력이 발생할 때 실행될 표현식

 

참고한 angular.js 강의

AngularJS 강좌 - 챕터 1-1, 강의소개

AngularJS Tutorial

AngularJS Fundamentals In 60-ish Minutes

 

Angular.js 문서

https://docs.angularjs.org/guide/filter

'memo > Front-End💙' 카테고리의 다른 글

[Javascript] Set  (1) 2023.06.09
[Javascript] 함수 반환하기  (0) 2023.06.09
[Javascript] 타임아웃  (0) 2023.05.31
[Javascript] class 정리  (0) 2023.05.31
[Javascript] 브라우저 동작 원리  (0) 2023.05.31
'memo/Front-End💙' Related Articles more