우리는 이제 AngularJS 응용 프로그램 -Phonecat을 작성할 준비를하고 있습니다. 이 단계 (단계)에서는 중요한 소스 코드 파일에 익숙해지고 AngularJS Seed 프로젝트가 포함 된 개발 환경을 시작하고 브라우저 측에서 응용 프로그램을 실행하는 방법을 배우게됩니다.
Angular-Phonecat 디렉토리를 입력하고 다음 명령을 실행하십시오.
코드 사본은 다음과 같습니다.
GIT 체크 아웃 -F Step -0
이 명령은 Phonecat 프로젝트의 작업 디렉토리를 재설정합니다. 각 학습 단계 에서이 명령을 실행하고 명령의 숫자를 학습 단계에 해당하는 숫자로 변경하는 것이 좋습니다.
다음 명령을 실행하십시오.
코드 사본은 다음과 같습니다.
노드 스크립트/Web-Server.js
서버를 시작하려면 명령 줄 터미널이 http : // localhost : 8000에서 실행되는 http 서버를 자랑합니다. 터미널을 닫지 마십시오. 터미널을 닫으면 서버가 닫힙니다. http : // localhost : 8000/app/index.html을 브라우저에 입력하여 Phonecat 응용 프로그램에 액세스하십시오.
이제 브라우저에서는 초기 응용 프로그램을 보았을 것입니다. 이는 간단하지만 프로젝트가 실행될 준비가되었음을 의미합니다.
"아직 아무것도!" 응용 프로그램에 표시되는 것은 AngularJS의 주요 요소를 포함하는 다음 HTML 코드로 구성되어 있습니다.
app/index.html
코드 사본은 다음과 같습니다.
<! doctype html>
<html lang = "en"ng-app>
<헤드>
<meta charset = "utf-8">
<title> 내 html 파일 </title>
<link rel = "Stylesheet"href = "css/app.css">
<link rel = "스타일 시트"href = "css/bootstrap.css">
<script src = "lib/angular/angular.js"> </script>
</head>
<body>
<p> 여기에 아무것도 {{ '아직' + '!'}} </p>
</body>
</html>
코드는 무엇을하고 있습니까?
NG-APP 지침 :
코드 사본은 다음과 같습니다.
<html lang = "en"ng-app>
NG-APP 지시문은 AngularJS 스크립트의 범위를 표시합니다. <html>에 ng-app 속성을 추가한다는 것은 전체 <html>가 AngularJS 스크립트의 범위임을 의미합니다. 개발자는 <div ng-app>과 같은 NG-App 지시문을 로컬로 사용할 수 있으며 AngularJS 스크립트는 해당 <Div>에서만 실행됩니다.
AngularJS 스크립트 태그 :
코드 사본은 다음과 같습니다.
<script src = "lib/angular/angular.js"> </script>
이 코드 라인은 Angular.js 스크립트에로드됩니다. 브라우저가 전체 HTML 페이지를로드하면 Angular.js 스크립트가 실행됩니다. Angular.js 스크립트가 실행되면 NG-App 지시문이 포함 된 HTML 태그를 찾습니다. 이 태그는 AngularJS 응용 프로그램의 범위를 정의합니다.
이중 브레이스 바운드 표현 :
코드 사본은 다음과 같습니다.
<p> 여기에 아무것도 {{ '아직' + '!'}} </p>
이 코드 라인은 AngularJS 템플릿 - 바인딩의 핵심 함수를 보여줍니다. 이는 이중 버팀대 {{}}과 'all' + '!'로 구성됩니다.
이 바인딩은 AngularJS에 표현식을 계산하고 결과를 DOM에 삽입해야한다고 말합니다. 다음 단계에서는 표현식 작업 결과가 변경됨에 따라 DOM을 실시간으로 업데이트 할 수 있음을 알 수 있습니다.
Angularjs 발현 각도 표현은 JavaScript와 같은 스 니펫이며, Angularjs 표현식은 전체 dom이 아닌 AngularJS의 범위에서만 실행됩니다.
AngularJS 응용 프로그램을 부팅하십시오
NGAPP 지시문을 통해 AngularJS 애플리케이션을 자동으로 부팅하는 것은 대부분의 상황에 맞는 간결한 방법입니다. 스크립트를 사용하여 앱을로드하는 것과 같은 고급 개발에서는 부트 스트랩을 사용하여 AngularJS 애플리케이션을 수동으로 부팅 할 수도 있습니다.
AngularJS 응용 프로그램 부팅 프로세스에는 세 가지 중요한 점이 있습니다.
1. 인젝터는이 응용 프로그램에 대한 종속성 주입을 생성하는 데 사용됩니다.
2. 인젝터는 응용 프로그램 모델의 범위로 루트 범위를 생성합니다.
3. AngularJS는 NGAPP로 표시된 HTML 태그로 시작하여 DOM의 지침 및 바인딩을 점차적으로 다루는 DOM을 루트 범위로 연결합니다.
AngularJS 애플리케이션이 부팅되면 Mouse Click 이벤트, 주요 프레스 이벤트, HTTP 수신 응답 등과 같은 브라우저의 HTML 트리거링 이벤트를 계속 듣게됩니다. 이러한 이벤트가 발생하면 AngularJS는 변경 사항을 자동으로 감지하고 해당 처리 및 업데이트를 수행합니다.
위의 응용 프로그램의 구조는 매우 간단합니다. 템플릿 패키지에는 하나의 지침과 하나의 정적 바인딩 만 포함되어 있으며 모델도 비어 있습니다. 다음으로 약간 더 복잡한 응용 프로그램을 시도해 봅시다!
작업 디렉토리 의이 파일은 무엇을합니까?
위의 응용 프로그램은 AngularJS Seed Project에서 제공되며 일반적으로 AngularJS Seed 프로젝트를 사용하여 새로운 프로젝트를 만들 수 있습니다. 시드 프로젝트에는 최신 AngularJS 코드베이스, 테스트 라이브러리, 스크립트 및 일반적인 웹 애플리케이션을 개발하는 데 필요한 기본 구성이 포함 된 간단한 응용 프로그램 예제가 포함됩니다.
이 튜토리얼의 경우 AngularJS Seed 프로젝트를 다음과 같이 변경했습니다.
1. 샘플 응용 프로그램을 삭제합니다.
2. App/IMG/Phones/에 휴대 전화 이미지 추가/;
3. app/phones/에 휴대 전화 데이터 파일 (JSON)을 추가하십시오.
4. Twitter Bootstrap 파일을 App/CSS/및 App/Img/에 추가하십시오.
관행
index.html에 수학 연산에 대한 새로운 표현식을 추가하십시오 :
코드 사본은 다음과 같습니다.
<p> 1 + 2 = {{1 + 2}} </p>
요약
이제 1 단계로 가서 웹 응용 프로그램에 콘텐츠를 추가합시다.