ProAngularJS 3장 MVC, 4장 부트스트랩

※ 실행결과 http://study.jeju.onl/bootstrap.html

1. MVC 프레임워크

1) MVC 프레임워크의 목적은
: 애플리케이션을 세 개의 기능 영역으로 분리하는 것
: 각 영역은 얼마든지 로직과 데이터를 포함할 수 있다.

2) MVC 패턴의 목적은
: 모델 안에 모델 데이터를 생성, 관리하는데 필요한 로직만 들어가게 하는 것
* 모델에서 로직을 제거하는 것이 아니다!

2. 모델

모델의 유형
1) 뷰 모델 : 컨트롤러에서 뷰로 전달되는 데이터를 나타내는 모델
2) 도메인 모델 : 모델 로직이 들어 있는 모델
* 모델 로직 : 비즈니스 도메인 내 데이터, 작업, 변형, 데이터를 생성, 정렬, 조작하는데 필요한 규칙

3. 컨트롤러

AngularJS 웹앱에서 데이터 모델과 뷰를 연결하는 조직
비즈니스 도메인 로직(Action)을 모델의 일부인 스코프(scope)에 추가한다

4. 뷰

데이터를 보여주는데 필요한 로직과 마크업을 포함
복잡한 로직은 금지 (로직은 컨트롤러로) : 도메인 모델을 생성, 저장, 조작하는 등의 로직

5. MVC 설계 규칙

1) 뷰 로직은 데이터 표현만을 위해 데이터를 다루어야 하며, 모델을 수정해서는 안된다.
2) 컨트롤러 로직은 모델로부터 데이터를 직접 생성, 수정, 삭제하지 말아야 한다.
3) 클라이언트는 데이터 저장소에 직접 접근하하지 말아야 한다.

 

4장 부트스트랩 사용하기

부트스트랩 CSS

부트스트랩 CSS

<!DOCTYPE html>
<html xmlns=	"http://www.w3.org/1999/xhtml">
<head>
  <title> Bootstrap Examples </title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
  <link href="/node_modules/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" />
  <style>
    #gridContainer {padding: 20px;}
    .grid-row > div { border: 1px solid lightgrey; padding: 10px;
             background-color: aliceblue; margin: 5px 0;}
  </style>
</head>
<body>
  

Grid Layout

3
4
5
</div>
6
6
</div>
11
1
</div> </div>
1
1
2
2
6
</div>
3
4
5
</div>
6
6
</div>
11
1
</div>
12
</div> </div>

Form Elements

Name :
Email :
Yes, send me endless junk mail
No, I never want to hear from you again
<p>&nbsp;</p>
I agree to the terms and conditions.
</div>

Standard Table with Context

CountryCapital City
United KingdonLondon
FranceParis
SpainMadrid

Striped, Bordered and Highlighted Table

CountryCapital City
United KingdonLondon
FranceParis
SpainMadrid
</body> </html>

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: