WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

hit counter

Наши преимущества

  • Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
  • Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
  • Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
  • Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.


Регистрация на сайте

Дополнительные материалы

Angular 6 framework

Обновлено: 18.06.2018 15:15

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 5 web-start.top

Структура компонента Angular

Компонет состоит из 3-х секций:

  1. директива - import
  2. декоратор
  3. директива 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 5 web-start.top

Шаблоны 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 5 web-start.top

Интерполяция строк (использование динамических данных)

(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'" }, ] }


Angular 5 web-start.top

Проход по массиву в цикле

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


Похожие статьи