Angular применяется для создания одностраничных приложений - SPA (Single Page Applications).
Angular создает рендер программы, в отличие от подхода, когда весь контент загружен в DOM, а JavaScript его меняет.
В руководстве речь пойдет о версии Angular 5.
Для того, что бы запустить наше первое приложение требуется:
[sudo]
npm install -g npm
(sudo требуется только на Mac/Linux).Установить 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
ng new my-first-app
для создания нашего проекта на Angular.Прейти в директорию проекта и запустить сервер:
cd my-first-app
ng serve
ng serve --port YOURPORT
Файлы приложения находятся в директории /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
.
Жизненный цикл приложения и события в Angular
Режимы инкапсуляции стилей, локальная ссылка в шаблоне Angular. Доступ к шаблону и DOM из компонента с помощью @ViewChild и @ContentChild.
Работа с роутером и ссылками в Angular. Программное переключение роутера и параметры пути в Angular