Angular Forms: Hello World

오늘부터 다시 앵귤러 공부 시작.

https://app.pluralsight.com/library/courses/angular-forms/table-of-contents

위 강좌를 보며 실습.

o user-settings-form.componl 
app.module.ts 
src > app > TS app.module.ts > AppModule 
1 
2 
3 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
import { BrowserModu1e } from '@angular/platform-browser' ; 
import { NgModu1e } from '@angular/core'; 
import { FormsModu1e } from '@angular/forms'; 
import { AppComponent } from ./app. component' ; 
@NgModu1e({ 
declarations: [ 
AppComponent 
imports: [ 
BrowserModu1e 
FormsModu1e 
providers: [J' 
bootstrap: [AppComponent] 
export class AppModu1e { }

app.module.ts에 FormsModule 추가(import)한 뒤 ng g c user-settings-form 명령으로 모듈 추가

dule.ts 
user-settings-form.component.html X <> app.componentl 
src > app > user-settings-form > o user-settings-form.component.html > form 
1 
2 
3 
<form> 
<input placeholder="Name" / > 
< / button> 
/ forn€

추가한 모듈에 form을 간단히 추가한 뒤

form.component.html 
app.componenthtml X 
src > app > app.component.html > app-user-settings-form 
<app -u ser- settings -form>E/ app - user - settings -form} 
1

app.component.html에 app-user-settings-form.ts 파일에 있던 selector 명칭으로 태그를 입력

Name 
x pluralsightcor x 
O localhost4200 
Ok 
Angular

초간단 폼 완성.

———————

부트스트랩(Bootstrap) 스타일 입히기

참고: 부트스트랩 4.4 폼

PS C: npm install 
bootstrap 
- -save 
npm bootstrap@4.4.1 requires a peer of jquery@1.9.1 - 3 but non 
e is installed. You must install peer dependencies yourself. 
npm bootstrap@4.4.1 requires a peer of popper.js@A1.16.0 but no 
ne is installed. You must install peer dependencies yourself. 
optional 
SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (nod 
e_modules\fsevents) : 
SKIPPING OPTIONAL DEPENDENCY: Unsupported platform f 
notsup 
or fsevents@1.2.12: wanted {"os" : "darwin", "arch" : "any"} (current: {" 
os " : "win32" , "arch " : "x64"}) 
+ bootstrap@4.4.1 
added 1 package from 2 contributors and audited 43266 packages in 11 
. 206s 
found 8 vulnerabilities (3 3 moderate, 2 
high) 
run •npm audit fix* to fix them, or *npm audit* for details 
PS C: \Users\archmond\ps-demo>

npm install –save bootstrap 명령으로 부트스트랩 노드 모듈 추가

{l angular.json 
angular.json > 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
projects ps-demo > {Y architect > { } build > {y options > [ ] styles 
"builder " : 
"@angular-devkit/build - angular : browser" , 
"options " : 
"outputPath "dist/ps-demo" , 
"index": "src/index. html " , 
"main" • "src/main.ts" 
"polyfills": "src/polyfills . ts" 
"tsConfig"• "src/tsconfig. app. json" 
"assets " : 
"src/favicon . ico" 
"src/assets" 
" styles " • 
" node_modules/bootstrap/dist/css /bootstrap. min. css 
" src/styles . css" 
"scripts" 
" es5BrowserSupport " • 
"configurations" . 
true

angular.json 파일의 styles에 부트스트랩 모듈 기재(src/styles.css보다 이전에 위치하도록)

“node_modules/bootstrap/dist/css/bootstrap.min.css”,

H71(V) 
user-settings-form.component.html - ps-de... 
x 
PsDemo 
user-settings-form.component.html X 
> user-settings-form > o user-settings-form.component.html > form > button.btn.btn-pril 
1 
2 
3 
C O localhost4200 
0k 
<form> 
Name 
<input placeholder="Name" 
"9Y1•btn-pr1ma 
<button class= 
</form>

button의 class에 bootstrap 스타일을 입혀주면 적용완료!

——————–

체크박스&라디오버튼 넣기

부트스트랩 문서에서 체크박스 샘플 소스 코드가 있다. 이를 참조하여 입력.

라디오버튼도 조금만 스크롤하면 밑에 존재한다.

User Settings 
Name 
Name 
Email Special Offers 
User Interface Style 
Light 
O 
Medium 
O 
Dark 
Send

체크 박스나 라디오버튼의 그룹 스타일링을 위해 form-group 클래스를 입력해 묶어줌.

<h5>User Inter*ace Style 
<div class= 
form- group" > 
<div class="form-check"> 
<input 
class="form-check-input"

그 외에도 Select, Textarea를 추가.

Example select 
Monthly 
Notes 
Send

이 다음에는 데이터 바인딩으로 넘어간다. 두근두근!

이것도 살펴보세요!

Windows용 PIP 설치하기(How to Install PIP For Python on Windows)

PIP란? pip는 파이썬으로 작성된 패키지 소프트웨어를 설치 · 관리하는 패키지 관리 시스템이다. Python Package Index …

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다