>  기사  >  웹 프론트엔드  >  AngularJS 환경 구축 단계에 대한 자세한 설명

AngularJS 환경 구축 단계에 대한 자세한 설명

php中世界最好的语言
php中世界最好的语言원래의
2018-04-16 14:06:071380검색

이번에는 AngularJS 환경 구축 단계에 대해 자세히 설명하겠습니다. 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는 프레임워크를 신속하게 구축하고 모듈, 서비스, 클래스, 지시문 등을 생성할 수 있습니다.

코드 분리, 주문형 로딩 등을 실현할 수 있는 webpack 기능이 있습니다

자동으로 개발 환경 , 테스트 환경 및 프로덕션 환경을 구성하여 코드 패키징, 압축 및 핫 배포는 물론 모듈 테스트 및 엔드투엔드 테스트

를 실현할 수 있습니다. Angular-cli는 접미사를 통해 sass 및 less의 사전 컴파일을 자동으로 식별할 수 있습니다. Angular-cli는 생성 시 TypeScript를 구성할 수 있으며 일부 개인화된 구성도 만들 수 있습니다. Angular-cli를 통해 생성된 프로젝트 구조는 모범 사례이며 프로덕션 환경에서 사용할 수 있습니다.

2. nodejs를 설치하세요

AngularJS에는 Nodejs가 필요하므로 먼저 nodejs를 설치하고 nodejs를 사용해야 합니다. nodejs 다운로드 주소는 https://nodejs.org/en/download/, 3. npm 및 cnpm

을 설치합니다. 다음 단계는 npm을 설치하는 것입니다. NPM은 NodeJS와 함께 설치되는 패키지 관리 도구로 NodeJS 코드 배포의 많은 문제를 해결할 수 있습니다. 사용자가 로컬 사용을 위해 NPM 서버에서 다른 사람이 작성한 타사 패키지를 다운로드할 수 있도록 허용합니다.

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

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

여기서 nodejs와 npm 설치는 완료했지만, Datianchao에서 npm을 사용하여 설치하면 몇 가지 문제가 생길 수 있으므로 npm의 패키지이기도 한 cnpm을 사용하여 설치합니다.

cnpm을 설치하고

명령을 실행하세요. npm i -g cnpm

이 명령을 실행한 후 완료될 때까지 기다린 후 cnpm version을 입력하여 설치가 완료되었는지 확인합니다. 여기서는 이미 설치해두었으니 들어가시면 됩니다.

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

명령 실행 npm i -g cnpm

执行这个命令之后,等待完成,然后输入cnpm version查看是否安装完成,这里我已经安装过了,所以可以进去了。

安装完成cnpm之后,我们开始安装Angular-cli。

执行命令

cnpm i -g angular-cli

然后可以执行ng version命令,查看是否安装完成和angular-cli的版本

安装完成之后我们就可以使用ng命令,下面开始创建项目

四、项目创建

安装完成angular-cli之后就可以直接创建项目了,执行命令

ng new JustForTest

cnpm i -g angle-cli

그런 다음 ng version 명령을 실행하여 설치가 완료되었는지와angular-cli🎜🎜 버전을 확인할 수 있습니다. 설치가 완료되면 ng 명령을 사용하여 프로젝트 생성🎜을 시작할 수 있습니다. 🎜🎜 🎜🎜4. 프로젝트 생성🎜🎜🎜🎜 angular-cli를 설치한 후 프로젝트를 직접 생성하고 🎜🎜 명령을 실행할 수 있습니다. 새로운 JustForTest🎜🎜 JustForTest가 프로젝트 이름인 곳🎜

이 명령을 실행하면 많은 파일이 생성되므로 잠시 기다려야 하며, nod_.modules 설치가 완료될 때까지 기다려야 합니다

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

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

에 직접 액세스할 수 있습니다. 5. 프로젝트 가져오기

온라인에서 프로젝트를 찾고 있다면 어떻게 로컬에서 시작합니까? 아래에서 자세히 살펴보겠습니다.

Da Mo 선생님의 이 튜토리얼을 모두들 보시길 권합니다. Angular2.0 비디오 튜토리얼이 여기에 있습니다

, 여기에서는 Da Mo 선생님의 프로젝트인 NiceFish도 사용합니다. 먼저 git을 통해 프로젝트를 복제해야 합니다. 여기서는 NiceFish의 프로젝트 주소인 http://git.oschina.net/mumu를 보여주지 않겠습니다. -osc/NiceFish

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

명령 실행

cnpm i -g @angular/clicnpm i -g @angular/cli

这里说明一下,之前我们安装的是全局的angular-cli。

等待命令执行完成,之后再执行命令

cnpm install

然后执行命令

ng serve -prod -aot

여기서 설명하자면, 이전에 전역 angle-cli를 설치했습니다.

명령 실행이 완료될 때까지 기다린 다음 명령을 실행하세요

cnpm 설치

그런 다음

명령을 실행하세요. ng 봉사 -prod -aot

그런 다음 컴파일이 완료될 때까지 기다립니다.


완료되면 브라우저에 입력할 수 있습니다:

http://localhost:4200 프로젝트에 접속합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜추천 도서: 🎜🎜🎜🎜🎜🎜🎜🎜

위 내용은 AngularJS 환경 구축 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.