maxidebox@list.ru | +7 (929) 701 21 71
Установка и первый запуск 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.

Голосов: 28 | Просмотров: 85

Заявка на создание сайта / Продвижение сайта

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта
Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта
Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту

Закажите сайт по телефону: +7 (929) 701 21 71