Меню ×
Установка и первый запуск Angular

Установка и первый запуск Angular

Angular применяется для создания одностраничных приложений - SPA (Single Page Applications).

Angular создает рендер программы, в отличие от подхода, когда весь контент загружен в DOM, а JavaScript его меняет.

В руководстве речь пойдет о версии Angular 5.

Для того, что бы запустить наше первое приложение требуется:

  1. Установить свежую версию node.js с сайта nodejs.org.
  2. Установить или обновить npm: [sudo] npm install -g npm (sudo требуется только на Mac/Linux).
  3. Установить angular-cli: [sudo] npm install -g @angular/cli

    Если у Вас ранее был установлен angular-cli, то рекомендуем его обновить:

    [sudo] npm uninstall -g angular-cli @angular/cli

    npm cache clean

    [sudo] npm install -g @angular/cli

  4. В коонсоли запустить команду ng new my-first-app для создания нашего проекта на Angular.
  5. Прейти в директорию проекта и запустить сервер:

    cd my-first-app

    ng serve

  6. Cервер по умолчанию будет доступен по localhost:4200, поменять порт можно запустив ng serve с параметром: ng serve --port YOURPORT

Пример приложения на Angular 5

Файлы приложения находятся в директории /src/app. Рассмотрим пример, в котором динамически обновляется параграф, дублируя значение, заполненное в форме ввода.

На вновь созданном проекте вносим изменения:

app.component.html:

	
<input type="text" [(ngModel)]="name" />
<p>{{name}}</p>
	

[(ngModel)]="name" так называемое двухстороннее связывание, это является короткой записью двух команд:

  • [ngModel]="name" связывает переменную name с input.value
  • (ngModelChange)="name = $event" по событию изменения input.value связывает его значение с переменной name

app.components.ts:

	

export class AppComponent {
  name = '';
}
	

app.module.ts:

	
import { FormsModule } from '@angular/forms';
...		
	imports: [
		BrowserModule,
		FormsModule
	],
...
	

Для корректной работы примера нужно подключить модуль FormsModule.

Похожие материалы

JavaScript операторы, которые важно знать для работы с Angular

Централизация логики и упрощение коммуникации между компонентами с помощью сервисов.

Что такое структурные директивы. Встроенные и собственные структурные директивы.

наверх