Встановлення локальної розробки

Встановлення середовища для локальної розробки

Зразок Швидкого Старту у веб-редакторі є ігровим майданчиком з Angular. Це не те місце, де вам слід розробляти реальні застосунки. Розробка повинна відбуватись локально на вашій власній машині ... це стосується також і вивчення Angular взагалі.

Налаштування нового проекта на вашій машині спрощується завдяки зернам Швидкого Старта, матеріали яких обслуговуються на github.

Живий приклад Швидкого Старту містить файли app.module.ts та main.ts застосунку (описані нижче), які полегшують урізноманітнити приклади застосунка.

Переконайтесь що у вас встановлено node та npm. Потім ...

  1. Створіть теку проекта (ви можете назвати її quickstart, а пізніше перейменувати).
  2. Клонуйте або завантажте зерна Швидкого старта у вашу теку проекта.
  3. Встановіть npm-пакети.
  4. Виконайте npm start щоб запустити зразок застосунка.

Клонування

Пройдіть кроки для клонування та запуску, виконавши наступні команди в терміналі.

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

npm start fails in Bash for Windows which does not support networking to servers as of January, 2017.

Завантаження

Завантажте зерна Швидкого Старту та розархівуйте їх у теку вашого проекта. Потім пройдіть решту кроків виконавши наступні команди у терміналі.

cd quickstart npm install npm start

npm start fails in Bash for Windows which does not support networking to servers as of January, 2017.

Що є у зернах Швидкого Старту?

Зерна Швидкого Старту містять той же самий застосунок, яким він є у веб-редакторі Швидкого Старта. Вони надають солідний фундамент для локальної розробки, а не лише матеріали власне для Швидкого Старта. Саме тому, на вашій машині у теці проекта є незгадані тут файли, більшість з яких ви вивчатимете пізніше.

Сфокусуйтесь на наступних трьох файлах TypeScript (.ts) у теці /app.

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.module'; platformBrowserDynamic().bootstrapModule(AppModule);

Усі уроки в підручнику мають принаймні ці три основні файли. Кожен файл має окреме призначення та розвиватиметься відповідно до розвитку застосунка.

ФайлПризначення
app.component.ts

Визначає той самий AppComponent, яким він є у веб-редакторі Швидкого старта. Він є кореневим компонентом, який пізніше перетвориться у дерево для вкладених компонентів, коли застосунок розвиватиметься.

app.module.ts

Визначення AppModule, кореневого модуля, який говорить Angular як збирати застосунок. В даний момент, в нього імпортується лише AppComponent. Незабаром тут буде більше компонентів.

main.ts

Компілювання за допомогою JIT-компілятора та запуск застосунку для роботи у браузері. Це розумний вибір при розробці більшості проектів, і він є єдиним робочим вибором для запуску зразків в середовищі такого веб-редактора, як Plunker. Пізніше в цій документації ви вивчатимете альтернативну компіляцію та опції розробки.

Наступний крок

Якщо ви є новачком в Angular, ми рекомендуємо залишатись на шляху навчання.



Додаткова інформація: node та npm

Node.js та npm мають важливе значення для сучасної веб-розробки на Angular та на інших платформах. Node є рушієм для так званої клієнт-розробки та для допоміжних інструментів. Пакетний менеджер npm сам-по-собі є node-застосунком, який встановлює JavaScript-бібліотеки.

Отримайте node та npm зараз, якщо ви ще досі немаєте їх на вашій машині.

Переконайтесь, що у вас працює node v4.x.x або вище, та npm 3.x.x або вище: виконайте команди node -v та npm -v у вікні терміналу. Старіші версії видаватимуть помилки.

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

Додаткова інформація: Чому розробляти локально

Писати код у веб-редакторі - хороший спосіб для огляду можливостей Angular.

Лінки так званих "живих прикладів", що є майже на будь-якій сторінці документації, відкривають повні приклади обговорюваного коду у браузері. Ви можете покопатись у цих зразках коду, поширити ваші зміни поміж друзів, та завантажити і запустити цей код на вашій власній машині.

У веб-редакторі Швидкого Старта видимий лише файл з AppComponent. У даному редакторі внутрішньо створюються еквіваленти файлу app.module.ts та main.ts але вони невидимі, завдяки чому читач може досліджувати Angular без відволікання. Інші зразки коду базуються на зернах Швидкого старту.

Це все дуже прикольно, до поки ...

Використовуйте середовище живого прикладу як ігровий майданчик, місце, де можна перевірити зразки коду з документації, та як місце для власних експериментів. Це є прекрасним місцем для відтворення неполадок, коли ви хочете відправити питання по документації або відправити питання по самому Angular.

Для реальної розробки, ми настійно рекомендуємо розробляти локально.