AngularJS 시작하기 튜토리얼(Zero): Bootstrap_AngularJS

이제 AngularJS 애플리케이션인 Phonecat을 작성할 준비가 되었습니다. 이 단계(0단계)에서는 중요한 소스 코드 파일에 익숙해지고, AngularJS 시드 프로젝트가 포함된 개발 환경을 시작하고, 브라우저에서 애플리케이션을 실행하는 방법을 배웁니다.

angular-phonecat 디렉토리에 들어가서 다음 명령을 실행하세요:

코드 복사 코드는 다음과 같습니다.

git checkout -f step-0

이 명령은 Phonecat 프로젝트의 작업 디렉터리를 재설정합니다. 각 학습 단계에서 이 명령을 실행하고 명령의 숫자를 학습 단계에 해당하는 숫자로 변경하는 것이 좋습니다. 작업 디렉토리에서 변경되었습니다.

다음 명령을 실행하세요:

코드 복사 코드는 다음과 같습니다.

노드 스크립트/web-server.js

서버를 시작하면 명령줄 터미널에 http://localhost:8000에서 실행 중인 Http Server가 표시됩니다. 터미널을 닫으면 서버가 종료됩니다. Phonecat 애플리케이션에 액세스하려면 브라우저에 http://localhost:8000/app/index.html을 입력하세요.

이제 브라우저에서 초기 애플리케이션을 봤어야 합니다. 매우 간단하지만 프로젝트를 실행할 준비가 되었음을 보여줍니다.

애플리케이션에 표시되는 "아직 아무것도 없습니다!"는 다음 HTML 코드로 구성됩니다. 이 코드에는 우리가 배워야 할 AngularJS의 핵심 요소가 포함되어 있습니다.

app/index.html

코드 복사 코드는 다음과 같습니다.

머리>

아직 아무것도 없습니다 {{'아직'!'}}

본문>

코드는 무엇을 하고 있나요?

ng-app 지시문:

코드 복사 코드는 다음과 같습니다.

ng-app 지시문은 AngularJS 스크립트의 범위를 표시합니다. 개발자는

와 같은 ng-app 지시문을 로컬에서 사용할 수도 있으며 AngularJS 스크립트는 해당

에서만 실행됩니다.

AngularJS 스크립트 태그:

코드 복사 코드는 다음과 같습니다.

이 코드 줄은angular.js 스크립트를 로드합니다. 브라우저가 전체 HTML 페이지 로드를 완료하면angular.js 스크립트가 실행된 후 다음을 포함하는 HTML 태그를 찾습니다. ng-app 지시문에서 이 태그는 AngularJS 애플리케이션의 범위를 정의합니다.

이중 중괄호로 묶인 표현식:

코드 복사 코드는 다음과 같습니다.

아직 아무것도 없습니다 {{'아직'!'}}

이 코드 줄은 AngularJS 템플릿의 핵심 기능인 바인딩을 보여줍니다. 이 바인딩은 이중 중괄호 {{}}와 '아직' '!' 표현식으로 구성됩니다.

이 바인딩은 AngularJS에 표현식을 평가하고 결과를 DOM에 삽입해야 함을 알려줍니다. 다음 단계에서는 표현식 연산 결과가 변경됨에 따라 DOM이 실시간으로 업데이트될 수 있음을 살펴보겠습니다.

AngularJS 표현식 Angular 표현식은 JavaScript와 유사한 코드 조각입니다. AngularJS 표현식은 전체 DOM에서 실행되는 대신 AngularJS 범위에서만 실행됩니다.

부트스트랩 AngularJS 애플리케이션

ngApp 지시문을 통해 AngularJS 애플리케이션을 자동으로 부팅하는 것은 간결한 방법이며 대부분의 상황에 적합합니다. 스크립트를 사용하여 애플리케이션을 로드하는 등의 고급 개발에서는 부트스트랩을 사용하여 AngularJS 애플리케이션을 수동으로 부트스트랩할 수도 있습니다.

AngularJS 애플리케이션 부트스트랩 프로세스에는 세 가지 중요한 사항이 있습니다.

1. 인젝터는 이 애플리케이션에 대한 종속성 주입을 생성하는 데 사용됩니다.
2. 인젝터는 애플리케이션 모델의 범위로 루트 범위를 생성합니다.
3. AngularJS는 ngApp으로 표시된 HTML 태그부터 시작하여 루트 범위의 DOM에 연결하고 점차적으로 DOM의 지침과 바인딩을 처리합니다.

AngularJS 애플리케이션이 부팅되면 마우스 클릭 이벤트, 키 이벤트, HTTP 수신 응답 및 DOM 모델을 변경하는 기타 이벤트와 같은 브라우저의 HTML 트리거 이벤트를 계속 수신합니다. 이러한 이벤트가 발생하면 AngularJS는 자동으로 변경 사항을 감지하고 그에 따라 처리하고 업데이트합니다.

위 애플리케이션의 구조는 매우 간단합니다. 템플릿 패키지에는 하나의 지시문과 하나의 정적 바인딩만 포함되어 있으며 모델도 비어 있습니다. 다음으로 조금 더 복잡한 애플리케이션을 시도해 보겠습니다!

내 작업 디렉토리에 있는 이 파일들은 무엇을 위한 것인가요?

위 애플리케이션은 AngularJS 시드 프로젝트에서 가져온 것이며 일반적으로 AngularJS 시드 프로젝트를 사용하여 새 프로젝트를 만들 수 있습니다. 시드 프로젝트에는 최신 AngularJS 코드 베이스, 테스트 라이브러리, 스크립트 및 일반적인 웹 애플리케이션을 개발하는 데 필요한 기본 구성이 포함된 간단한 애플리케이션 예제가 포함되어 있습니다.

이 튜토리얼에서는 AngularJS 시드 프로젝트를 다음과 같이 변경했습니다.
1. 샘플 애플리케이션을 삭제하세요.
2. app/img/phones/에 휴대폰 이미지를 추가합니다.
3. app/phones/에 휴대폰 데이터 파일(JSON)을 추가합니다.
4. app/css/ 및 app/img/에 Twitter Bootstrap 파일을 추가합니다.

연습

index.html에 수학 연산에 대한 새로운 표현식을 추가해 보세요.

코드 복사 코드는 다음과 같습니다.

1 2 = {{ 1 2 }}

요약

이제 1단계로 이동하여 웹 애플리케이션에 일부 콘텐츠를 추가해 보겠습니다.