angularJs




AngularJS 란 무엇인가?

AngularJS 란 무엇인가?

angularJs
AngularJS 란 무엇인가? Click to the link to go to the site: =============== AngularJS 개념...
Read More
Angular란 무엇인가?

Angular란 무엇인가?

angularJs
AngularJS (앵귤러JS) _MVC 프레임워크 기본개념 Angular란 무엇인가? AngularJS란 동적인 웹앱을 구현하기 위해 구글에서 제작 배포하고...
Read More
AngularJS 란 무엇인가?

AngularJS 란 무엇인가?

angularJs
Click the link to read the article: 내용 보러가기 ======================== AngularJS 개념 AngularJS 는 SPA(Single Page...
Read More
AngularJS 란 무엇인가?
angularJs

AngularJS 란 무엇인가?

AngularJS 란 무엇인가?

Click to the link to go to the site:

===============

AngularJS 개념

AngularJS 는 SPA(Single Page Application) 프레임워크라고 합니다.

예를 들어, 하나의 웹 페이지가 실행할 때 View 단에 해당되는 부분이 페이지의 주소가 바뀌지 않으면서 또 다른 새로운 view 를  동적으로 로드하여  사용하는 것을 SPA 라고 합니다.

이러한 SPA 를 편하게 사용하도록 도움을 주는 것이 AngularJS 와 같은 자바스크립트 프레임워크입니다.

그래서 AngularJS 는 SPA 를 만들때 도움을 주는 프레임워크이고 자바스크립트 기반의 MV* 오픈소스 프레임워크라고도 합니다.

결론적으로 SPA & 자바스크립트 기반의 MV* 프레임워크입니다.

MVC

그렇다면, MV* 패턴은 무엇인가?

자바스크립트 공부를 시작하면서 생소한 용어들 중에 디자인 패턴이란 용어가 있습니다.

디자인 패턴은 건축으로치면 공법에 해당하는 것으로 소프트웨어의 개발 방법을 공식화 한 것으로써, 소수의 뛰어난 엔지니어가 해결한 문제들에 대한 규칙들을 다수의 엔지니어들이 문제를 처리 할 수 있도록 한 규칙들이면서, 구현자들 간의 커뮤니케이션의 효율성을 높이는 기법을 디자인 패턴이라고 합니다.

MVC란 Model View Controller의 약자로 에플리케이션을 세가지의 역할로 구분한 개발 방법론입니다.

아래의 그림처럼 사용자가 Controller를 조작하면 Controller는 Model을 통해서 데이터를 가져오고 그 정보를 바탕으로 시각적인 표현을 담당하는 View를 제어해서 사용자에게 전달하게 됩니다.

위의 그림을 웹에 적용해 보자면…

1. 사용자가 웹사이트에 접속한다. (Uses)

2. Controller는 사용자가 요청한 웹페이지를 서비스 하기 위해서 모델을 호출한다. (Manipulates)

3. 모델은 데이터베이스나 파일과 같은 데이터 소스를 제어한 후에 그 결과를 리턴한다.

4 .Controller는 Model이 리턴한 결과를 View에 반영한다. (Updates)

5. 데이터가 반영된 VIew는 사용자에게 보여진다. (Sees)

 

Controller

사용자가 접근 한 URL에 따라서 사용자의 요청사항을 파악한 후에 그 요청에 맞는 데이터를 Model에 의뢰하고, 데이터를 View에 반영해서 사용자에게 알려준다. 

Model

일반적으로 CI의 모델은 데이터베이스 테이블에 대응된다. 이를테면 Topic이라는 테이블은 topic_model이라는 Model을 만든다. 그런데 이 관계가 강제적이지 않기 때문에 규칙을 일관성 있게 정의하는 것이 필요하다.

View

View는 클라이언트 측 기술인 html/css/javascript들을 모아둔 컨테이너이다. 

MV* (통칭으로 MVstar 라고 말합니다)

– MVC

Model

View

Controller

– MVVM (Model-View-ViewModel)

– MVP (Model View Presenter)

MVC 패턴의 프레임워크를 통칭적으로 MV스타(MV*) 프레임워크라고 합니다.

AngularJS 참고사이트

출처: http://webclub.tistory.com/206 [Web Club]

Angular Seed

 – 처음 시작을 위한 기본구조 제공

 – http://github.com/angualr/angular-seed 

 – http://ionicframework.com

AngularJS 구성요소

1. 지시자(Directive) 

– 뷰(View) 영역 

– 특정한 html 태그에 AngularJS 의 기능을 적용하고자 할 때 사용하는 것이 Directive 란 지시자를 사용하는데 AngularJS 의 Directive 는 ng 로 시작하는 지시자들이 많이 있습니다. 예) ng-*

2. 필터(Filters) 

– 어떤 데이터를 화면에 출력하는데 있어서 원하는 데이터만을 필터링하여 가져다 사용할 수 있도록 해주는 기능입니다.

3. 데이터 바인딩(Data Binding) 

– 표형태의 데이터들을 원하는 위치에 사용하기 편하게 바인딩하도록 해줍니다.

4. 컨트롤러(Controller) 

– 메인 컴포넌트 

– 기능별로 묶어서 사용하도록 해줍니다.

5. 서비스(Service) 

– 비즈니스 로직

AngularJS Expressions(표현식)

표현식 (Expressions)

– {{ }} 로 사용됨 (표현식 안에는 자바스크립트 문법을 사용할 수 있습니다)

– JavaScript 의 모든 문법을 지원하지 않음.

– 배열 등 선언 가능합니다.

사용 예

– {{ 표현식 }}

– {{ name }} 

– {{ 3 % 5 }} 의 결과값이 출력됩니다.

– {{ “안녕” + “하세요“ }} 문자열과 문자열을 접합한 결과가 나타납니다.

지시자(Directive)

새로운 형태의 HTML 태그/속성/속성값을 만들어서 정의해주는 것을 지시자라고 합니다.

다음의 ng-app=”” 과 같은 태그와 속성/속성값을 정의할 수 있습니다.

ex) <body ng-app=””>

위의 코드와 같이 html 이나 body 태그에 ng-app=”” 을 지시자를 명시해 줌으로써 AngularJS 를 사용할 준비 단계를 설정합니다.

ng-app 은 data-ng-app 으로 사용할 수 있는데 ng 앞에는 모두 data 가 생략되어 있습니다.

다시말해서, ng-app 은 모듈을 정의해 주는 것입니다.

출처: http://webclub.tistory.com/206 [Web Club]

Angular란 무엇인가?
angularJs

Angular란 무엇인가?

AngularJS (앵귤러JS) _MVC 프레임워크 기본개념

Angular란 무엇인가?

AngularJS란 동적인 웹앱을 구현하기 위해 구글에서 제작 배포하고 있는 구조적 프레임워크라고 합니다. 특히, Angular의 데이타 바인딩(data binding)과 의존성주입(dependency injection)은 코드를 매우 간결하게 만들어 줍니다. 일반적으로, 동적 어플리케이션과 정적인 문서 사이의 문제점은 다음과 같이 해결합니다.

a library – 유용한 기능들을 모아 놓은 것을 말합니다. ex) jQuery
frameworks – 웹 어플리케이션에 대한 특별한 완성본을 말합니다.

이런 상황에서, Angular는 좀 더 진보되고 directives라는 것을 이용해서 브라우저에게 새로운 문구를 알려줍니다.
데이타 바인딩은 {{}} 으로 표현합니다.
DOM 제어 구조는 반복과, 보여주기, DOM의 일정 부분을 숨길 수 있습니다.
폼과 폼 유효성 검사에 사용할 수 있습니다.
DOM 엘리먼트에 이벤트 핸들링과 같은 새로운 행동을 부여할 수 있습니다.
HTML을 그룹핑하여 재사용가능한 컴포넌트로 제작할 수 있습니다.

호환성 알아보기
최신 브라우전인 크롬, 파이어폭스, 사파리와 IE 9-11버전까지 지원 합니다.
앵귤러JS는 제이쿼리 라이브러리를 사용하고 있습니다. (jQLite)
앵귤러 1.3은 제이쿼리 2.1과 상위 버전을 지원합니다.

기본개념 알아보기
Template: 추가적인 마크업의 HTML
Directives: 수정 가능한 속성과 엘리먼트가 추가된 HTML
Model: 사용자에게 보여지는 부분 또는 사용자 인터페이스
Scope: model이 저장되는 장소이며 controllers, directives and expression이 접근할 수 있음
Expressions: scope에서 변수와 함수에 접근할 수 있음
Data Binding: model과 view의 데이타 싱크
Controller: view 너머에 있는 비즈니스 로직 (business logic)
Dependency Injection: 객체와 함수를 생성 및 연결 가능
Module: 앱의 여러 파트를 담고 있는 것 ex) controllers, services, filters, directives

기본 사용 예제

My Angular App

{{yourName}}

위 예제에서 빨간색으로 표시한 문자는 angular와 관련있는 문구입니다. 양방향 데이터 방식을 이용해서 웹페이지에 표시될 데이터를 directives인 ng-model에 연결해서 사용합니다. 위 예시를 실행해 보시면 p 태그에 input에서 입력한 문자열이 실시간으로 바뀌시는 모습을 확인 할 수 있습니다. 즉, 인풋안에 있는 데이터가 변경될 때 ng-model의 내용이 업데이트 되면서 함께 연결되어 있는 p 태그에 텍스트를 변환합니다.

$watch 와 $apply

위 예시처럼 데이타 바인딩은 마법이 아닙니다. ng-model, ng-repeat 등을 사용할 때, 앵귤러는 내부에서 $watch를 그 값에 생성합니다. 그리고 실시간으로 값의 변화와 업데이트를 감지합니다. 만약, 앵귤러 밖에 코드가 있다면 scope.$apply()를 사용하여 연결 시켜줍니다.

ng-include

ng_include 를 사용하면 손쉽게 html파일을 include 시킬 수 있습니다. 다만 주의 할 점이 있다면, ajax호출을 기반으로 하기 때문에 로컬이 아닌 서버측에서 사용해야 합니다. 다음 예시는 main.html 파일에 header.html 파일을 include하는 방법입니다. ng-include 뒤에 첨부할 파일위치를 적어줍니다. 큰 따옴표와 작은 따옴표를 같이 적어주셔야 합니다. 아래는 main.html 실행화면 결과입니다.

-main.html

Awesome Framework

-header.html

AngularJS Works!!

: main.html에 header.html의 내용이 포함된것을 확인할 수 있습니다.

아래 링크 자료는 AngularJS를 활용해서 만들 수 있는 기초적인 예시를 확인 할 수 있습니다.
[출처] AngularJS란?|작성자 콩이

AngularJS 란 무엇인가?
angularJs

AngularJS 란 무엇인가?

Click the link to read the article: 내용 보러가기

========================

AngularJS 개념

AngularJS 는 SPA(Single Page Application) 프레임워크라고 합니다.

예를 들어, 하나의 웹 페이지가 실행할 때 View 단에 해당되는 부분이 페이지의 주소가 바뀌지 않으면서 또 다른 새로운 view 를  동적으로 로드하여  사용하는 것을 SPA 라고 합니다.

이러한 SPA 를 편하게 사용하도록 도움을 주는 것이 AngularJS 와 같은 자바스크립트 프레임워크입니다.

그래서 AngularJS 는 SPA 를 만들때 도움을 주는 프레임워크이고 자바스크립트 기반의 MV* 오픈소스 프레임워크라고도 합니다.

결론적으로 SPA & 자바스크립트 기반의 MV* 프레임워크입니다.

MVC

그렇다면, MV* 패턴은 무엇인가?

자바스크립트 공부를 시작하면서 생소한 용어들 중에 디자인 패턴이란 용어가 있습니다.

디자인 패턴은 건축으로치면 공법에 해당하는 것으로 소프트웨어의 개발 방법을 공식화 한 것으로써, 소수의 뛰어난 엔지니어가 해결한 문제들에 대한 규칙들을 다수의 엔지니어들이 문제를 처리 할 수 있도록 한 규칙들이면서, 구현자들 간의 커뮤니케이션의 효율성을 높이는 기법을 디자인 패턴이라고 합니다.

MVC란 Model View Controller의 약자로 에플리케이션을 세가지의 역할로 구분한 개발 방법론입니다.

아래의 그림처럼 사용자가 Controller를 조작하면 Controller는 Model을 통해서 데이터를 가져오고 그 정보를 바탕으로 시각적인 표현을 담당하는 View를 제어해서 사용자에게 전달하게 됩니다.

위의 그림을 웹에 적용해 보자면…

1. 사용자가 웹사이트에 접속한다. (Uses)

2. Controller는 사용자가 요청한 웹페이지를 서비스 하기 위해서 모델을 호출한다. (Manipulates)

3. 모델은 데이터베이스나 파일과 같은 데이터 소스를 제어한 후에 그 결과를 리턴한다.

4 .Controller는 Model이 리턴한 결과를 View에 반영한다. (Updates)

5. 데이터가 반영된 VIew는 사용자에게 보여진다. (Sees)

 

Controller

사용자가 접근 한 URL에 따라서 사용자의 요청사항을 파악한 후에 그 요청에 맞는 데이터를 Model에 의뢰하고, 데이터를 View에 반영해서 사용자에게 알려준다. 

Model

일반적으로 CI의 모델은 데이터베이스 테이블에 대응된다. 이를테면 Topic이라는 테이블은 topic_model이라는 Model을 만든다. 그런데 이 관계가 강제적이지 않기 때문에 규칙을 일관성 있게 정의하는 것이 필요하다.

View

View는 클라이언트 측 기술인 html/css/javascript들을 모아둔 컨테이너이다. 

MV* (통칭으로 MVstar 라고 말합니다)

– MVC

Model

View

Controller

– MVVM (Model-View-ViewModel)

– MVP (Model View Presenter)

MVC 패턴의 프레임워크를 통칭적으로 MV스타(MV*) 프레임워크라고 합니다.

AngularJS 참고사이트

Angular Seed

 – 처음 시작을 위한 기본구조 제공

 – http://github.com/angualr/angular-seed 

 – http://ionicframework.com

AngularJS 구성요소

1. 지시자(Directive) 

– 뷰(View) 영역 

– 특정한 html 태그에 AngularJS 의 기능을 적용하고자 할 때 사용하는 것이 Directive 란 지시자를 사용하는데 AngularJS 의 Directive 는 ng 로 시작하는 지시자들이 많이 있습니다. 예) ng-*

2. 필터(Filters) 

– 어떤 데이터를 화면에 출력하는데 있어서 원하는 데이터만을 필터링하여 가져다 사용할 수 있도록 해주는 기능입니다.

3. 데이터 바인딩(Data Binding) 

– 표형태의 데이터들을 원하는 위치에 사용하기 편하게 바인딩하도록 해줍니다.

4. 컨트롤러(Controller) 

– 메인 컴포넌트 

– 기능별로 묶어서 사용하도록 해줍니다.

5. 서비스(Service) 

– 비즈니스 로직

AngularJS Expressions(표현식)

표현식 (Expressions)

– {{ }} 로 사용됨 (표현식 안에는 자바스크립트 문법을 사용할 수 있습니다)

– JavaScript 의 모든 문법을 지원하지 않음.

– 배열 등 선언 가능합니다.

사용 예

– {{ 표현식 }}

– {{ name }} 

– {{ 3 % 5 }} 의 결과값이 출력됩니다.

– {{ “안녕” + “하세요“ }} 문자열과 문자열을 접합한 결과가 나타납니다.

지시자(Directive)

새로운 형태의 HTML 태그/속성/속성값을 만들어서 정의해주는 것을 지시자라고 합니다.

다음의 ng-app=”” 과 같은 태그와 속성/속성값을 정의할 수 있습니다.

ex) <body ng-app=””>

위의 코드와 같이 html 이나 body 태그에 ng-app=”” 을 지시자를 명시해 줌으로써 AngularJS 를 사용할 준비 단계를 설정합니다.

ng-app 은 data-ng-app 으로 사용할 수 있는데 ng 앞에는 모두 data 가 생략되어 있습니다.

다시말해서, ng-app 은 모듈을 정의해 주는 것입니다.

출처: http://webclub.tistory.com/206 [Web Club]