> 웹 프론트엔드 > JS 튜토리얼 > 궁극적 인 각도 CLI 참조 안내서

궁극적 인 각도 CLI 참조 안내서

尊渡假赌尊渡假赌尊渡假赌
풀어 주다: 2025-02-15 11:03:12
원래의
556명이 탐색했습니다.

이 기사는 각도 CLI : 기능, 기능 및 기본 메커니즘을 탐구합니다. 경험이 풍부한 Angular CLI 사용자조차도 내면의 작업에 도움이되는 새로 고침을 발견 할 수 있습니다. 각도 개발에는 엄격하게 필수적이지 않지만 Angular CLI는 코드 품질과 개발자 효율성을 크게 향상시킵니다.

이것은 Angular에서 TODO 응용 프로그램을 구축하는 4 부 시리즈에서 첫 번째입니다.

Part 0 - 궁극적 인 각도 CLI 참조 안내서 1 부 - 초기 TODO 응용 프로그램 구축 2 부 - TODO 목록 및 개별 TODOS의 구성 요소 분리

Part 3 - Todo 서비스를 REST API 와 통합 파트 4 - 데이터 해상도를 위해 각도 라우터를 활용
    주요 개념 :
  1. Angular CLI는 생성, 테스트 및 배포와 같은 작업을 자동화하여 각도 앱 개발을 간소화하는 강력한 도구 세트입니다. 새로운 각도 프로젝트를 생성하고 파일, 종속성 및 구성을 자동으로 설정합니다. 라이브 재 장전을 활성화하여 코드 변경의 실시간 미리보기를 제공합니다. 기존 프로젝트에 기능 (구성 요소, 서비스 등)을 추가합니다 JavaScript 및 CSS를 번들로 연결하여 생산 응용 프로그램을 준비합니다. 각도 CLI는 코드 생성을 넘어서고; 응용 프로그램 구조를 이해하여 코드베이스 품질 및 일관성을 보장합니다
  2. 간단한 역사
  3. Angular Final은 2016 년 9 월 15 일에 출시되었습니다. Framework (Angularjs 1.x)에서 웹, 모바일 웹, 기본 모바일 및 데스크톱 개발을 지원하는 포괄적 인 플랫폼으로 발전하여 강력한 도구가 필요합니다. Angular Team은 설정 및 구성 복잡성을 최소화하기 위해 Angular CLI를 개발하여 개발자가 응용 프로그램 빌드에 집중할 수 있도록했습니다. 이 도구 세트에는 IDE/편집기 통합 및 각도 CLI 자체가 포함됩니다.
  4. 2017.04.25 업데이트 : 각도 CLI v1.0 변경 사항을 반영합니다. 기존 프로젝트를 업데이트하려면 Angular CLI v1.0 마이그레이션 안내서를 참조하십시오. 2017.02.17 업데이트 :
  5. 명령이 핵심 각도 CLI에서 제거되었습니다. 2017.01.27 업데이트 : 공식적으로 2 개의 릴리스에는 "Angularjs"및 "Angular"를 공식적으로 사용합니다.
  6. angular cli는 무엇입니까? Angular CLI는 개발 워크 플로우를 자동화하는 명령 줄 인터페이스입니다. 그 기능은 다음과 같습니다
      새로운 각도 응용 분야 생성 실시간 미리보기를 위해 LiverEload로 개발 서버를 실행합니다 기존 애플리케이션에 기능 추가 단위 테스트 실행 엔드 투 엔드 (E2E) 테스트 실행 생산 배치를위한 구축
  7. 이러한 기능을 탐색하기 전에 설치를 표지하기 전에 전제 조건 typeScript 설치 (적극 권장)는 npm을 통해 수행됩니다 node.js 및 typeScript가 설치된 상태에서 각도 CLI를 설치하십시오. angular cli 설치 NPM을 사용하여 전 세계적으로 설치 : : 로 설치를 확인하십시오
  8. 이것은 설치된 버전 정보를 표시합니다 (예 : ) 새로운 각도 응용 프로그램 생성 새로운 응용 프로그램을 생성하기위한 두 가지 방법이 있습니다 :
  9. : 현재 디렉토리에서 응용 프로그램을 만듭니다 : 새 디렉토리를 생성 한 다음 내에서 실행됩니다.

    는 디렉토리 생성에 선호됩니다. 예를 들면 :

    이렇게하면

    디렉토리를 생성하고 필요한 파일을 생성하고 종속성을 설치하고 TypeScript, Karma, Retractor 및 Environment Files를 구성합니다.

    수많은 옵션을 커스터마이징 프로젝트 생성 (전체 목록은
    $ node -v
    $ npm -v
    로그인 후 복사
    로그인 후 복사
    참조) : <🎜 🎜>

    <<> : 파일을 작성하지 않고 생성을 시뮬레이션합니다
    $ npm install -g typescript@2.2.0
    로그인 후 복사
    <<> : 상세한 출력을 제공합니다 <🎜 🎜> <<> :

    패키지를 연결합니다 <🎜 🎜> <<> : Skips NPM 설치. <🎜 🎜>

    <<> : git 리포지토리 초기화를 건너 뜁니다

    <<> : 테스트 파일 생성을 건너 뜁니다. <🎜 🎜>

    <<> : 초기 git 커밋을 건너 뜁니다 <🎜 🎜> <<> : 디렉토리 이름을 지정합니다 <🎜 🎜> <<> : 소스 디렉토리 이름을 지정합니다 <🎜 🎜> <<> : 스타일 언어 (CSS, Less, SCSS)를 지정합니다

    <<> : 구성 요소 접두사를 지정합니다

    <<> : PWA (Progressive Web App)를 생성합니다 <🎜 🎜> <<> : 라우팅 모듈을 추가합니다 <🎜 🎜> <<> : 인라인 스타일을 사용합니다 <🎜 🎜> <<> : 인라인 템플릿을 사용합니다
    $ npm install -g @angular/cli
    로그인 후 복사
    이제 응용 프로그램을 실행합시다 <<<> 응용 프로그램 실행 <🎜

    프로젝트 디렉토리 (<🎜 🎜>)로 이동하여 실행 : <🎜 🎜>

    $ node -v
    $ npm -v
    로그인 후 복사
    로그인 후 복사
    이것은 개발 서버 (기본 포트 4200)를 시작합니다. Livereload는 파일 변경에서 브라우저를 자동으로 새로 고칩니다. 서버를 중지하려면 를 누릅니다 기능 추가

    명령은 특징을 추가합니다 : ctrl-c

    ng generate

    • ng generate class my-new-class
    • ng generate component my-new-component
    • ng generate directive my-new-directive 더 짧은 형태가 존재합니다 (예 : ). 각 하위 명령에는 특정 옵션이 있습니다 (Check ). CLI는 새로운 기능을 적절한 모듈에 지능적으로 통합합니다.
    • (나머지 응답은 각각 하위 명령, 단위 테스트, E2E 테스트, 생산 빌드, 배포 ( 제거), 응용 프로그램, 향후 기능, 요약 및 FAQS를 방출하는 각각을 자세히 설명합니다. , 원래 구조와 이미지 배치를 유지하면서 각 하위 명령과 나머지 텍스트에 대한 자세한 설명이 생략되었습니다.
    • ng generate enum my-new-enum

위 내용은 궁극적 인 각도 CLI 참조 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿