Создание проектов Angular 2 никогда не было быстрее, чем с помощью Angular CLI.

Если вы когда-либо проходили Быстрый запуск Angular 2 за последний год, вы знаете, что большая часть начала работы с Angular 2 — это настройка.

Он включал такие вещи, как:

  • Создание файлов нашего приложения
  • Настройка TypeScript и типизации
  • Добавление тегов сценария для
  • Угловой 2
  • Rx.js
  • System.js
  • Настройка System.js
  • Создание нашего компонента Angular 2
  • Начальная загрузка нашего приложения Angular 2

Говорить о многом! К счастью, на ng-conf 2016 команда Angular анонсировала инструмент, который сделает создание и создание шаблонов приложений Angular 2 невероятно простым.

Angular CLI cli.angular.io

Angular CLI эффективно выполняет все шаги по настройке и настройке, показанные выше, и объединяет их в одну быструю строку:

ng new scotchy-scotch

Есть много вещей, которые может сделать CLI, поэтому давайте установим его и рассмотрим некоторые функции.

Установка интерфейса командной строки Angular

Для установки CLI воспользуемся Node and npm.

npm install -g angular-cli

Вот и все! Теперь мы можем начать использовать CLI для создания наших приложений.

Запуск нового приложения

Чтобы запустить новое приложение, просто запустите команду, которую мы видели ранее:

ng new scotchy-scotch

Итак, что именно это делает для нас? Давайте посмотрим на вновь созданные папки и файлы:

// configuration files |- config/ |----- environment.dev.ts |----- environment.js |----- environment.prod.ts |----- karma-test-shim.js |----- karma.conf.js |----- protractor.conf.js // end-to-end-tests |- e2e/ |----- app.e2e.ts |----- app.po.ts |----- tsconfig.json |----- typings.d.ts // npm dependencies |- node_modules/ // public facing app. built things go here |- public/ // where most of the work will be done |- src/ |----- app/ |----- shared/ |----- index.ts |----- environment.ts |----- index.ts // our first generated component |----- scotchy-scotch.component.css|html|spec.ts|ts |----- favicon.ico |----- icon.png |----- index.html |----- main.ts |----- manifest.webapp |----- system-config.ts |----- tsconfig.json |----- typings.d.ts // overall configuration |- typings/ |- .clang-format |- .editorconfig |- .gitignore |- angular-cli-build.js |- angular-cli.json |- package.json |- tslint.json |- typings.json

Важно принять к сведению эту структуру каталогов и расположение файлов, потому что приложение, которое генерирует Angular CLI, следует рекомендуемой структуре приложения и руководству по стилю.

Большая часть нашего приложения находится в папке src/app. Здесь мы будем работать, и все, что будет скомпилировано и доступно для нашего окончательного приложения, будет встроено в общую папку.

Извлеките уроки из этого и включите эти вещи в свое собственное развитие. Angular CLI не только создаст файлы и папки, но и установит все необходимые зависимости npm.

Вот созданный по умолчанию package.json:

{ "name": "scotchy-scotch", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "start": "ng server", "postinstall": "typings install", "lint": "tslint \"src/**/*.ts\"", "format": "clang-format -i -style=file --glob=src/**/*.ts", "pree2e": "webdriver-manager update", "e2e": "protractor" }, "private": true, "dependencies": { "@angular/common": "2.0.0-rc.1", "@angular/compiler": "2.0.0-rc.1", "@angular/core": "2.0.0-rc.1", "@angular/platform-browser": "2.0.0-rc.1", "@angular/platform-browser-dynamic": "2.0.0-rc.1", "@angular/router": "2.0.0-rc.1", "es6-shim": "^0.35.0", "reflect-metadata": "0.1.3", "rxjs": "5.0.0-beta.6", "systemjs": "0.19.26", "zone.js": "^0.6.12" }, "devDependencies": { "angular-cli": "^1.0.0-beta.0", "clang-format": "^1.0.35", "codelyzer": "0.0.14", "ember-cli-inject-live-reload": "^1.4.0", "jasmine-core": "^2.4.1", "jasmine-spec-reporter": "^2.4.0", "karma": "^0.13.15", "karma-chrome-launcher": "^0.2.3", "karma-jasmine": "^0.3.8", "protractor": "^3.3.0", "ts-node": "^0.5.5", "tslint": "^3.6.0", "typescript": "^1.8.10", "typings": "^0.8.1" } }

Все эти зависимости добавляются и включаются в наш файл src/index.html. Все настройки, которые были в быстром запуске Angular, теперь позаботятся о нас.

Просмотрите файл index.html, и вы увидите загруженные скрипты и запущенный System.js:

новые опции

  • — пробный запуск (псевдоним d): выводить только созданные файлы и выполненные операции. На самом деле он не создает проект.
  • — verbose (псевдоним v): показать больше информации
  • — skip-npm: не запускайте никакие команды npm, такие как установка зависимостей.
  • — skip-git: не создавать новый репозиторий git для этого проекта.
  • — каталог: укажите каталог, в котором вы хотите создать этот проект.

Инициализировать новое приложение

Первоначально опубликовано на www.laravelfeed.com.