Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- 영어공부
- 자바스크립트함수
- 역행자
- 감정기복을줄이고더행복한삶을위한49가지지침서
- 보편의단어
- 북스타그램
- 그릿
- NextJS
- 기분을태도로만들지않는49가지방법
- 밀라논다
- 사는이유
- 책
- 타입스크립트
- 더빠르게실패하기
- 코딩천재
- sanity
- 기분을태도로만들지않는49가지 방법
- 자바스크립트set
- 호리에다카후미
- 동빈나
- 보통의언어들
- 마지막수업
- 장이나
- 박여름
- 백수린
- 장인서
- 패배의신호
- 가벼운마음
- 독서
- 힐링그잡채
Archives
- Today
- Total
미미의 메모장
AngularJS 정리 본문
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 Fundamentals In 60-ish Minutes
Angular.js 문서
'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 |