2014. 9. 16. 16:26ㆍJS&FRONT/AngularJS
Bootstrapping
* Bootstrap 이란? (네이버 백과사전 에서…)
그 자체의 동작에 의해서 어떤 소정의 상태로 이행하도록 설정되어 있는 방법.
예를 들면, 최초의 수개의 명령에 의해서 그것에 계속해서 모든 명령을 입력 장치에서 계산기내에 패치 할 수 있도록 하는 방법.
즉 프로그램을 입력하는 방법의 하나이며, 최초에 명령을 읽어 들이기 위한 간단한 조작을 하면 계속해서 명령을 fetch하는 것을 순차로 하여 최종적으로 완전한 프로그램이 기억 장치 내에 수용 되도록 하는 방법을 말한다.
단, 루틴을 가리킬 때에는 부트스트랩 루틴 또는 부트스트랩 입력 루틴 등으로 부르며, 입력동작을 부트스트랩이라고 하는 경우가 많다. 또 그것 자체가 주기억장치에 로드 한다는 의미 이며, 셀프 로딩 혹은 셀프 로딩 루틴이라고 한다.
현재의 대형 컴퓨터에서는 IPL(Initial Program Load) 버튼을 누르면 하드의 도움으로 부트스트랩이 실행된다.
여러분들은 지금 AngularJS phonecat 어플리케이션을 빌드 할 준비가 되었습니다.
이번 단계에서는, 가장 중요한 소스 코드 파일들과 친숙해질 것이고, angular-seed와 묶인 개발 서버들을 어떻게 시작하고, 브라우저상에서 어플리케이션이 어떻게 작동하는 방법에 대해 배우게 될 것입니다.
Angular-phonecat 디렉토리에서 아래 명령을 실행해보세요.
Git checkout –f step-0
이건 여러분들의 작업공간을 튜토리얼 앱의 0 단계로 리셋 한 것입니다.
여러분들은 이것을 튜토리얼에서 모든 미래 단계를 위해 이것을 반복해야 하며, 여러분들이 있는 단계의 숫자에서 숫자를 변경해야 합니다.
이건 사라질 여러분들의 작업 디렉토리안에서 여러분들이 만들 어떤 변화들의 원인이 될 것입니다.
위의 작업을 마쳤으면, 여러분들은 아래 내용의 실행을 통해 dependencies을 설치하는 것이 필요합니다.
Npm install
브라우저에서 앱이 동작하는 것을 보기 위해서 터미널/커맨드 라인 탭 혹은 윈도우를 열고, 웹서버를 시작하기 위해 npm start 라고 실행시키세요.
자 브라우저 윈도우를 앱을 위해 열고, 네비게이션에 http://localhost:8000/app/ 을 치시면 페이지를 볼 수 있습니다.
매우 흥미롭지 않겠지만, 괜찮습니다.
“Nothing here yet!” 이라고 보이는 HTML 페이지는 아래 보여지는 HTML 코드로 구성되어 있습니다.
이 코드는 우리가 진행하고자 필요로 한 Angular 요소의 키들로 구성이 되어 있습니다.
app/index.html
What is the code doing?
ng-app 지시어:
<html ng-app>
np-app 속성은 ngApp이라 불리우는 Angular 를 표현하는 것입니다.
(Angular는 custom 속성들에는 spinal-case를 사용하고, 그것들을 구현하는 통신 지시어는 camelCase를 사용합니다.)
* spinal-case : 두개의 단어 사이에 “-“ 로 연결 한 경우
* camelCase : 두개의 단어 사이에서, 두번째 단어 시작을 대문자로 .
* snake_case : 두개의 단어 사이에 “_” 로 연결 한 경우
이 지시어는 Angular가 우리 어플리케이션의 루트 요소로 고려되어야 한다라는 html 요소로 표시되어 사용 되어 집니다.
만약 완벽한 html 페이지 혹은 단지 그것의 일부분이 Angular 어플리케이션으로 다뤄져야 한다고 하더라도, 이건 어플리케이션 개발자들에게 Angular를 알리기 위한 자유를 줍니다.
AngluarJS script tag :
<script src=”bower_components/angular/angular.js”>
이 코드는 angular.js 스크립트를 다운로드 하고 HTML 페이지를 포함된 것이 완벽히 다운로드 되어 질 때, 브라우저에 의해 실행되어질 콜백을 등록한다.
콜백이 실행되어질 때, angular는 ngApp 지시어를 찾습니다.
만약 Angular가 지시어를 찾았을 때, ngApp 지시어가 정의되는 요소가 존재하는 어플리케이션 DOM의 루트와 함께
어플리케이션을 부트스트랩 되어 질 것입니다.
표현식과 함께 Double-curly로 바인딩 합니다. :
Nothing here {{ ‘yet’ + ‘!’}}
이 라인은 Angular의 탬플릿 능력들 중의 두 가지 코어 기술을 정의합니다.
- Double-curlies에 의한 되어지는 바인딩
- 위 바인딩 안에 사용 되어진 ‘yet’ + ‘!’ 단순 표현식
이 바인딩은 표현 식을 측정해야 하고 바인딩의 위치 안에 DOM 안의 결과를 넣어야 하는 Angular를 말한다.
한번 입력하는 것보단, 우리가 다음 단계에서 보겠지만, 바인딩은 표현식 측정의 결과가 변경되어질 때마다
효과적으로 끊임없는 업데이트의 결과로 보여줄 것이다.
Angular 표현식은 차라리 글로벌 컨텍스트(window)의 범위 안에 보다 현재 모델 범위의 컨텍스트안에서 Angular에 의해 측정 되어지는
자바스크립트와 같은 코드 스니펫 입니다.
예상대로, 한번 이 탬플릿은 Angular 에 의해 처리되어 지고, html 페이지는 “Nothin here yet!” 라는 문자가 포함되어 있습니다.
Bootstrapping AngularJS apps
npApp 지시어를 사용한 자동적으로 부트 스트래핑 되어진 AngularJS 어플리케이션은 매우 쉽고 대부분의 경우에 적합합니다.
좀 더 발전된 경우, 예를 들어 스크립트 로더들을 사용할 때,
여러분은 어플리케이션을 부트 스트랩하기 위해 imperative/manual way 을 사용 할 수 있습니다.
어플리케이션이 부트스트랩하는 동안 일어나는 3가지 중요한 점들이 있다.
1. 의존성 주입에 사용되어질 주입자가 생성된다.
2. 주입자는 곧 우리의 어플리케이션의 모델에 컨텍스트가 될 루트 영역을 생성할 것이다.
3. Angular는 그때 ngapp 루트 요소에서 시작하고, 다른 지시어 처리와 그 경로를 따라 발견된 바인딩한 DOM을 “컴파일” 할 것입니다.
한번 어플리케이션이 부트 스트랩 되어지면, 모델이 변경되어져 들어오는 브라우저 이벤트
(예를 들면 마우스 클릭, 키 입력 또는 들어오는 HTTP 응답) 를 기다릴 것입니다.
그런 이벤트 한번 들어오면, 만약 어느 모델 변경이 원인이 되었다면, 그리고 만약 변경된 것 들이 찾아지게 되었다면, Angular는 감지합니다.
현재 우리 어플리케이션 구성은 매우 단순합니다.
이 탬플릿은 단지 하나의 지시어 와 하나의 정적 바인딩 그리고 우리의 비워있는 모델로 구성되어 있습니다.
곧 있으면 바뀌게 됩니다.
What are all these files in my working directory?
여러분들 작업 디렉토리 안에 대부분은 파일들을 새로운 Angular 프로젝트들을 부트 스트랩을 하는데 사용되어지는
angular-seed 프로젝트에서 왔습니다.
Seed 프로젝트는 angular 프레임워크(app/bower_component/ 폴더 안에 bower을 통해)와 일반적인 웹 어플리케이션(npm을 통해)을 개발하기 위한
툴들을 설치하기 위해 미리 설정되어 있어 있습니다.
이 튜토리얼의 목적들을 위해, 우리는 angular-seed를 아래 변경사항과 함께 수정할 것입니다.
- Sample app 제거합니다.
- Phone 이미지를 app/img/phones/ 폴더에 추가 합니다.
- Phone 데이터 파일(json) 을 app/phones/에 추가 합니다.
- Bower.json 파일에서 부트스트랩에 의존성을 추가합니다.
Experiments
아래와 같이 index.xml 을 바꿔서 확인 해보세요.
<p>1 +2 = {{ 1 + 2 }} </p>
Summary
1장으로 넘어가서 ,여기 웹 어플리케이션에 약간의 컨텐츠를 더해 봅시다.
'JS&FRONT > AngularJS' 카테고리의 다른 글
| PhoneCat Tutorial App 10- Event Handlers (0) | 2014.10.01 |
|---|---|
| PhoneCat Tutorial App 9- Filters (0) | 2014.09.30 |
| PhoneCat Tutorial App 8 - More Templating (0) | 2014.09.30 |
| PhoneCat Tutorial App 7 - Routing & Multiple views (0) | 2014.09.30 |
| PhoneCat Tutorial App 7 - Templating Links & Images (0) | 2014.09.30 |
| PhoneCat Tutorial App 6 - XHRs & Dependency Injection (0) | 2014.09.25 |
| PhoneCat Tutorial App 5 - Two-way Data Binding (0) | 2014.09.23 |
| PhoneCat Tutorial App 4 - Filtering Repeater (3) | 2014.09.19 |
| PhoneCat Tutorial App 3 - Static Template & Angular Template (0) | 2014.09.17 |
| PhoneCat Tutorial App 1 (0) | 2014.09.16 |