Установка и первый запуск 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.