Skip to content

Commit dd78eba

Browse files
EpikemEpikem
committed
add angularjs-study-2021-01-28
- rename past documents
1 parent a249c58 commit dd78eba

3 files changed

Lines changed: 429 additions & 2 deletions

File tree

javascript/angular/study-2021-01-25.md renamed to javascript/angular/angularjs-study-2021-01-25.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# study-2021-01-25
1+
# angularjs-study-2021-01-25
22

3-
angular 사용법 공부
3+
angular js 사용법 공부
44

55
----
66

‎javascript/angular/angularjs-study-2021-01-27.md‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
# angularjs-study-2021-01-27
2+
3+
# angular-usage
4+
5+
angular 사용법 공부
6+
7+
https://www.notion.so/2021-01-27-37069b24837d4a0686a5465dd778a5c8 (업데이트됨)
8+
9+
- 다음 angular 지시자 상세 사용법 정리 및 예제 테스트
10+
- input
11+
- input[checkbox]
12+
- input[radio]
13+
- input[text]
14+
- ngChecked
15+
- a
16+
- ngHref
17+
18+
- 다음 요소들에 대한 상세한 비교, 작동방식 차이 학습 및 정리
19+
- onChange와 ng-change,
20+
- pattern vs ng-pattern,
21+
- value vs ng-value,
22+
- ng-checked vs ng-model,
23+
- ng-watch vs ng-changed,
24+
- html-a vs angular-a
25+
26+
---
27+
28+
## input
29+
30+
HTML input 엘리먼트 컨트롤이다.
31+
32+
`ngModel`과 같이 사용하여 데이터 바인딩, 입력 상태 제어, validation의 기능들을 제공한다.
33+
34+
- `[required]` : 입력값이 비었을 경우 required 에러 키를 설정한다
35+
- `[ng-required]` : 값이 참일 경우 required 속성을 설정한다.
36+
- `[ng-pattern]` : 정규표현식 검사
37+
- `[ng-change]` : `$scope` 값이 변화될 때 trigger
38+
- `[ng-trim=true]` : 자동 공백제거 여부 설정. `input[type=password]`에 대해서는 무시됨.
39+
40+
사용법:
41+
42+
```html
43+
<input
44+
ng-model="string"
45+
[name="string"]
46+
[required="string"]
47+
[ng-required="boolean"]
48+
[ng-minlength="number"]
49+
[ng-maxlength="number"]
50+
[ng-pattern="string"]
51+
[ng-change="string"]
52+
[ng-trim="boolean"]/>
53+
```
54+
55+
## input[checkbox]
56+
57+
- `ngModel`: 바인딩 대상
58+
- `[name]`: 폼에서 속성 이름
59+
- `[ngTrueValue]`: 선택될 경우 표현식 값
60+
- `[ngFalseValue]`: 해제될 경우 표현식 값
61+
- `[ngChange]`: 변경될 경우의 실행 표현식 값
62+
63+
```html
64+
<input type="checkbox"
65+
ng-model="string"
66+
[name="string"]
67+
[ng-true-value="expression"]
68+
[ng-false-value="expression"]
69+
[ng-change="string"]>
70+
```
71+
72+
## input[radio]
73+
74+
- `ngModel` : 바인딩 대상
75+
- `value` : 체크되었을 때의 `ngModel` 값, 문자열만 지원
76+
- `[name]` : 폼에서 속성 이름
77+
- `[ngChange]` : 변경될 경우의 실행 표현식
78+
- `ngValue` : 체크되었을 때의 `ngModel` 값, 객체 지원
79+
80+
```html
81+
<script>
82+
angular.module('radioExample', [])
83+
.controller('ExampleController', ['$scope', function($scope) {
84+
$scope.color = {
85+
name: 'blue'
86+
};
87+
$scope.specialValue = {
88+
"id": "12345",
89+
"value": "green"
90+
};
91+
}]);
92+
</script>
93+
<form name="myForm" ng-controller="ExampleController">
94+
<label>
95+
<input type="radio" ng-model="color.name" value="red">
96+
Red
97+
</label><br/>
98+
<label>
99+
<input type="radio" ng-model="color.name" ng-value="specialValue">
100+
Green
101+
</label><br/>
102+
<label>
103+
<input type="radio" ng-model="color.name" value="blue">
104+
Blue
105+
</label><br/>
106+
<code>color = {{color.name | json}}</code><br/>
107+
</form>
108+
Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
109+
```
110+
111+
## input[text]
112+
113+
- `ngModel`:바인딩 대상
114+
- `[name]`: 폼 속성 이름
115+
- `[required]`: 필수여부
116+
- `[ngRequired]`: 동적 필수여부
117+
- `[ngMinlength]`: 최소 길이
118+
- `[ngMaxlength]`: 최대 길이
119+
- `[pattern]`: 문자열 regex 검사 패턴
120+
- `[ngPattern]`: 동적 regex 검사 패턴
121+
- `[ngChange]`: 변경시 발생 이벤트
122+
- `[ngTrim = true]`: 자동 trim 여부
123+
124+
```html
125+
<script>
126+
angular.module('textInputExample', [])
127+
.controller('ExampleController', ['$scope', function($scope) {
128+
$scope.example = {
129+
text: 'guest',
130+
word: /^\s*\w*\s*$/
131+
};
132+
}]);
133+
</script>
134+
<form name="myForm" ng-controller="ExampleController">
135+
<label>Single word:
136+
<input type="text" name="input" ng-model="example.text"
137+
ng-pattern="example.word" required ng-trim="false">
138+
</label>
139+
<div role="alert">
140+
<span class="error" ng-show="myForm.input.$error.required">
141+
Required!</span>
142+
<span class="error" ng-show="myForm.input.$error.pattern">
143+
Single word only!</span>
144+
</div>
145+
<code>text = {{example.text}}</code><br/>
146+
<code>myForm.input.$valid = {{myForm.input.$valid}}</code><br/>
147+
<code>myForm.input.$error = {{myForm.input.$error}}</code><br/>
148+
<code>myForm.$valid = {{myForm.$valid}}</code><br/>
149+
<code>myForm.$error.required = {{!!myForm.$error.required}}</code><br/>
150+
</form>
151+
```
152+
153+
## ngChecked
154+
155+
- `ngChecked` : 표현식이 참이면, 해당 엘리먼트의 `checked` 속성이 참이 된다.
156+
157+
```html
158+
<label>Check me to check both:
159+
<input type="checkbox" ng-model="leader">
160+
</label>
161+
<br/>
162+
<input id="checkFollower" type="checkbox" ng-checked="leader" aria-label="Follower input">
163+
```
164+
165+
## a
166+
167+
href 속성이 비었을 때 기본 html a 태그와 동작이 다르다.
168+
169+
동적으로 a 태그를 위한 `href` 속성을 만들 때에는 `ngHref` 를 이용한다.
170+
171+
## ngHref
172+
173+
앵귤러가 `a` 태그의 `href` 값 내부의 표현식을 바꾸기 전에 유저가 링크를 클릭할 때 링크가 깨지는 문제를 막기 위함.
174+
175+
```html
176+
<!-- 아래는 잘못됨 -->
177+
<a href="http://www.gravatar.com/avatar/{{hash}}">link1</a>
178+
<!-- 아래와 같이 사용 -->
179+
<a ng-href="http://www.gravatar.com/avatar/{{hash}}">link1</a>
180+
```
181+
182+
- `ngHref` : 템플릿을 포함하는 문자열
183+
184+
## comparison
185+
186+
onChange와 ng-change 차이??
187+
- ng-change는 변경마다 매번 실행됨!
188+
189+
pattern vs ng-pattern
190+
- ng-pattern에서는 expression 사용 '가능'
191+
- 문자열로 써도 된다
192+
193+
value vs ng-value
194+
- ng-value는 ng-pattern과는 달리, 무조건 scope 값을 참조한다.
195+
- 없으면 빈값.
196+
197+
ng-checked vs ng-model
198+
- ng-checked로는 스코프 값이 안바뀐다! (변경시 가져오기만 한다.)
199+
200+
ng-watch vs ng-changed
201+
- watch는 스코프값이 변경 될때마다 실행 (많이쓰면 성능 영향)
202+
- watch는 변수 확인용으로 사용 가능
203+
204+
html-a vs angular-a
205+
- 기존 a태그는 빈 href 태그 누르면 리로딩되는데, angular-a는 비어있
206+
207+
## refs
208+
209+
- [AngularJS doc](https://docs.angularjs.org/api)
210+
211+
## tags
212+
213+
\#nodejs, \#javascript, \#ecmascript, \#js, \#angularjs, \#study
214+
215+
---

0 commit comments

Comments
 (0)