Начало работы с Angular
Пришло время взглянуть на фреймворк от Google — Angular, еще один популярный вариант, с которым вы часто будете сталкиваться. В этой статье мы рассмотрим, что Angular может предложить, установим необходимые компоненты, запустим пример приложения, и разберём базовую архитектуру Angular.
| Необходимые условия: | Понимание основ HTML, CSS, и JavaScript, знание терминала/командной строки (en-US) . |
|---|---|
| Цель: | Настроить локальную среду разработки Angular, создать стартовое приложение, и понять основные принципы работы. |
Что такое Angular?
Angular — это платформа для разработки, написанная на TypeScript. Как платформа Angular включает:
- Основанный на компонентах фреймворк для создания масштабируемых веб-приложений
- Набор хорошо интегрированных библиотек, охватывающих широкий спектр функций: маршрутизация, управление формами, клиент-серверное взаимодействие и т.д.
- Набор инструментов разработчика, которые помогут вам разрабатывать, собирать, тестировать и обновлять ваш код
Когда вы создаете приложение с помощью Angular, вы пользуетесь преимуществами платформы, которая может масштабироваться от проекта, который разрабатывает один человек, до приложений корпоративного уровня. Angular разработан, чтобы максимально упростить обновление, поэтому вы можете использовать последние разработки с минимумом усилий. А самое замечательное то, что экосистема Angular состоит из огромного сообщества, включающего более чем 1.7 миллиона разработчиков, авторов библиотек и создателей контента.
Прежде, чем приступить к изучению платформы Angular, сначала стоит познакомиться с Angular CLI. Angular CLI — это быстрый, простой и рекомендуемый способ разработки Angular-приложений. Angular CLI облегчает выполнение ряда задач. Вот некоторые из них:
| ng build | Компилирует Angular-приложение в выходной каталог. |
|---|---|
| ng serve | Собирает и запускает ваше приложение, пересобирая его при изменении файлов. |
| ng generate | Генерирует или изменяет файлы на основе схематиков |
| ng test | Запускает модульные тесты для заданного проекта. |
| ng e2e | Собирает и запускает Angular-приложение, запуская затем сквозные тесты. |
Скоро вы сами убедитесь, что Angular CLI является полезным инструментом для создания ваших приложений.
Что вы создадите
Эта серия руководств проведёт вас через создание приложения со списком дел (to-do list). С помощью этого приложения вы узнаете, как использовать Angular для управления, редактирования, добавления, удаления и фильтрации элементов.
Необходимые условия
Чтобы установить Angular в вашей локальной системе, вам понадобится следующее:
- Node.js Angular требует текущую, последнюю LTS, или поддерживаемую LTS версию Node.js. Для получения информации о конкретных требованиях к версии смотрите ключ engines в package.json файле. Для получения дополнительной информации о установке Node.js смотрите nodejs.org. Если вы не знаете какая версия Node.js установлена в вашей системе, запустите node -v в терминале.
- пакетный менеджер npm Angular, Angular CLI, Angular приложения зависят от npm пакетов которые обеспечивают множество функций. Для загрузки и установки npm пакетов, вам необходим пакетный менеджер npm. Это руководство использует npm через интерфейс командной строки, который устанавливается с Node.js по умолчанию. Для того, чтобы узнать какая версия npm установлена, запустите npm -v в терминале.
Настройка приложения
Вы можете использовать Angular CLI, запуская команды в терминале для генерации, сборки, тестирования, и развертывания приложений на Angular. Для установки Angular CLI, запустите следующие команды в терминале:
-g @angular/cli
Команды Angular CLI начинаются с ng , за которым следует то, что вы хотите CLI сделал. В рабочей директории (например, Desktop) выполните команду ng new , чтобы создать новое приложение под названием todo :
new todo --routing=false --style=css
В текущей директории команда ng new создаст необходимое для работы маленькое Angular-приложение. Дополнительные флаги, —routing и —style , определяют, как обрабатывать навигацию и стили в приложении. В этом руководстве эти функции будут описаны позже.
Если вам будет предложено применить строгую проверку типов, вы можете ответить «yes».
Перейдите в ваш новый проект с помощью команды cd :
app.module.ts: определяет файлы, которые использует приложение. Этот файл действует как центральный узел для других файлов в вашем приложении.app.component.ts: Определяет класс, который содержит логику основной страницы приложения.app.component.html: Содержит HTML дляAppComponent. Содержимое этого файла также называется шаблоном. Шаблон определяет представление или то, что вы видите в браузере.app.component.css: Содержит стили дляAppComponent. Этот файл используется, когда вам нужно стилизовать определённый компонент, а не всё приложение.
Компонент называется ItemComponent , и имеет селектор app-item . Вы можете использовать этот селектор как и обычные HTML-теги, помещая его в другие шаблоны. Когда селектор находится в компоненте, браузер отображает шаблон этого компонента. Это руководство поможет вам создать два компонента и использовать один в другом.
Компонентная модель Angular предлагает надежную инкапсуляцию и интуитивно понятную структуру приложения. Компоненты также упрощают модульное тестирование вашего приложения и могут улучшить общую читаемость кода.
HTML-шаблоны
У каждого компонента есть HTML-шаблон, в котором определяется то, что этот компонент будет отображать. Шаблон можно задать либо строкой, либо как путь к файлу.
Для ссылки на внешний HTML-файл, используется свойство templateUrl :
Component( selector: "app-root", templateUrl: "./app.component.html", >) export class AppComponent >
Чтобы указать напрямую HTML-код, используется свойство template с обратными кавычками:
Component( selector: "app-root", template: `Hi!
`, >) export class AppComponent >
Angular расширяет HTML дополнительным синтаксисом, который позволяет вставлять динамические данные в компонент. Angular автоматически обновляет DOM, когда состояние компонента изменяется. Например, этот синтаксис можно применить для вставки динамического текста, как показано в следующем примере.
h1>>h1>
Двойные фигурные скобки говорят Angular, что содержимое внутри них нужно интерполировать. Значение для title берется из класса компонента:
import Component > from "@angular/core"; @Component( selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], >) export class AppComponent title = "To do application"; >
Когда приложение загружает компонент и его шаблон, браузер видит следующее:
h1>To do applicationh1>
Стили
Компонент может наследовать общие стили приложения из файла styles.css или переопределять их собственными стилями. Вы можете писать стили для конкретных компонентов прямо в декораторе @Component() или указывая путь к CSS-файлу.
Чтобы включить стили непосредственного в декоратор компонента, используется свойство styles :
Component( selector: 'app-root', templateUrl: './app.component.html', styles: ['h1 < color: red; >'] >)
Обычно компонент использует стили определяемые в отельном файле, указанном в свойстве styleUrls :
Component( selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] >)
С помощью стилей для конкретных компонентов вы можете организовывать свой CSS так, чтобы его было легко поддерживать и переносить.
Резюме
Это ваше первое знакомство с Angular. На этом этапе всё должно быть настроено и готово к созданию Angular-приложения, а у вас быть базовое представление о том, как работает Angular. В следующей статье мы углубим эти знания и начнем создавать структуру вашего приложения списка дел.
В это модуле
- Введение в клиентские фреймворки (en-US)
- Основные функции фреймворков (en-US)
- React
- Начало работы с React
- Начало создания приложения списка дел с React (en-US)
- Компоненты React приложения (en-US)
- Интерактивность React: события и состояние (en-US)
- Интерактивность React: редактирование, фильтрация, условная отрисовка (en-US)
- Доступность в React (en-US)
- Ресурсы по React (en-US)
- Начало работы с Ember (en-US)
- Структура Ember приложения и компоненты (en-US)
- Интерактивность Ember: события, классы и состояние (en-US)
- Интерактивность Ember: функциональность подвала, условная отрисовка (en-US)
- Маршрутизация в Ember (en-US)
- Ресурсы по Ember и устранение неполадок (en-US)
- Начало работы с Vue (en-US)
- Создание вашего первого компонента Vue (en-US)
- Отрисовка списка Vue компонентов (en-US)
- Добавление новой формы во Vue: события, методы, и модели (en-US)
- Стилизация Vue компонентов с CSS (en-US)
- Использование вычисляемых свойств во Vue (en-US)
- Условная отрисовка во Vue: Редактирование существующих дел (en-US)
- Управление фокусом во Vue с помощью refs (en-US)
- Ресурсы по Vue (en-US)
- Начало работы со Svelte (en-US)
- Начинаем приложение списка дел c использованием Svelte (en-US)
- Динамическое поведение в Svelte: работа с переменными и пропсами (en-US)
- Компоненты Svelte приложения (en-US)
- Продвинутый Svelte: реактивность, жизненный цикл, доступность (en-US)
- Работа хранилищами в Svelte (en-US)
- Поддержка TypeScript в Svelte (en-US)
- Развертывание и следующие шаги (en-US)
- Начало работы с Angular
- Начинаем приложение списка дел с использованием Angular
- Стилизация Angular приложения
- Создание компонента элемента (item component)
- Фильтрация списка дел
- Сборка Angular приложений и другие ресурсы
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Введение в Angular
Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.
Angular предоставляет такую функциональность, как двустороннее связывание, позволяющее динамически изменять данные в одном месте интерфейса при изменении данных модели в другом, шаблоны, маршрутизация и так далее.
Одной из ключевых особенностей Angular является то, что он использует в качестве языка программирования TypeScript. Поэтому перед началом работы рекомендуется ознакомиться с основами данного языка, про которые можно прочитать здесь.
Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.
Последняя версия Angular — Angular 17 вышла в ноябре 2023 года. Официальный репозиторий фреймворка на гитхабе: https://github.com/angular/angular. Там вы можете найти сами исходные файлы, а также некоторую дополнительную информацию.
Начало работы c Angular
Для работы с Angular необходимо установить сервер Node.js и пакетный менеджер npm , если они отсутствуют на рабочей машине. При этом особого какого-то знания для работы с NodeJS и npm не требуется. Для установки можно использовать программу установки node.js. Вместе с сервером она также установит и npm.
Следует учитывать, что Angular поддерживает те версии node.js, которые в текущий момент находятся в статусе «Active LTS» или «Maintenance LTS». На момент написания данной статьи это версии 18 и 20. Поэтому, если Node.js уже ранее был установлен, но имеет более старую или, наоборот новую, но еще не поддерживаемую версию, то лучше его обновить. Проверить совместимость версий node.js (а также версий typescript и библиотеки RxJS) для определенных версий Angular можно по адресу: https://angular.dev/reference/versions. Так, для последний на данный момент версии Angular 17 требования следующие:
- Версия Node.js должна быть либо 18 начиная с подверсии 18.13.0, либо 20 начиная с подверсии 20.9.0
- Версия TypeScript должна быть 4.9.3 и выше, но ниже 5.3.0 (нужная версия TypeScript устанавливается локально в проект)
То же самое касается и npm . Если версия слишком старая или, наоборот, одна из последних, то Angular может ее не поддерживать. При работе с Angular лучше полагаться на ту версию npm, которая устанавливается вместе с LTS-версией Node.js.
Установка Angular CLI
Для компиляции приложения мы будем использовать инфрастуктуру Angular CLI. Angular CLI упрощает создание приложения, его компиляцию. Angular CLI распространяется как пакет npm, поэтому для его использования его необходимо сначала установить. Для установки Angular CLI откроем консоль/командную строку и выполним в ней следующую команду:
npm install -g @angular/cli
Данная команда установит пакет @angular/cli в качестве глобального модуля, поэтому в последующем при создании новый проектов Angular его не потребуется устанавливать заново.
Ту же команду можно использовать для обновления Angluar CLI при выходе новой версии фреймворка. Проверить версию CLI можно в командной строке/консоли с помощью команды:
ng version
Если Angluar CLI уже был установлен, то можно его обновить с помощью команды:
ng update
При работе на Windows и выполнении команд в PowerShell вместо командной строки стоит учитывать, что по умолчанию выполнение скриптов в PowerShell отключено. Чтобы разрешить выполнение скриптов PowerShell (что требуется для npm), необходимо выполнить следующую команду:
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
После установки необходимых инструментов создадим простейшее приложение. Для этого определим на жестком диске папку проекта. Путь она будет называться helloapp .
Установка пакетов. Package.json
В выше созданной папке проекта создадим новый файл package.json со следующим содержимым:
< "name": "helloapp", "version": "1.0.0", "description": "First Angular 17 Project", "author": "Eugene Popov metanit.com", "scripts": < "ng": "ng", "start": "ng serve", "build": "ng build" >, "dependencies": < "@angular/common": "~17.0.0", "@angular/compiler": "~17.0.0", "@angular/core": "~17.0.0", "@angular/forms": "~17.0.0", "@angular/platform-browser": "~17.0.0", "@angular/platform-browser-dynamic": "~17.0.0", "@angular/router": "~17.0.0", "rxjs": "~7.8.0", "zone.js": "~0.14.2" >, "devDependencies": < "@angular-devkit/build-angular": "~17.0.0", "@angular/cli": "~17.0.0", "@angular/compiler-cli": "~17.0.0", "typescript": "~5.2.2" >>
Данный файл устанавливает пакеты и зависимости, которые будут использоваться проектом. В секции dependencies в основном определяются пакеты angular, которые необходимы приложению для работы. В секции devDependencies прописаны только те пакеты, которые будут использоваться для разработки. В частности, это пакеты для работы с языком typescript (так как мы будем писать код приложения на языке TypeScript), а также пакеты, необходимые для компиляции приложения с помощью инфраструктуры Angular CLI.
В секции «scripts» описаны используемые команды. В частности, команда ng serve запускает простенький веб-сервер для тестирования приложения и само приложение. А команда ng build компилирует приложение.
Затем откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd:
C:\WINDOWS\system32>cd C:\angular\helloapp
И затем выполним команду npm install , которая установит все необходимые модули:
C:\angular\helloapp>npm install added 923 packages, and audited 924 packages in 1m 115 packages are looking for funding run `npm fund` for details found 0 vulnerabilities C:\angular\helloapp>
После выполнения этой команды в папке проекта должна появиться подпапка node_modules , которая содержит все используемые зависимости и пакеты.
Определение приложения
Затем создадим в папке проекта подпапку, которую назовем src — она будет содержать все исходные файлы. И далее в папке src создадим подкаталог app .
Создание компонента Angular
Компоненты представляют основные строительные блоки приложения Angular. Каждое приложение Angular имеет как минимум один компонент. Поэтому создадим в папке src/app новый файл, который назовем app.component.ts и в котором определим следующий код компонента:
import < Component >from «@angular/core»; import from «@angular/forms»; @Component(< selector: "my-app", standalone: true, imports: [FormsModule], template: `
Добро пожаловать >!
` >) export class AppComponent
В начале файла определяется директива import , которая импортирует функциональность модуля angular/core , предоставляя доступ к функции декоратора @Component . И также импортируем модуль FormsModule, который понадобится для работы с полями ввода.
Далее собственно идет функция-декоратор @Component , которая ассоциирует метаданные с классом компонента AppComponent. В эту функцию передается конфигурационных объект с рядом параметров:
- параметр selector определяет селектор css для HTML-элемента, который будет представлять компонент. В данном случае это селектор «my-app». То есть на веб-странице приложения должен быть элемент «», и в этот элемент будет загружаться приложение Angular
- параметр standalone: true указывает, что компонент будет независимым, то есть для него не нужно создавать дополнительных модулей, что уменьшает и упрощает код приложения
- параметр imports импортирует в компонент другие модули. Сторонние модули могут содержать различный функционал, который мы можем использовать. Например, в нашем случае мы будем использовать поле ввода, куда пользователь будет вводить имя. И для работы с этим полем ввода импортируем в компонент модуль FormsModule.
- параметр template представляет шаблон или визуальную часть компонента — то, что мы собственно увидим в браузере. В частности, в шаблоне определено поле ввода, куда пользователь будет вводить имя. А в заголовке h1 будет выводиться введенное значение. Для связи поля ввода и заголовка применяется двусторонняя привязка поля с помощью выражений [(ngModel)]=»name» и > к некоторой модели name.
И в конце собственно экспортируется класс компонента AppComponent, в котором как раз определяется переменная name — в данном случае это пустая строка.
Запуск приложения
Теперь нам надо указать Angular, как запускать наше приложение. Для этого создадим в папке src (на уровень выше, чем расположен файл «app.component.ts») файл main.ts со следующим содержимым:
import < bootstrapApplication >from "@angular/platform-browser"; import < AppComponent >from "./app/app.component"; bootstrapApplication(AppComponent).catch(e => console.error(e));
Этот код запускает приложение в виде ранее определенного компонента AppComponent. При возникновении ошибок они выводятся на консоль.
Создание главной страницы
Далее определим в папке src главную страницу index.html приложения:
METANIT.COM Загрузка. А в элементе body определен элемент , в который собственно и будет загружаться приложение.
Определение конфигурации
Поскольку для определения кода приложения применяется язык TypeScript, поэтому также создадим в корневой папке проекта новый файл tsconfig.json :
< "compileOnSave": false, "compilerOptions": < "baseUrl": "./", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "ES2022", "moduleResolution": "node", "target": "ES2022", "typeRoots": [ "node_modules/@types" ], "lib": [ "ES2022", "dom" ] >, "files": [ "src/main.ts" ], "include": [ "src/**/*.d.ts"] >
Данный файл определяет настройки для компилятора TypeScript. Опция «compilerOptions» устанавливает параметры компиляции. А опция «files» определяет компилируемые файлы. В нашем случае это файл приложения — main.ts, который подтягивает все остальные файлы приложения.
Angular.json
Для компиляции приложения мы будем использовать Angular CLI, поэтому нам надо описать поведение CLI с помощью файла angular.json. Итак, добавим в корневую папку проекта новый файл angular.json и определим в нем следующее содержимое:
< "version": 1, "projects": < "helloapp": < "projectType": "application", "root": "", "sourceRoot": "src", "architect": < "build": < "builder": "@angular-devkit/build-angular:browser", "options": < "outputPath": "dist/helloapp", "index": "src/index.html", "main": "src/main.ts", "polyfills": ["zone.js"], "tsConfig": "tsconfig.json", "aot": true >>, "serve": < "builder": "@angular-devkit/build-angular:dev-server", "options": < "buildTarget": "helloapp:build" >> > > > >
Вкратце пройдемся по структуре файле. Вначале определяется параметр version . Он определяет версию конфигурации проекта.
Далее идет секция projects , которая определяет настройки для каждого проекта. В нашем случае у нас только один проект, который называется по названию каталога проекта — helloapp.
Проект определяет следующие опции:
- projectType : тип проекта. Значение «application» указывает, что проект будет представлять приложение, которое можно будет запускать в браузере
- root : указывает на папку файлов проекта относительно рабочей среды. Пустое значение соответствует корневой папке проекта, так как в данном случае рабочая среда и каталог проекта совпадают
- sourceRoot : определяет корневую папку файлов с исходным кодом. В нашем случае это папка src, где собственно определены все файлы приложения
- architect : задает настройки для построения проекта. В файле package.json определены команды build и serve , и для каждой из этих команд в секции architect заданы свои настройки. Для каждой команды задается параметр builder , который определяет инструмент для построения проекта. Так, для команды «build» задано значение «@angular-devkit/build-angular:browser» — данный билдер для построения использует сборщик пакетов webpack. А для команды «serve» задано значение «@angular-devkit/build-angular:dev-server» — данный билдер запускает веб-сервер и развертывает на нем скомпилированное приложение.
Параметр options задает параметры построения файлов. Для команды «build» здесь определены следующие опции:
- outputPath : путь, по которому будет публиковаться скомпилированное приложение
- index : путь к главной странице приложения
- main : путь к главному файлу приложения, где собственно запускается приложение Angular
- polyfills : путь к файлам полифилов, в качестке которого выступает «zone.js»
- tsConfig : путь к файлу конфигурации TypeScript
- aot : указывает, будет ли использоваться компиляция AOT (Ahead-Of-Time) (предварительная компиляция перед выполнением). В данном случае значение true означает, что она используется
Для команды «serve» указана только одна опцияя — buildTarget , которая содержит ссылку на конфигурацию для команды build — «helloapp:build». То есть по сути эта команда использует ту же конфигурацию, что и команда build.
Если мы используем TypeScript для работы с Angular и Angular CLI для компиляции, то эти файлы package.json, tsconfig.json и angular.json фактически будут присутствовать в каждом проекте. И их можно переносить из проекта в проект с минимальными изменениями. Например, в файле angular.json вместо названия проекта «helloapp» будет соответствующее название проекта. В файле package.json можно будет задать какие-то другие версии пакетов, если предыдущие версии устарели. Можно будет изменить название проекта, версию. Можно подправить настройки TypeScript или Angular CLI, но в целом общая организация будет той же.
В итоге у нас получится следующая структура проекта:
Запуск проекта
И теперь, когда все готово, мы можем запустить проект. Для этого в командной строке (терминале) перейдем к папке проекта с помощью команды cd и затем выполним команду ng serve :
C:\WINDOWS\system32>cd C:\angular\helloapp C:\angular\helloapp>ng serve --open
Консольный вывод проинформирует нас, какие файлы какого размера созданы. Кроме того, мы сможем увидеть адрес, по которому запущен тестовый веб-сервер — по умолчанию это «http://localhost:4200/». Если мы передаем команде флаг —open , как в случае выше, то Angular CLI автоматически открывае браузер с запущенным приложением. И мы можем обратиться к приложению:
Введем в текстовое поле какое-нибудь имя, и оно тут же отобразится в заголовке.
Важно отметить, что пока приложение запущено, мы можем поменять код, и Angular CLI почти моментально перекомпилирует и перезапустит приложение.
Angular 2: что это такое и какие у его преимущества
Всем привет! Сегодня мы начнем разбирать фреймворк от известной компании Google — Angular 2.
Что такое Angular 2
Это фреймворк, основной целью которого является создание одностраничных браузерных приложений или по другому Single Page Application (SPA). Многие фичи были взяты из AngularJs ( первая версия ).
Вот какие отличительные достоинства имеет ангулар 2:
- Высокая производительность — быстрая скорость работы в сравнении с предыдущей версией ( AngularJs ).
- Низкий порог вхождения — не требуется каких-то больших познаний в программировании до непосредственного изучения фреймворка.
- Популярность — в интернете есть большой кладезь информации посвященный этому языку: на официальном сайте, на форумах, на различных сайтах посвященных программированию. В основном это иностранные сайты.
- Помощь — для каждой вводимой функции или при обнаружении неправильного синтаксиса будет выведена подсказка.
Недостатком является малое количество документации именно для русскоязычной аудитории, преимущественно это связано из-за недавнего релиза во всемирную паутину.
Для работы с Angular 2 используются:
Основным из этих трех значится TypeScript, который является препроцессором JavaScript. Это значит, что после компиляции файла весь код будет переведен на JavaScript. Поэтому ваша программа будет работать на любом современном браузере.
- Chrome: с первой версии
- FireFox: с первой версии
- Edge: с версии выше 13
- Internet Explorer: с версии выше 9
- Safari: с версии выше 7
- IOS: с версии выше 7
- Android: с версии выше 4.1
- Internt Explorer Mobile: с версии выше 11
Каким образом он будет переводится поговорим позже.
Возможности Angular 2
В ангулар 2 большое количество фич, которые стоит разобрать. Сейчас мы пройдемся по основным из них.
- Модульная система — это свойство отделение определенного функционала приложения в отдельные файлы (напоминает объектно-ориентированное-программирование).
- Компоненты — с помощью их отображается содержимого html, css на экран браузера.
- Метаданные — руководят правильным отображениям компонентов и их классов.
- Анимация — компоненты работающие с интерфейсом по средством анимации.
- Формы — компонент работающий с вводимыми формами. Что произайдет после клика по кнопке, после удаление всех символов с формы, за это все отвечает этот компонент.
- Сервисы — компоненты которые внедряют (несут) логику во взаимодействие с приложением.
- Роутер — компонент, который обеспечивает загрузку компонентов из другого компонента. Можно реализовать загрузку содержимого без перезагрузки самой страницы. Например, вы отправили форму, или перешли по ссылке. Такая загрузка реализована на официальном сайте.
- Директивы — помогают улучшить взаимодействие с работой интерфейса.
- Работа с сервером — взаимодействие с сервером.
Обо всем этом и многом другом будут сделаны отдельные уроки.
Если у вас имеются идеи по поводу создания новых статей, то пишите в комментарии.
Читайте также
Мы рассмотрим создание программы, ее структуру, а также главные правила синтаксиса языка C++.
Бинарный поиск в C++В этом уроке вы узнаете, что такое бинарный поиск, как он работает в массиве. Также мы покажем как его можно оптимизировать изменив всего лишь условие цикла.
Уроки по Opencart
Что это ? Как с ним работать ? Как его установить ? — на все эти вопросы вы найдете ответы в этой статье. Быстрей успей сделать свой интернет магазин.
Динамические массивы и переменные в C++
Как пользоваться динамическими переменными и массивами в C++. Мы разберем как их создать и узнаем их плюсы перед использованием обычных массивов.
Указатели в C++
В этом уроке мы разберем, как создать и использовать указатели в C++. Вы узнаете, что такое адрес переменой, как удалять переменную и узнаете что это * и это &.
Функции в C++
Привет! В этой статье мы разберем, как создавать функции в C++. Также мы познакомим вас с прототипами функций, перегрузкой функций и как вызывать функции.
map::count в C++
C++ предлагает множество функций для работы с контейнерами. Одна из таких функций, count, позволяет узнать, существует ли ключ в std::map. В этой статье вы узнаете, когда она может вам пригодится.
Цикл for в Python
Цикл for в Python незаменим при работе с коллекциями любого типа. Он позволяет пройтись по списку, строке, словарю. Мы разберем много примеров в этой статье.
Переменные в Python
В данном уроке пойдет речь об очень важной части языка Python: переменных. Мы рассмотрим объявление переменных, их области видимости и правила именования.
strlen в C/C++
Функция strlen используется в языке программирования C для подсчета количества символов в строке. В статье будут разобраны примеры использования этой функции. Также мы реализуем эту функцию сами, а в конце статьи есть упражнения для закрепления материала.
strcat в C/C++
Функция strcat используется в языках C и C++ для соединения (конкатенации) строк. В статье будут разобраны примеры использования этой функции. Также в конце статьи есть упражнения.
vector::insert в C++
В C++, структура данных vector предоставляет механизм, похожий на динамический массив. Одной из его многих функций является vector::insert, позволяющая добавлять элементы на любую позицию в векторе. В этой статье мы подробно рассмотрим применение и особенности этой функции.
vector::push_back в C++
Язык C++ предоставляе