Настройка для разработки в локальной среде

Установите шаблон Angular QuickStart для более быстрой и эффективной разработки на вашем компьютере.

Настройка локальной среды разработки

Пример живого кодирования QuickStart — это среда Angular для экспериментов. Это не место для разработки реального приложения. Вам следует разрабатывать локально на собственном компьютере... и именно так мы рекомендуем изучать Angular.

Настройка нового проекта на вашем компьютере проста и быстрая с помощью шаблона QuickStart, поддерживаемого на github.

Убедитесь, что у вас установлены node и npm. Затем...

1. Создайте папку проекта (вы можете назвать её quickstart и переименовать её позже).
2. Скопировать или загрузить шаблон QuickStart в папку проекта.
3. Установите пакеты npm.
4. Запустите npm start для запуска демонстрационного приложения.

Скопировать

Выполните шаги копирования для запуска с помощью этих команд в терминале.

git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install
npm start

npm start не работает в Bash для Windows, так как по состоянию на январь 2017 года он не поддерживает сетевое подключение к серверам.

Скачать

Загрузить шаблон QuickStart и разархивировать его в папку проекта. Затем выполните оставшиеся шаги с помощью этих команд в терминале.

cd quickstart
npm install
npm start

npm start не работает в Bash для Windows, так как по состоянию на январь 2017 года он не поддерживает сетевое подключение к серверам.

Удалить необязательные файлы (необязательно)

Вы можете быстро удалить необязательные файлы, связанные с тестированием и обслуживанием репозитория QuickStart (включая все артефакты git, такие как папка .git и .gitignore!).

Делайте это только в начале, чтобы случайно не удалить свои собственные тесты и настройку git!

Откройте окно терминала в папке проекта и введите следующие команды для вашей среды:

OS/X (bash)

xargs rm -rf < non-essential-files.osx.txt
rm src/app/*.spec*.ts
rm non-essential-files.osx.txt

Windows

for /f %i in (non-essential-files.txt) do del %i /F /S /Q
rd .git /s /q
rd e2e /s /q

Что содержит шаблон QuickStart?

Шаблон QuickStart содержит то же приложение, что и среда QuickStart для живого кодирования. Но его истинная цель — предоставить прочную основу для локальной разработки. Следовательно, в папке проекта на вашем компьютере значительно больше файлов, о большинстве из которых вы можете подробнее узнать позже.

Сфокусируйтесь на следующих трех файлах TypeScript (.ts) в папке /src.

src
  app
    app.component.ts
    app.module.ts
  main.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Все руководства и справочники содержат хотя бы эти основные файлы. Каждый файл имеет определённую цель и развивается независимо по мере роста приложения.

Файлы вне src/ относятся к сборке, развертыванию и тестированию приложения. Они включают файлы конфигурации и внешние зависимости.

Файлы внутри src/ "принадлежат" вашему приложению. Добавляйте новые файлы TypeScript, HTML и CSS в директорию src/, в основном внутри src/app, если не указано иное.

Следующие файлы находятся в src/

Следующий шаг

Если вы новичок в Angular, мы рекомендуем оставаться на пути обучения.

Приложение: node и npm

Node.js и npm необходимы для современной разработки веб-приложений с Angular и других платформ. Node обеспечивает разработку клиента и инструменты сборки. Менеджер пакетов npm, являющийся самим по себе приложением node, устанавливает JavaScript-библиотеки.

Получите их сейчас, если они ещё не установлены на вашем компьютере.

Проверьте, что вы используете node версии v4.x.x или выше и npm версии 3.x.x или выше, выполнив команды node -v и npm -v в окне терминала/консоли. Более старые версии вызывают ошибки.

Мы рекомендуем nvm для управления несколькими версиями node и npm. Вам может понадобиться nvm, если на вашем компьютере уже есть проекты, использующие другие версии node и npm.

Приложение: Почему разрабатывать локально

Живое кодирование в браузере — отличный способ познакомиться с Angular.

Ссылки практически на каждой странице документации открывают готовые примеры в браузере. Вы можете поиграть с образцом кода, поделиться своими изменениями с друзьями и загрузить и запустить код на своём компьютере.

QuickStart показывает только файл AppComponent. Он создаёт эквивалент app.module.ts и main.ts внутри только для среды живого кодирования. Это позволяет пользователю познакомиться с Angular без отвлекающих факторов. Остальные примеры основаны на шаблоне QuickStart.

Как бы это ни было интересно...

• Вы не сможете опубликовать своё приложение в Plunker
• Вы не всегда подключены к сети при написании кода
• Транспиляция TypeScript в браузере медленная
• Поддержка типов, рефакторинг и автодополнение кода работают только в вашей локальной IDE

Используйте среду живого кодирования как среду для экспериментов, место для тестирования примеров из документации и экспериментов. Это идеальное место для воспроизведения ошибки, когда вы хотите создать вопрос по документации или задать вопрос об Angular.

Для реальной разработки мы настоятельно рекомендуем разрабатывать локально.