Angular.js
- FrontEnd WebFrameWork
기본적으로 클라이언트는 서버 url 에 들어가서 데이터를 요청하고 서버는 이를
html ,css , javascript 형태로 뿌려줍니다.
이를 브라우저를 통해 클라이언가 확인을 하는 것입니다.
클라이언트가 또 다른 요청을 보낼 경우 백앤드 쪽에서 데이터를 가공해서 필요한 로직에 맞게 재 구현하여 보내줍니다.
보내줄 때에는 Json 형태나 Xml 형태로 가공하여 보내주게 되고 , 이 데이터를 받아서
클라이언트 쪽에서 여러 방면으로 활용할 수 있습니다.
https://docs.angularjs.org/guide/concepts
Angular.js 에서 사용하는 속성들입니다. 중요한 것들만 조금 집어서 익혀보도록 하겠습니다.
Directives : HTML 확장편으로, 내장된 속성 또는 개발자가 임의로 만들어서 활용 가능한 속성입니다.
Expressions : 변수와 함수를 만들 수 있으며 Html 파일에서 javascript에 있는 데이터를 출력해야 하는 경우 이 기법을 사용 합니다.
예 : <p> {{ name }} !! </p>
html 파일 내에서 javascript 에 name으로 정의된 변수를 가지고 와서 표현해주는 것.
Module : 기능적으로 비슷한 것 끼리 모아서 하나의 모듈을 만든다. 의존 관계가 있을 경우 주입해서 사용할 수 있다.
Controller : 백앤드에서 작동하고 html View를 조절 한다.
비즈니스 로직을 구현하는 데에만 사용 한다.
( Html Dom 을 조작하거나 input 형태를 건들거나 output 을 필터링 하는 데에서는 사용하지 않는다. )
Service : 컨트롤러와는 다르게 재사용 가능한 비즈니스 로직입니다.
( 싱글턴 방법으로 구현되어 있습니다. )
Google에서 Plunker를 검색하여 실행하면
위와 같이 프론트앤드 작업에 편한 반응형 웹 개발 환경이 구축됩니다!
Launch the Editor 클릭 후 바로 에디터 작업하시면 됩니다
위와 같은 화면이 나오게 될 것이고 우측 상단에 깃허브와 연동하는 방법도 있습니다.
기본적으로 index.html 파일과 css 파일 그리고 script.js 파일이 만들어져 있어서
적용되어 있는 상태입니다.
그리고 우측 상단에 빨간 네모 두 칸 아래로 내려오면 사전 모양으로 되어 있는 아이콘이 있습니다.
거기서 설치해야할 패키지를 검색해서 설치해주시면 됩니다.
버전은 원하시는 것 깔아주시면 되고
우선 bootstrap 과 angular.js를 검색하여 add 해주시면 바로 적용되어서
html 태그 내의 head 부분에 정리되어 표현될 것입니다.
이상 기본 Angular.js 개념 포스팅이었습니다. 이 후에는 출력 하는 것에 대해서 소개해 드리겠습니다.
감사합니다^^