Angular
Angular - это фреймворк, разработанный Google для создания клиентских (frontend WEB development) приложений. Прежде всего он предназначен для разработки SPA - проектов (Single Page Application),
то есть одностраничных приложений. В этом плане Angular является наследником
другого фреймворка AngularJS. В то же время Angular, начиная с версии 2, это не новая версия AngularJS, а принципиально новый фреймворк.
Последняя версия Angular на момент написания - Angular 6. Официальный репозиторий фреймворка на гитхаб: https://github.com/angular/angular.
Одной из ключевых особенностей Angular является то, что он использует в качестве языка программирования TypeScript. Можно писать приложения на Angular с помощью таких языков как Dart, ECMAScript или JavaScript. TypeScript является основным языком для
Angular.
Язык TypeScript - это надмножество языка ECMAScript 6 (также известной как ECMAScript 2015, ES2015), которое компилируется в обычный код на JavaScript (ES5) и широко поддерживается современными ОС.
На настоящий момент браузеры не имеют встроенной поддержки ни TypeScript, ни ECMAScript 6, поэтому для публикации на сервеере код должен быть преобразован в код на JavaScript, поддерживаемый всеми браузерами.
Установка Angular
https://angular.io/guide/setup#windows
NodeJS
Установка
NodeJS ( Node.js® - это среда выполнения для языка JavaScript, построенная на платформе JavaScript V8 для Chrome. https://nodejs.org/en/)
Node.js позволяет запускать JavaScript-код вне браузера.
Чтобы JavaScript код выполнился вне браузера (на backend), он должен быть интерпретирован и выполнен. Именно это и делает Node.js. Для этого он использует движок V8 VM от Google — ту же самую среду исполнения для JavaScript, которую использует браузер
Google Chrome.
Скачать установочный пакет для нужной операционной системы и запустить установку, соогласно инструкции.
Так, например, для 32 bit Windows нужен файл: node-v8.9.4-x86.msi . Программа установки NodeJS для Windows одной из опций предлагает поставить также и npn.
Проверить версию
node -v
npm
(npm - это менеджер пакетов для JavaScript и самый большой реестр программного обеспечения https://www.npmjs.com/)
Если не поставили вместе с NodeJS, то скачать по ссылке https://nodejs.org/en/download/ и поставить дополнительно.
Некоторые команды
npm -vпроверить версию
p>
npm list strong>получить перечень локально установленны пакетов
npm list -gсписок глобально установленных пакетов
Angular CLI
Наиболее популярный инструмент для управления пректами Angular.
https://cli.angular.io/
На github:
https://github.com/angular/angular-cli
установить cli
npm install -g @angular/cli
удалить cli
npm uninstall -g angular-cli
npm cache clean
npm cache clean --force
проверить установленную версию
ng --version
Редактор кода
Для редактирования проектов на Angular удобно пользоваться, например:
Visual Studio Code
Notepad++
Новый проект
Запустить консоль NodeJS
Перейти в папку с проектами Angular и запустить создание нового - project1 командой:
ng new project1
Перейти в папку созданного проекта
cd project1
CLI автоматически создаёт начальную структуру папок и файлов проекта.
В папке ./src/app находятся, в частности:
- app.component.ts - первый Angular - компонент, корневой, он называется app-root
- app.module.ts - исполняемый модуль
- app.component.css - стили
- app.component.html - шаблон HTML для вывода в окно браузера
Запустить проект
ng serveили, указав другой порт и директиву открыть сразу проект в браузере:
ng serve --port 3000 --open
Открыть запущенный проект в браузере
http://localhost:4200 (или, соответственно http://localhost:3000)
Редактировать проект
Файлы запущенного проекта можно редактировать в любом редакторе кодов (например: Notepad++). При сохранении изменений проект автоматически перезапускается и в окне браузера сразу отражаются изменения.
Отредактируем файл шаблона корневого компонента нашего приложения (), заменим его на:
<h1> Название проекта: {{ title }}! </h1>
<h2> Наш первый проект с Angular 5 </h2>
Сгенерировать проект для публикации
ng build --prod
Проект для публикации (HTML, CSS, JavaScript) по умолчанию создастся в папке dist
Все команды ng (Angular):
Wiki https://github.com/angular/angular-cli/wiki
PDF https://cli.angular.io/reference.pdf
Angular компоненты (Components)
Основной составляющий блок проекта на Angular - компонент.
Создаём новый компонент (Angular component)
Создаём компонент с именем comp1 в паке существующего проекта
ng generate component comp1
По завершении команды в папке app проекта добавилась папка нашего нового компонента - src/app/comp1.
В файл app.module.ts добавилась строки описания нашего компонента:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Comp1Component } from './comp1/comp1.component';
@NgModule({
declarations: [
AppComponent,
Comp1Component ],
imports: [
BrowserModule ],
providers: [],
bootstrap: [
AppComponent]
})
export class AppModule { }
По-умолчанию создался компонент с селектором: app-comp1. Используя этот селектор можно добавить новый компонент в наше приложение. Для этого в файле с шаблоном нашего приложения (app.component.html) добавим строки:
Он примет вид:
<div style="text-align:center"> <h1> Название проекта: {{ title }}! </h1>
<H1> Наш первый проект с Angular 5 </H1>
<app-comp1> </app-comp1>
Шаблон нового компонента находится в его файле с именем:
src\app\comp1\comp1.component.html
Отредактируем его, вставив строки:
<h2> Первый компонент! </h2>
Запустить наше приложение с новым компонентом, проверить работу:
ng serve
Структура компонента Angular
Компонет состоит из 3-х секций:
- директива - import
- декоратор
- директива export
Импортируем из библиотеки '@angular/core' необходимые модули:
import { Component, OnInit } from '@angular/core';
Некоторые компоненты могут содержать множество директив import
Декоратор компонента позволяет менять некоторые свойства нашего компонента (метаданные).
Приведённый ниже декоратор задаёт свойства компонента (selector, templateUrl, styleUrls).
@Component({
selector: 'app-comp1',
templateUrl: './comp1.component.html',
styleUrls: ['./comp1.component.css']
})
selector - имя тега, использование которого инициирует наш компонент.
templateUrl - шаблон HTML (может быть именем файла или встроенным набором HTML - свойство template )
styleUrls - листы стилей (список файлов или встроенный - inline набор описаний стилей - свойство styles )
В директиве export описаны свойства и методы класса-компонента, которые будут доступны другим компонентам приложения
export class Comp1Component implements OnInit {
public title ;
constructor() {
}
ngOnInit() {
this.title = 'Первый компонент запущен.'
}
}
Файл компонента - программа на Typescript :
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-comp1',
templateUrl: './comp1.component.html',
styleUrls: ['./comp1.component.css']
})
export class Comp1Component implements OnInit {
public title ;
constructor() {
}
ngOnInit()
{
this.title = 'Первый компонент запущен.'
}
}
Шаблоны Angular (Angular templates)
Создадим новый проект (app-my-first-component) и посмотрим, как работать с шаблонами и стилями.
Встроенные и внешние шаблоны (inline & external Angular templates)
Параметры templateUrl и styleUrls , заданные в декораторе, определяют путь к внешним файлам, содержащим шаблон.
Параметры template и style описывают встроенный шаблон (соответственно HTML и CSS ). Если необходимо использовать несколько строк для inline описаний, то вместо ограничителя строки - кавычка (')
используется ограничитель строки - backtick (`)
Например
template: '<h1>Inline HTML template</h1>',
Или:
import { Component} from '@angular/core';
@Component({
selector: 'app-my-first-component',
template: ` <h1>Inline HTML template</h1> <hr> <h2> Встроенный HTML шаблон из трёх строк</h2> `,
styles: ['h2 {color:red;}']
})
При использовании встроенного многострочного шаблона ограничитель строки - кавычка (') нужно заменить на другой символ - ` (backtick symbol слева сверху на клавиатуре)
Интерполяция строк (использование динамических данных)
(Angular string interpolation)
Свойства , заданные в описании класса компонента, могут быть вставлены в шаблон с использованием синтаксиса:
{{ИМЯ_СВОЙСТВА}}
Например, если в компоненте описано свойство title :
export class FirstComponent{ title = 'Первый тест'; }
То в шаблоне может быть использовано {{title}}:
template : '<H1>{{title}}</H1>',
Можно вставлять в шаблон свойства объекта (пример со встроенными - inline - стилями и шаблоном)
import { Component} from '@angular/core';
@Component({
selector: 'app-my-first-component',
template: ` <h1> Студент </h1> <h2> Имя: {{student.name}}</h2> <h2> Возраст: {{student.age}}</h2> <h2> Курс: {{student.course}}</h2>`,
styles: ['h2 {color:red;}']
})
export class MyFirstComponent {
// Описание класса
student = {
name: "Иванов",
age: 22,
course: "Angular"
} }
Подробнее - Angular components
Структурные директивы (Angular Structural Directives)
Структурные директивы отвечают за компоновку HTML - макета. Они формируют или изменяют структуру DOM, как правило, путем добавления, удаления или изменения элементов.
Директива ngFor
Можно в объекте описать массив данных, тогда в шаблон можно вставлять элементы массива или, например, с помощью оператора ngFor пробегать по всему массиву в цикле.
import { Component} from '@angular/core';
@Component({
selector: 'app-my-first-component',
template: ` <h1> Студент </h1> <h2> Имя: {{students[0].name}}</h2> <h2> Возраст: {{students[0].age}}</h2> <h2>
Курс: {{students[0].course}}</h2> `,
styles: ['h2 {color:red;}']
})
export class MyFirstComponent {
students = [
{ name: "Иванов", age: 21, course: "'Angular 2'" },
{ name: "Петров", age: 22, course: "'Angular 4'" },
{ name: "Сидоров", age: 23, course: "'Angular 5'" },
] }
Проход по массиву в цикле
import { Component} from '@angular/core';
@Component({
selector: 'app-my-first-component',
template: ` <h1> Студенты </h1> <ul> <li *ngFor="let item of students; let i = index"> {{i}} <b>{{students[i].name}}</b>
{{students[i].age}} {{students[i].course}} </li> </ul> `,
styles: ['h2 {color:red;}']
})
export class MyFirstComponent {
students = [
{ name: "Иванов", age: 21, course: "'Angular 2'" },
{ name: "Петров", age: 22, course: "'Angular 4'" },
{ name: "Сидоров", age: 23, course: "'Angular 5'" },
]
}
Подробнее - Angular directives