AngularJS 환경 구축 튜토리얼

이 글에서는 주로 초보자를 위한 AngularJS 환경 설정 과정을 소개합니다. 글에 언급된 Angular-cli의 기능을 살펴보고 초보자가 AngularJS 환경을 성공적으로 구축하는 데 도움이 되기를 바랍니다.

AngularJS란 무엇인가요?

AngularJS는 오픈 소스 웹 애플리케이션 프레임워크입니다. 원래 MISKO Hevery와 Adam Abrons가 2009년에 개발했습니다. 현재 Google에서 관리

AngularJS 기능

AngularJS는 RIA(Rich Internet Application)를 생성하기 위한 강력한 JavaScript 기반 개발 프레임워크입니다.

AngulajJS는 개발자에게 깔끔한 MVC(모델-뷰-컨트롤러) 방식으로 클라이언트 측 애플리케이션을 작성할 수 있는 옵션(JavaScript 사용)을 제공합니다.

AngularJS로 작성된 애플리케이션은 브라우저 간 호환됩니다. AngularJS는 JavaScript 코드를 사용하여 각 브라우저에 대한 적응을 자동으로 처리합니다.

AngularJS는 완전 무료인 오픈 소스이며 전 세계 수천 명의 개발자가 개발하고 유지 관리합니다. Apache License 버전 2.0으로 출시되었습니다.

전반적으로 AngularJS는 대규모 고성능 웹 애플리케이션을 구축하는 동시에 유지 관리가 용이한 프레임워크입니다.

1. Angular-cli의 기능에 대한 간략한 소개는 다음과 같습니다.

Angular-cli는 프레임워크를 빠르게 구축하고 모듈, 서비스, 클래스, 지시문 등을 생성할 수 있습니다.

웹팩 기능이 있습니다. 코드 분리 및 주문형 로딩 등을 실현합니다.

코드 패키징, 압축 및 핫 배포를 실현할 수 있는 개발 환경, 테스트 환경 및 생산 환경을 자동으로 구성하고 모듈 테스트 및 엔드투엔드도 실현할 수 있습니다.

Angular-cli는 접미사를 통해 sass 및 less의 사전 설정을 자동으로 식별할 수 있습니다.

Angular-cli는 생성 시 TypeScript를 구성할 수 있으며

Angular를 통해 생성된 프로젝트 구조도 가능합니다. cli는 모범 사례이며 프로덕션 환경에서 사용할 수 있습니다.

2. nodejs 설치

AngularJS는 Nodejs를 사용해야 하므로 먼저 nodejs를 설치해야 합니다. nodejs의 다운로드 주소는 다음과 같습니다. ://nodejs.org/en/download/,

3. npm 및 cnpm 설치

다음 단계는 npm 설치입니다.

NPM은 NodeJS와 함께 설치되는 패키지 관리 도구입니다. 코드 배포 일반적인 사용 시나리오는 다음과 같습니다.

사용자가 NPM 서버에서 다른 사람이 작성한 파일을 다운로드하도록 허용합니다.

사용자가 로컬 사용을 위해 NPM 서버에서 다른 사람이 작성한 명령줄 프로그램을 다운로드하고 설치할 수 있습니다.

사용자가 다른 사람이 사용할 수 있도록 NPM 서버에 작성한 패키지나 명령줄 프로그램을 업로드할 수 있습니다.

여기서 nodejs와 npm 설치가 완료되었습니다. 하지만 Datianchao에서 npm을 사용하여 설치하면 몇 가지 문제가 발생하므로 cnpm도 npm 패키지로 설치합니다.

cnpm을 설치하고

npm i -g cnpm

명령을 실행한 후 완료를 기다린 다음 cnpm 버전을 입력하여 설치가 완료되었는지 확인합니다. 여기서는 이미 설치해두었으니 가셔도 됩니다. 안에.

cnpm을 설치한 후 Angular-cli 설치를 시작합니다.

명령을 실행하세요

cnpm i -gangular-cli

그런 다음 ng version 명령을 실행하여 설치가 완료되었는지 확인하고angular-cli의 버전을 확인할 수 있습니다

설치가 완료된 후 다음을 사용할 수 있습니다. ng 명령을 실행하고 프로젝트 생성을 시작합니다.

4. 프로젝트 생성

angular-cli를 설치한 후 프로젝트를 직접 생성할 수 있습니다.

ng new JustForTest

여기서 JustForTest는 프로젝트 이름

이 명령을 실행하면 많은 파일이 생성됩니다. 이 단계는 시간이 오래 걸립니다. nod_.modules 설치가 완료될 때까지 기다려야 합니다.

ng Serve를 사용하여 직접 시작하세요.

이런 식으로 브라우저에 http://localhost:4200을 입력하면 프로젝트를 직접 시작할 수 있습니다.

5. 프로젝트 가져오기

다음에서 프로젝트를 찾고 있는 경우 인터넷, 로컬에서 어떻게 시작하나요? 자세히 살펴보겠습니다.

모든 사람이 Da Mo 선생님의 이 튜토리얼을 보시기 바랍니다. Angular 2.0 비디오 튜토리얼이 여기 있습니다

여기서 시연하기 위해 Da Mo 선생님의 프로젝트인 NiceFish First도 사용합니다. , git을 통해 프로젝트를 전송해야 합니다. 여기서는 NiceFish의 프로젝트 주소를 보여주지 않겠습니다. http://git.oschina.net/mumu-osc/NiceFish

프로젝트가 끝난 후입니다. 복제되면 명령줄은 프로젝트가 있는 디렉터리로 들어갑니다.

명령을 실행하세요

cnpm i -g @angular/cli

글로벌 각도-cli를 설치하기 전에 여기서 설명하겠습니다.

명령 실행이 완료될 때까지 기다린 다음

cnpm install

명령을 실행합니다.

ng Serve -prod -aot

명령을 실행한 다음 컴파일이 완료될 때까지 기다립니다.

완료 후 브라우저에

http://localhost:4200을 입력하여 프로젝트에 액세스할 수 있습니다.

관련 권장 사항:

자세한 예제와 그래픽 예제가 포함된 Vue, node, webpack 환경 구축 튜토리얼

자세한 예제가 포함된 Vue 환경 구축을 위한 간단한 튜토리얼

Vue 환경 구축 방법에 대한 가장 명확한 그래픽 튜토리얼 PHP 서버 환경

위 내용은 AngularJS 환경 구축 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!