Всім привіт! Друзі, 14 січня 2024 року освітньому проєкту ITVDN виповнюється 10 років! Це визначна подія для великої кількості людей, які брали участь у проєкті у якості авторів, партнерів та наших студентів. Ми хочемо відсвяткувати цю подію разом із вами, а тому оголошуємо великий розіграш подарункових сертифікатів на всі наші пакети підписки! 12 січня о 16:00 ми розіграємо подарункові сертифікати на: 3 пакети підписки “Стартовий”; 2 пакети підписки “Базовий”; 1 пакет підписки “Преміум”; по 1 пакету підписки на 16 ІТ-спеціальностей: Python розробник; C# / .NET розробник; ASP.NET Core розробник; ASP.NET MVC розробник; Unity / Game розробник; Верстальник сайтів; FrontEnd розробник; JavaScript розробник; Angular розробник; React розробник; Java розробник; Android розробник; PHP розробник; Ruby розробник; C++ розробник; QA (Quality Assurance). Таким чином, у нас буде 22 переможці! Настільки масштабний розіграш ми влаштовуємо вперше! Подарункові сертифікати дозволяють вам почати навчання будь-коли протягом 12 місяців з моменту отримання сертифікату. Заявки на участь приймаються до 12:00 12 січня. Як взяти участь? Потрібно: Бути зареєстрованим користувачем ITVDN. Зробити пост в одній із соціальних мереж (Facebook, LinkedIn, X (Twitter), Instagram чи TikTok) з посиланням на будь-який відео курс, статтю, вебінар чи акцію ITVDN, а також написати кілька слів від себе. Переконайтеся, що ваша сторінка відкрита, аби ми могли перевірити умови виконання цього пункту. Заповнити форму учасника розіграшу. Що отримають переможці Доступ до всіх відео курсів (“Базовий”, “Стартовий”, “Преміум”) або до спеціалізованих (16 ІТ-спеціальностей) на визначений кожним пакетом термін Вихідний код навчальних проєктів Презентації, опорний конспект, д/з Перевірка домашніх завдань Консультації з тренером Доступ до інтерактивних практикумів Онлайн тестування та сертифікати Доступ до нових курсів, які виходитимуть під час дії підписки Досягнення, нагороди і статуси Наша мета – бути найбільшою в Україні платформою IT-освіти з усіх напрямків, для фахівців різного рівня. Формат навчання – відео курси – є особливо актуальним, зручним, доступним і якісним в умовах війни. І ми активно працюємо над створенням нових курсів для українців. Наші нагороди, статуси та досягнення за 10 років: 2100 навчальних відео і 224 000+ підписників на YouTube-каналі ITVDN; 55 000+ українців стали учасниками програми Free 4 Ukraine; 178 відео і 25 000+ підписників на YouTube-каналі CodeUA, який створено у 2022 році спільно з CyberBionic Systematics; 1245+ позитивних відгуків в Google, DOU та Facebook; 250+ відео курсів в Каталозі ITVDN; Нагорода Ukraine IT Awards 2015 – за професіоналізм у IT-навчанні; Нагорода IT Education Awards 2015 – найкращий проект у номінації Online Education; Постійний статус партнера Microsoft у сфері IT-освіти; Учасник Асоціації “IT Ukraine”. Дякуємо всім, хто користується нашим ресурсом. Слідкуйте за оновленнями на ITVDN!   UPD від 12.01.2024 Переможці: 3 пакети підписки “Стартовий”:  Протасова Вікторія  Сазонов Андрій Лебідь Ігор 2 пакети підписки “Базовий”: Podlas Dmytro Довгий Дмитро 1 пакет підписки “Преміум” - Зятковський Богдан 16 пакетів підписки з ІТ-спеціальностей: Android розробник - Куречко Сергій  Angular розробник - Кравченко Максим Валерійович ASP.NET Core розробник - Мельнікова Інна ASP.NET MVC розробник - Tolstova Anna  C# / .NET розробник - Ульянович Олександр C++ розробник - Zavizion Matvii  FrontEnd розробник - Луценко Віктор Java розробник - Бігарі Василь JavaScript розробник - Кунникова Катерина PHP розробник - Єрмаков Андрій Python розробник - Смирнов Артур QA (Quality Assurance) - Попрядухін Євгеній React розробник - Сергій Руденко Unity / Game розробник - Титух Володимир Верстальник сайтів - Карпова Юлія Ruby розробник - не було заявок Запис розіграшу: https://www.youtube.com/watch?v=R8NQu5yTFDI

Моя идея состояла в том, чтобы построить простой репликабельный проект на Angular с бэкэндом на Django. Я искал и не смог найти нужных решений, пришлось во всем разбираться самому. В итоге я разобрался и решил сам написать гайд для всех, кого может заинтересовать данная проблема.  Данная статья поможет вам построить простое приложение Angular с бэкэндом на Django, организованного с помощью Webpack. Проблема Я хочу настроить проект на Angular 1.1.x и скормить ему данные с сервера Django. Мне бы хотелось использовать Django REST Framework (DRF), чтобы пострить RESTful API. Я также хочу сбандлить JS ассеты. Сейчас я собираюсь запустить сайт на одном сервере. Предварительные требования Python 2.x Django 1.9.x npm 2.15.8+ Webpack 1.13.x (sudo npm i -g webpack) ESLint 2.13.1+ (sudo npm i -g eslint) NodeJS 4.4.7+ Содержание Скаффолдинг проекта. Создайте свои начальные директории. Скаффолдинг проекта на Django. Настрока переменных среды, нужных для запуска сервера Django. Установка Django REST Framework и настройка Django с использованием переменных среды. Создание API. Запуск Django сервера с использованием dev settings. Инициализация npm-пакета и установка front-end JS зависимостей. Создание Angular entry-point и загрузка начальных зависимостей. Настройка Webpack'а. Дайте команду Django загрузить приложение. Создайте шаблон базы приложения Angular. Напишите компонент home. Напишите Angular роуты, ведущие к вашему компоненту home и странице 404. Добавьте директивы ангуляр-маршрутизатора к шаблону входной точки приложения. Проверьте ваше REST API в приложении Angular.  Шпаргалка. Итак, начнем! 0. Настройте среду для Python. mkvirtualenv mysite 1. Скаффолдинг проекта на Django. Создайте начальные директории. Мы хотим сфокусироваться на модулярности в ходе разработки. Следовательно, существует множество директорий в конечном итоге использования. Мы хотим, чтобы наше дерево изначально выглядело так: mysite ├── backend │ ├── docs │ ├── requirements └── frontend ├── app │ ├── components │ └── shared ├── assets │ ├── css │ ├── img │ ├── js │ └── libs ├── config ├── dist └── js  Сделайте следующее: mkdir mysite && cd mysite mkdir -p backend/docs/ backend/requirements/ \ frontend/app/shared/ \ frontend/app/components/ \ frontend/config \ frontend/assets/img/ frontend/assets/css/ \ frontend/assets/js/ frontend/assets/libs/ \ frontend/dist/js/  *Примечание: Структура этого проекта была навеяна опытом с несколькими другими проектами. Я считаю эту организацию идеальной, но вам не обязательно ей следовать. Но, пока вы читаете этот гайд, вы должны придерживаться этой структуры. 2. Скаффолдинг проекта на Django. В директории backend/ создайте Django проект: python django-admin.py startproject mysite  Также создайте requirements.txt: pip freeze > requirements/requirements.txt В директории (вашего проекта) backend/mysite/ произведите скаффолдинг директории, той, где будет жить ваше API: mkdir -p applications/api/v1/ touch applications/__init__.py applications/api/__init__.py \ applications/api/v1/__init__.py applications/api/v1/routes.py \ applications/api/v1/serializers.py applications/api/v1/viewsets.py Теперь создайте структуру директории настроек: mkdir -p configlord/settings/ touch configlord/settings/__init__.py \ configlord/settings/base.py configlord/settings/dev.py configlord/settings/prod.py \ configlord/dev.env configlord/prod.en 3. Настройте переменные окружения, которые нужны для запуска сервера Django. На этом этапе я предпочитаю пользоваться django-environ для работы с переменными окружения. Существует множество способов сделать это, но пакет django-environ чрезвычайно упрощает этот процесс, поэтому я использую его во всех своих проектах. Установите django-environ: pip install django-environ  В mysite/dev.env добавьте следующее: DATABASE_URL=sqlite:///mysite.db DEBUG=True FRONTEND_ROOT=path/to/mysite/frontend/ SECRET_KEY=_some_secret_key Мы собираемся использовать эти переменные среды в наших настройках. Выгода от использования наших переменных окружения в отдельных файлах состоит в основном в том, что такая настройка позволяет облегчить переключение между средами. В нашем случае файл the dev.env является списком переменных, которые мы бы использовали в локальной среде разработки. *Примечание: SECRET_KEY можно взять из settings.py, который был сгенерирован django-admin.py startproject. 4. Установите Django REST Framework и настройте Django, используя переменные среды. Установка DRF: pip install djangorestframework Наполните settings/base.py  следующим: Укажите, где искать переменные окружения. import environ project_root = environ.Path(__file__) - 3 env = environ.Env(DEBUG=(bool, False),) CURRENT_ENV = 'dev' # 'dev' is the default environment # read the .env file associated with the settings that're loaded env.read_env('./mysite/{}.env'.format(CURRENT_ENV)) Установите базу данных. В данном случае мы собираемся использовать встроенные в django-environ настройки SQLite. DATABASES = { 'default': env.db() } Установите SECRET_KEY ,а также debug. SECRET_KEY = env('SECRET_KEY') DEBUG = env('DEBUG') Добавьте DRF в пул приложений, которые Django должен использовать. # Application definition INSTALLED_APPS = [ ... # Django Packages 'rest_framework', ] Ссылки будут «жить» в специальном URL модуле, созданном с помощью базы проекта. ROOT_URLCONF = 'mysite.urls' Укажите Django, где искать все шаблоны и другие статические ассеты. STATIC_URL = '/static/' STATICFILES_FINDERS = [ 'django.contrib.staticfiles.finders.FileSystemFinder', 'django.contrib.staticfiles.finders.AppDirectoriesFinder', ] STATICFILES_DIRS = [ env('FRONTEND_ROOT') ] TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [env('FRONTEND_ROOT')], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] В соответствии с настройкой TEMPLATES Django должен будет искать шаблоны внутри frontend/ directory. Это то, где Angular приложение будет жить. Мы используем только Django, чтобы обслужить шаблон, внутри которого Angular приложение будет загружаться, которое будет выполнено через entry-point директиву. Если вы не знаете, о чем я, продолжайте чтение...  Наполните settings/dev.py: from mysite.settings.base import * CURRENT_ENV = 'dev' Здесь мы указываем, что этот файл настроек унаследывает настройки из base.py и переопределяет строку CURRENT_ENV, найденную в base.py. Мы говорим: «Используй это значение вместо значения, найденного в наследуемом модуле». 5. Создайте API. Нам нужно нечто, с помощью чего мы сможем протестировать службы Angular, поэтому давайте создадим небольшое API. Этот шаг можно пропустить, но я не советовал бы делать этого. Нам важно знание того, что настройки приложения Angular работают исключительно с точки зрения его потенциала, чтобы облегчить HTTP запросы. Сгенерируйте приложение. manage.py startapp games Создайте модель в games/models.py. class Game(models.model): title = models.CharField(max_length=255) description = models.CharField(max_length=750) Создайте DRF сериализатор для модели игры в  applications/api/v1/serializers.py. from rest_framework.serializers import ModelSerializer from applications.games.models import Game class GameSerializer(ModelSerializer): class Meta: model = Game Создайте  DRF viewset для модели в приложениях applications/api/v1/viewsets.py. from rest_framework import viewsets from applications.games.models import Game from applications.api.v1.serializers import GameSerializer class GameViewSet(viewsets.ModelViewSet): queryset = Game.objects.all() serializer_class = GameSerializer В applications/api/v1/routes.py зарегистрируйте роуты, используя DRF's router registration features. from rest_framework import routers from applications.api.v1.viewsets import GameViewSet api_router = routers.SimpleRouter() api_router.register('games', GameViewSet) Обозначьте ссылки для зарегистрированного DRF роута внутри mysite/urls.py: from django.contrib import admin from django.conf.urls import include, url from applications.api.v1.routes import api_router urlpatterns = [ url(r'^admin/', admin.site.urls), # API:V1 url(r'^api/v1/', include(api_router.urls)), ] 6. Запустите сервер Django, используя dev settings. manage.py runserver --DJANGO_SETTINGS_MODULE=mysite.settings.dev Впуская DJANGO_SETTINGS_MODULE в runserver, мы «говорим» - работать используя специфические параметры. Если все работает, у вас появится возможность открыть localhost:8000/api/v1/games и увидеть ответ от DRF. Если все работает – самое время заняться построением приложения Angular. Если нет – направьте автору проблему. Если вы застряли на этом этапе – оставьте комментарий автору под оригиналом публикации. 7. Инициализируйте npm-пакет и установите front-end JS зависимости. Приложение Angular не будет работать так, как мы хотим, если правильные зависимости не будут установленны. Самое время установить базовые пакеты, которые понадобятся. Инициализируйте npm-пакет. Прямо из  frontend/ запустите npm init --yes By passing the --yes flag into init, you're telling NPM to generate a package.json using NPM defaults. Otherwise, if you don't pass that in, you'll have to answer questions... Boring. Установите dev dependencies.  npm install --save-dev eslint eslint-loader Установите общие зависимости. npm install --save eslint eslint-loader angular angular-resource angular-route json-loader mustache-loader lodash Файл package.json file во frontend/ должен выглядеть приблизительно следующим образом: { "name": "my-app", "version": "0.0.1", "description": "This is my first angular app.", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "eslint": "^3.1.1", "eslint-loader": "^1.4.1" }, "dependencies": { "angular": "^1.5.8", "angular-resource": "^1.5.8", "angular-route": "^1.5.8", "eslint": "^3.1.1", "eslint-loader": "^1.4.1", "json-loader": "^0.5.4", "lodash": "^4.13.1", "mustache-loader": "^0.3.1" } } Здесь то, что мы только что установили: eslint – отличный линтер, благодаря которому код JavaScript будет в порядке (последователен). eslint-loader – для запуска eslint через Webpack. Чуть позже я объясню концепцию «загрузчиков». angular -  MVC фреймворк. Если  вы не знали об этом, стоит подумать о том, чтобы закрыть эту страничку прямо сейчас. angular-resource -  (Angular) HTTP библиотека выбора. Это абстракция $http. json-loader - загрузчик (снова, используемый Webpack) для распаковки JSON из .json файлов с помощью require() во время работы нашего приложения. mustache-loader – загрузчик, который мы будем использовать, чтобы парсить наши mustache шаблоны. Mustache шаблоны – это веселье. Я могу спокойно предположить, что вы не знаете, как все эти пакеты заиграют вместе.  Не переживайте, братишки. 8. Создайте entry-point в Angular, объявите начальные зависимости, объявите первоначальные глобальные переменные. В frontend/app/app.js добавьте следующее: /* Libs */ require("angular/angular"); require("angular-route/angular-route"); require("angular-resource/angular-resource"); /* Globals */ _ = require("lodash"); _urlPrefixes = { API: "api/v1/", TEMPLATES: "static/app/" }; /* Components */ /* App Dependencies */ angular.module("myApp", [ "ngResource", "ngRoute", ]); /* Config Vars */ // @TODO in Step 13. /* App Config */ angular.module("myApp").config(routesConfig); app.js это то, где Webpack будет искать модули, чтобы бандлить их вместе. Лично я ценю такую организацию и методику вызовов, но такой порядок не обязателен. Существует 6 секций: Libs – главные библиотеки, используемые на протяжении работы Angular приложения; Globals – зарезервированные глобальные переменные, которые мы можем использовать во время работы приложения; Components (Компоненты) – особенные модули проекта; App Dependencies (Зависимости приложения) – объявление входной точки приложения и его зависимостей; Config Vars – переменные, где хранятся настройки, такие как route config; App Config - вводит configs (настройки) в приложение, используя сохраненные из предыдущей секции. Для того, чтобы globals работали, вам следует указать ESLint на то, какие из переменных - глобальные. В config/eslint.json добавляем следующее: { "env": { "node": true }, "extends": "eslint:recommended", "rules": { "indent": [ "error", 2 ], "linebreak-style": [ "error", "unix" ], "quotes": [ "error", "double" ], "semi": [ "error", "always" ], "no-console": 0 }, "globals": { "_": true, "_urlPrefixes": true, "angular": true, "inject": true, "window": true }, "colors": true } Ниже несколько переменных, о которых мы предупредили ESLint: _ представить lodash. _urlPrefixes – объект, который мы будем использовать в приложении для гиперссылок. Я расскажу об этом позже. angular, чтобы представить AngularJS object driving our entire application. inject, который будет использоваться для ввода зависимостей Angular. window, которая просто представляет объекты окон в JavaScript, является представителем  DOM. 9. Настройка Webpack. Теперь, когда мы выложили большинство наших зависимостей приложения, мы можем построить config file для Webpack. Webpack будет консолидировать все зависимости, а также модули для приложений, которые мы создаем в один файл. В bundle. В frontend/webpack.config.js добавляем следующее. module.exports = { entry: "./app/app.js", output: { path: "./dist/js/", filename: "bundle.js", sourceMapFilename: "bundle.js.map", }, watch: true, // eslint config eslint: { configFile: './config/eslint.json' }, module: { preLoaders: [{ test: /\.js$/, exclude: /node_modules/, loader: "eslint-loader" }], loaders: [ { test: /\.css$/, loader: "style!css" }, { test: /\.html$/, loader: "mustache-loader" }, { test: /\.json$/, loader: "json-loader" }] }, resolve: { extensions: ['', '.js'] } }; Для того, чтобы Webpack бандлил все наши статические зависимости, нам нужно указать ему, где их брать, какие зависимости обрабатывать и как управлять ими до банлинга. Давайте посмотрим на то, что указывает Webpack с помощью webpack.config.js: Entry - это путь к тому, что Webpack'у нужно для старта бандлинга. Это можеть быть полный путь или путь, относительный тому, где webpack.config.js располагается. В данном случае мы говорим о последнем варианте. output -  это объект, содержащий в себе path, который является директорией, в которую связанные зависимости будут помещаться; filename - это название бандла; и, в данном случае, мы решили использовать sourceMapFilename, чтобы обозначить, что наша() source map будет вызван(а). watch указывает Webpack следить за изменениями в файле, пока он выполняется. Если это не настроено как true, Webpack прогонит процесс бандлинга единожды и остановится. eslint содержит в себе специфические ESLint настройки, используемые eslint-loader. module указывает Webpack'у, что делать с модулями, с которыми он работает. module.preLoaders «говорит», что делать перед бандлингом. В данном случае мы хотим запустить модули (исключив модули установленные npm) через eslint. module.loaders - это то, где указана последовательность загрузчика. В нашем случае мы просто настраиваем test и loader,  где test указывает Webpack’у, какие модули запускать в загрузчике (по соответствию с паттерном regex), и loader говорит Webpack’y, какой загрузчик использовать в модулях, которые соответствуют regex паттерну в test. Каждый загрузчик указан в строке и разделен восклицательным знаком. Ex:  loader!another_loader!yet_another_loader module.preLoaders указывает, какие preLoaders'у запускать модули. Используемые настройки такие же точно, какие мы использовали в module.loaders. Но, Грег, какая  разница между preLoaders и loaders? Я рад, что ты спросил, мой дорогой друг!! A loader указывает Webpack'у, как бандлить требуемые файлы. Loader смотрит на модуль и говорт: «Эй, так как вы упаковываете это в один файл как строку – это то, как оно должно быть преобразованно для bundle'а». A preLoader обрабатывает код перед loaders, например, чтобы слинтить JavaScript модули. A postLoader является плагином Webpack'а, который обрабатывает код после бандинга. Мы не специфицировали ни один  postLoader ради простоты. 10. Укажите Django загрузить приложение. Прямо сейчас все, что нужно сделать – указать Webpack’у что создавать, как создавать и что должно быть создано. (На данном этапе я бы очень удивился, если вы попробуете запустить его и он заработает без ошибок. Если так и есть, я чертов мужик.) Так как Django использует свой собственный URL процессор в нашем приложении, мы можем быть рады тому, как любезно Django управляет всем тем, что введено в строку браузера пользователя. Как бы то ни было, мы бандлим одностраничное приложение, используя абсолютно другой фреймворк, и хотим, чтобы у приложения был полный контроль над тем, что пользователь вводит. Все, что нам нужно  – обслуживать одну страничку, в которой работает SPA. Следовательно... В backend/mysite/mysite/urls.py добавляем в список urlpatterns следующее: # Web App Entry url(r'^$', TemplateView.as_view(template_name="app/index.html"), name='index'), Это значит, что когда пользователь открывает mysite.com/, env('FRONTEND_ROOT') + app/index.html будет находить STATICFILES_FINDERS  в порядке рендера HTML шаблона. 11. Создайте шаблон базы приложения Angular. frontend/app/components/app/index.html шаблон должен выглядеть как обычный шаблон Django. В frontend/app/index.html добавляем следующее: {% load staticfiles %} <html ng-app="myApp"> <head> <title>My Sitetitle> <script src="{% static 'dist/js/bundle.js' %}">script> head> <body> body> html> В таком случае вам удастся запустить Webpack. Если вы запустите Django сервер и откроете localhost:8000,вы увидите пустую страничку. Если нет – дайте знать автору. 12. Напишите home component. Давайте напишем наш первый компонент. Он отобразит текст на страничке, пока пользователь открывает localhost:8000. Создайте директорию для компонента и базовые файлы. В frontend/app/components/: mkdir home && touch home/home-controller.js home/home.js home/home.html В frontend/app/components/home/home.html добавляем следующее: <div ng-controller="HomeController as ctrl"> <div> <h1>Home!h1> div> div> Теперь добавим следующее в  frontend/app/components/home/home-controller.js: function HomeController() { var that = this; that.foo = "Foo!"; console.log(that); // should print out the controller object } angular.module("Home") .controller("HomeController", [ HomeController ]) Определение модуля Angular должно быть объявлено в home.js: angular.module("Home", []); require("./home-controller"); Теперь мы можем сослаться на "Home" в области зависимости определения модуля. Давайте сделаем это! В app/app.js добавьте следующее: /* Components */ require("./components/home/home"); /* App Dependencies */ angular.module("myApp", [ "Home", // this is our component "ngResource", "ngRoute" ]); 13. Пропишите пути Angular'а, ведущие к home component и страничке 404. Нам нужно настроить первый путь. Когда пользователь попадает на localhost:8000, Angular должен взять контроль над загрузкой отрендеренного шаблона. Чтобы сделать это, нам потребуется использовать angular-router. В frontend/app/routes.js пишем следующее: function routesConfig($routeProvider) { $routeProvider .when("/", { templateUrl: _urlPrefixes.TEMPLATES + "components/home/home.html", label: "Home" }) .otherwise({ templateUrl: _urlPrefixes.TEMPLATES + "404.html" }); } routesConfig.$inject = ["$routeProvider"]; module.exports = routesConfig; Если мы не добавим _urlPrefixes.TEMPLATES, angular-router предположит, что components/home/home.html является действительной ссылкой, которую узнает сервер. Так как STATIC_URL в настройках предполагает неправильную работу localhost:8000/components/home/home.html. Также, если вы еще не заметили, вы увидите otherwise({...})  в коде роутов. Это то, как будут реализованы страницы 404. В frontend/app/404.html добавляем следующее: <h1>NOT FOUNDh1> И в завершении  добавляем frontend/app/app.js: /* Config Vars */ var routesConfig = require("./routes"); 14. Добавьте директивы angular-router к шаблону точки входа приложения. А теперь нам нужно указать Angular, где будет происходить переключение отображаемого, когда пользователь пользуется навигацией. Чтобы сделать это, мы используем всю силу angular-router. В тэг    в frontend/app/index.html добавляем: <base href="/"> Теперь в тэг  добавляем: <div ng-view>div> Ваш index.html теперь должен выглядеть так: {% load staticfiles %} <html ng-app="myApp"> <head> <title>My Sitetitle> <script src="{% static 'dist/js/bundle.js' %}" >script> <base href="/"> head> <body> <div> <div ng-view>div> div> body> html> Запустите Webpack. Откройте localhost:8000. Вы должны увидеть, что произошло в home/home.html. (Если ничего, отправьте эти данные автору J ). 15. Проверьте REST API в приложении Angular. Если все сделано, у вас появится возможность написать angular службы для Django API. Давайте создадим небольшой компонент, чтобы увидеть, можем ли мы это сделать. Этот компонент должен перечислять игры. Я предполагаю, что вы уже заполнили базы данных, следовательно запрос HTTP к localhost:8000/api/v1/games вернет список игр. Создайте скаффолд компонент в frontend/app/components/: mkdir -p game/list/ && touch game/list/game-list-controller.js game/list/game-list-controller_test.js game/game-service.js game/game.js game/game.html Этот компонент будет перечислять игры. Этот компонент должен перечислять игры. Я предполагаю, что вы уже заполнили базы данных, следовательно запрос HTTP к localhost:8000/api/v1/games вернет список игр. В game/game-service.js: function GameService($resource) { /** * @name GameService * * @description * A service providing game data. */ var that = this; /** * A resource for retrieving game data. */ that.GameResource = $resource(_urlPrefixes.API + "games/:game_id/"); /** * A convenience method for retrieving Game objects. * Retrieval is done via a GET request to the ../games/ endpoint. * @param {object} params - the query string object used for a GET request to ../games/ endpoint * @returns {object} $promise - a promise containing game-related data */ that.getGames = function(params) { return that.GameResource.query(params).$promise; }; } angular.module("Game") .service("GameService", ["$resource", GameService]); Обратите внимание на ссылку $resource, которую мы используем для того, чтобы настроить механизмы HTTP в нашей службе. В game/list/game-list-controller.js: function GameListController(GameService) { var that = this; /* Stored game objects. */ that.games = []; /** * Initialize the game list controller. */ that.init = function() { return GameService.getGames().then(function(games) { that.games = games; }); }; } angular.module("Game") .controller("GameListController", [ "GameService", GameListController ]); В game/game.html: <div ng-controller="GameListController as ctrl" ng-init="ctrl.init()"> <div> <h1>Gamesh1> <ul> <li ng-repeat="game in ctrl.games">{{ game.title }}li> ul> div> div> В game/game.js: angular.module("Game", []); require("./list/game-list-controller"); require("./game-service"); Затем обратимся к компоненту в app.js: /* Components */ require("./components/game/game"); /* App Dependencies */ angular.module("myApp", [ "Home", "Game", "ngResource", "ngRoute" ]); В конце концов, мы собираемся настроить роуты для списка игр, поэтому в frontend/app/routes.js добавьте следующее в объект $routeProvider: .when("/game", { templateUrl: _urlPrefixes.TEMPLATES + "components/game/list/game-list.html", label: "Games" }) Запустите Webpack снова. Все должно верно скомпилироваться. Если нет – дайте знать автору. Откройте localhost:8000/#/games. Вы увидите список игр. Сделано! Это все. Сомнения/Мысли Но есть некоторые сомнения: Глобальные переменные могут конкретно подставить вас, если вы не знаете, как с ними работать. Их локальное поведение не гарантирует того же на продакшене. Насколько я помню, их можно заставить работать, если правильно описан метод. Ваше приложение на Angular тесно связанно с Django. Поэтому ваше приложение не будет просто слиянием back- и фронтенда. Если ваш Django-RIP давно устарел, значит поменялись и маршруты, следовательно сконфигурируете ваш бэкенд согласно тому, как должны вести себя статические файлы. Так же вам будет необходимо заменить index.html с точкой входа Angular. Маленькие проекты не дадут вам особо попотеть, а вот большие явно заставят понервничать. Совет: единственное место, где должны сопрягаться приложение на Angular и Django сервер - это одна точка входа. Деплоймент должен быть выполнен так же, как любой обычный деплоймент приложения. Это все. Если у вас есть какие-либо вопросы и вы испытываете трудности, пожалуйста, оставьте их в комментариях в исходной статье! Чит! Автор пообещал выложить на гитхабе репозиторий со всем кодом. Оригинальная статья на английском языке. 

Друзі, привіт!   Ви, мабуть, не раз чули – як хочеш стати програмістом, почни з вивчення англійської. І це дуже слушна порада, бо IT-фахівцю треба не тільки вільно читати технічну документацію, але й мати гарні самопрезентативні та розмовні навички для ефективної і комфортної співпраці з іноземними колегами, замовниками та роботодавцями.   І у вас, друзі, є чудова можливість вдосконалити свою ділову англійську!   Запрошуємо вас на безкоштовний онлайн курс «Business English» від Englishdom, який буде проходити в форматі “живих” вебінарів з 7 листопада по 7 грудня (заняття двічі на тиждень по понеділках і середах) на нашому YouTube каналі CodeUA.   Курс розроблений для активних та цілеспрямованих людей, які бажають опанувати нюанси ділового спілкування, планують працювати у міжнародній компанії або просто хочуть легко спілкуватися з іноземними партнерами.   Що ви отримаєте на курсі?   Ви опануєте базову ділову лексику, зможете брати активну участь у перемовинах англійською та вести ключову документацію англійською. Це навички, які стануть у нагоді будь-якому фахівцеві та дадуть перевагу в очах роботодавця. Курс дозволить поліпшити знання англійської та отримати бажаний сертифікат.   Ментор – Олеся Яворська, філолог, викладач англійської в Englishdom з досвідом 5 років.   Програма курсу: Business communication – 7 листопада Presenting efficiently – 9 листопада  Negotiations – 14 листопада  Social media – 16 листопада  Sales – 21 листопада Legislation in English – 23 листопада  Currency & Finance – 28 листопада  Job Interview – 30 листопада  Documents and reports – 5 грудня  Business Correspondence – 7 грудня   Для кого цей курс?   Якщо ви вже колись вчили англійську, володієте базовою граматикою та знаєте 1500-2000 англійських слів, ви з легкістю зможете опанувати знання, які будуть даватися на цьому курсі.   Як проходитиме навчання   Заняття проходитимуть у форматі живих вебінарів, на яких ви зможете задавати питання спікеру і отримувати на них відповіді. Курс поєднує теорію і практику, будуть домашні завдання для закріплення вивченого матеріалу, а також спілкування у телеграм чаті з одногрупниками.   Умови участі   Безкоштовно, за попередньою реєстрацією.   Організатори курсу:   Englishdom – онлайн-школа для вивчення англійської мови з персональним викладачем на інтерактивній онлайн-платформі. Englishdom входить до ТОП лідерів ринку edtech в Європі.   CyberBionic Systematics – сертифікований навчальний центр, партнер Microsoft, авторизований центр міжнародної сертифікації VUE Pearson. З 2007 року CyberBionic Systematics надає послуги з професійної підготовки та підвищення кваліфікації IT-фахівців, а також on-line навчання для початківців за напрямками FrontEnd, Java, .NET та Python.

Здравствуйте, друзья! Провожая очень необычный 2020 год, который для многих стал проверкой на прочность и готовность к переменам, мы подвели итоги работы ITVDN и выбрали для вас все самое лучшее. Представляем вашему вниманию ТОП-10 видео курсов ITVDN, вебинаров и статей за 2020 год.  Лучшие курсы В 2020 году мы выпустили 21 видео курс по таким направлениям как C#/.NET, Java, FrontEnd разработка, Python, C++, мобильная разработка, UX/UI дизайн и другие. ТОП-10 лучших новых видео курсов в 2020 (по количеству просмотров): C# Стартовый от Александра Шевчука ASP.NET Core Web API. Практический курс JavaScript Starter Верстка сайта на FlexBox CSS React Essential UX/UI Design Essential Django Starter Spring MVC Решение практических задач на С++ Unit тестирование в Java с JUnit Лучшие вебинары В 2020 году мы провели 61 вебинар, в которых было много практики программирования, а также особенно популярные среди новичков вебинары по выбору специальности. Топ-10 вебинаров 2020 года по количеству просмотров и “лайков”: Как стать C# разработчиком в 2021 году. .NET или .NET Core? Как стать программистом? Frontend, Java, Python или .NET - что выбрать? Что нужно знать .NET разработчику в 2020? ➤ Как стать программистом на C# c нуля? Адаптивная верстка на Flexbox и Grid Что нужно знать FrontEnd разработчику в 2020? ➤ Пошаговая инструкция для начинающих JS больше не нужен?! Blazor - революция в веб-разработке Типичные ошибки в коде на примере С++, С# и Java Как прокачать английский для собеседования в IT-компанию Создание игры “Space Invaders” на C# с нуля Пишем пошаговую боевую систему на JavaScript с нуля. На примере игры Final Fantasy в 2D. Лучшие статьи В 2020 году мы опубликовали 19 статей, вот 10 самых читаемых из них:  Как не провалить своё IT-обучение Мифы о программировании и программистах Как стать Full-Stack разработчиком Что должен знать Python разработчик в 2020 году Как стать Android разработчиком FAQ начинающего программиста Что должен знать Java разработчик в 2020 году? Как стать разработчиком игр? С чего начинается создание сайтов? Специальность верстальщик Онлайн обучение программированию: подводные камни и советы   Открывайте для себя новые возможности с ITVDN! Будьте счастливы в Новом году!

Друзі, привіт! 🎄✨ Почніть Новий рік із новими можливостями! 🎁 Ми підготували для вас особливий подарунок — новорічний розіграш подарункових сертифікатів на ІТ навчання! 🎉 Хочете зробити перший крок до кар'єри в ІТ або вдосконалити свої навички? Цей шанс саме для вас! Сертифікати дозволять переможцям безкоштовно вивчати програмування / тестування / мобільну розробку / UX/UI дизайн / розробку ігор / FrontEnd / BackEnd мовами Java, C#, JavaScript, Python тощо – залежно від того, що ви оберете! Ви можете виграти підписку по ІТ-спеціальностям: Python розробник; C# / .NET розробник; ASP.NET Core розробник; ASP.NET MVC розробник; Unity / Game розробник; Верстальник сайтів; FrontEnd розробник; JavaScript розробник; Angular розробник; React розробник; Java розробник; Android розробник; PHP розробник; Ruby розробник; C++ розробник; QA (Quality Assurance). Таким чином, у нас буде 16 переможців – шанси виграти дуже високі! Подарункові сертифікати дозволяють вам почати навчання будь-коли протягом 12 місяців з моменту отримання сертифікату. Як взяти участь? Потрібно: Підписатись на наш YouTube-канал та Telegram Оформити заявку і вказати пакет, який ви хочете виграти. Заявки приймаємо до 12:00 25 грудня . Розіграш відбудеться 25 грудня о 16:00 в прямому етері на YouTube-каналі ITVDN. Переможці будуть визначені за допомогою сервісу random.org. Посилання на трансляцію ми надішлемо на email, який ви вкажете у реєстраційній формі. Що отримають переможці ✅ Доступ до всіх відео курсів, які входять у вибраний пакет підписки ✅ Вихідний код навчальних проєктів ✅ Презентації, опорні конспекти, д/з ✅ Перевірка домашніх завдань ✅ Консультації з тренером ✅ Доступ до інтерактивних практикумів ✅ Онлайн тестування та сертифікати ✅ Дипломи з пройдених спеціальностей 🚀 Доступ до нових курсів, які виходитимуть під час дії підписки Що можна вивчати на ITVDN? На ITVDN понад 300 відео курсів з найрізноманітніших мов програмування та супутніх технологій, починаючи з FrontEnd, Python, Java, C#, Node.js та QA напрямків, і закінчуючи технологіями для опанування DevOps, мобільної розробки під Android та розробки ігор на Unity. Повний перелік відео курсів дивіться в нашому Каталозі. Подарунковий сертифікат переможці можуть використати для власного навчання або передати другу. Не зволікайте — приєднуйтесь до святкового настрою та вигравайте свій квиток у світ технологій! 🚀 Взяти участь у розіграші

Лише 11.11 на ITVDN діють знижки до -50% на всі ІТ курси та спеціальності, інвестуйте в себе та свою майбутню кар’єру! Обирайте професію мрії та поринайте у світ IT разом з нами! Знижка на пакети підписок на усі курси та спеціальності: 🎁Преміум (12 міс.) — 50% знижка, 85 USD замість 169,99  🎁Базовий (6 міс.) — 40% знижка, 54 USD замість 89,99 🎁Стартовий (3 міс.) — 30% знижка, 42 USD замість 59,99 Пакети відео-курсів по ІТ спеціальностям: Python Developer 👨‍💻– 63$ замість 89,99$ Верстальник сайтів – 42$ замість 59,99$ JavaScript Developer – 31,5$ замість 44,99$ Frontend Developer 👨‍💻– 63$ замість 104,99$ React Developer – 42$ замість 59,99$ Angular Developer – 42$ замість 59,99$ Java Developer 👨‍💻– 63$ замість 104,99$ .NET Developer 👨‍💻– 72$ замість 119,99$  ASP.NET Core Developer – 63$ замість 89,99$ ASP.NET MVC Developer – 52,5$ замість 74,99$ Unity / Game Developer – 63$ замість 89,99$ Android Developer – 35$ замість 49,99$ PHP Developer – 52,5$ замість 74,99$ C++ Developer – 35$ замість 49,99$ Ruby Developer – 42$ замість 59,99$ Quality Assurance 👨‍💻- 72$ замість 119,99$ Онлайн навчання з тренером у групі — 40% знижка: FrontEnd Developer – 12 листопада FullStack Node.js Developer – 12 листопада QA. Тестування ПЗ – 10 грудня Python Developer – 11 листопада Java Developer – 10 грудня C#/.NET Developer – 18 листопада 🎯Акція діє лише один день — 11.11. Поспішайте реалізувати свою мрію! Не знаєш що обрати ? - Отримай безкоштовну консультацію! Залишай заявку та отримай професійну консультацію нашого спеціаліста. Telegram: @itvdn_support Email: support@itvdn.com Телефон: +38 044 344 16 22 або +44 204 577 32 36 Подвійна вигода з "Оплатою частинами" Скористайтеся зручним варіантом оплати частинами від Монобанку або ПриватБанку. Ви отримаєте повний пакет за акційною ціною без комісій і зможете розподілити оплату на кілька місяців. Приєднуйтесь до IT-спільноти разом з ITVDN та розпочніть свій шлях у світі високих технологій за найкращими умовами!

Друзі, з 25 по 30 червня на ITVDN великі знижки до 50% на пакети відео курсів з 15 популярних ІТ-спеціальностей: Frontend Developer – 52 USD (104.99 USD) React Developer – 36 USD (59.99 USD) .NET Developer – 60 USD (119.99 USD) ASP.NET Core Developer – 54 USD (89.99 USD) Python Developer – 45 USD (89.99 USD) Java Developer – 52 USD (104.99 USD) Android Developer – 35 USD (49.99 USD) Unity / Game Developer – 54 USD (89.99 USD) Верстальник сайтів – 36 USD (59.99 USD) JavaScript Developer – 31 USD (49.99 USD) Angular Developer – 36 USD (59.99 USD) PHP Developer – 45 USD (74.98 USD) C++ Developer – 31 USD (49.99 USD) Ruby Developer – 36 USD (59.99 USD) ASP.NET MVC Developer – 45 USD (74.98 USD) Що ви отримуєте, купуючи пакет підписки за спеціальністю: Доступ до усіх відео курсів за обраною спеціальністю на 4-8 місяців (в залежності від спеціальності) Доступ до інтерактивних практикумів для прокачки навичок написання коду Вихідний код навчальних проєктів Презентації, опорний конспект, д/з Перевірка 20 домашніх завдань – Акційна пропозиція! Онлайн консультації з тренером Онлайн тестування та сертифікати за пройденими курсами Диплом зі спеціальності після фінального екзамену Доступ до нових курсів за спеціальністю, які виходитимуть під час дії підписки Допомога у працевлаштуванні – рекомендації, вебінари, стажування і вакансії У подарунок – перевірка 20 д/з ментором Купуйте пакет відео курсів за будь-якою спеціальністю в період акції і отримуйте у подарунок перевірку 20 домашніх завдань ментором. Програмування – це передусім практика. Хай ваше навчання буде приємним і продуктивним! Вивчайте програмування за вигідною ціною та з підтримкою ментора!

Дорогі друзі, на час війни ми запроваджуємо спеціальні ціни – будь-який пакет підписки можна придбати за половину вартості. Ця пропозиція дійсна для усіх, крім громадян російської федерації, яка з 24 лютого веде загарбницьку війну проти України. Хоча війна зачепила кожного із нас (головний офіс ITVDN знаходиться в Києві), ми вже реорганізувалися і готові продовжувати надавати якісні послуги.   Коротка довідка для тих, хто ще не знайомий з нашим ресурсом На ITVDN є понад 230 відео курсів із програмування та інформаційних технологій, представлені практично всі головні мови програмування і напрямки розроблення програмного забезпечення, а також є курси для тестувальників, дизайнерів, проджект менеджерів. Для тих, хто не визначився із тим, що саме він хоче вивчати, ми рекомендуємо звернути увагу на пакети Стартовий, Базовий та Преміум, які надають доступ до всіх без виключення курсів та допоміжних навчальних сервісів.   Вартість цих пакетів на час війни: Стартовий (3 міс.) – 25 USD (49,99 USD) Базовий (6 міс.) – 45 USD (89,99 USD) Преміум (12 міс.) – 85 USD (169,99 USD) Якщо ж ви визначилися зі спеціальністю, то доречно буде обрати відповідний пакет: Python Developer  C#/.NET Developer   ASP.NET Core Developer ASP.NET MVC Developer Unity/Game Developer Frontend Developer  React Developer  Angular Developer Верстальник сайтів  JavaScript Developer Java Developer Android Developer iOS Developer PHP Developer Ruby Developer С++ Developer Окрім доступу до відео курсів, ви матимете можливість розвивати навички програмування за допомогою інтерактивних практикумів, перевіряти ваші знання шляхом тестування і отримувати сертифікати за пройденими курсами. Якщо ви не можете вчитися зараз, або хочете подарувати можливість вивчення програмування комусь із ваших друзів – скористайтеся можливістю придбати подарунковий сертифікат. Його можна буде активувати пізніше протягом року. IT-спільнота робить свій вагомий внесок для підтримки ЗСУ і прискорення перемоги. У найкоротші терміни створюються нові сайти і додатки, блокуються ворожі онлайн сервіси. Разом ми сила. Україна переможе! Акція діє до 20 червня 2022 року.

Дорогие друзья! YouTube сообщество ITVDN с каждым днём становится всё больше и больше. И сейчас у нас уже 210 000 подписчиков! Получи видео курс в подарок Чтобы разделить эту радость с вами, мы решили дать вам возможность получить полный доступ к одному из 220 видео курсов из Каталога ITVDN. Условия участия: Сделать пост — поделиться любым видео с YouTube канала ITVDN в одной из соцсетей (Facebook, VK, LinkedIn, Instagram). Открыть доступ к своей публикации, чтобы мы могли проверить выполнение условия и другие пользователи могли увидеть ваш пост. Подписаться на наш паблик в Telegram. Самое главное - заполнить анкету участника акции, выбрав себе подарок! Заявки принимаются до 13 декабря 2021 года, доступ к выбранному видеокурсу будет открыт 13 декабря на 10 дней, о чем вы дополнительно будете уведомлены письмом на емейл, указанный в регистрационной форме. ITVDN – один из самых больших образовательных русскоязычных онлайн ресурсов для программистов. В нашем каталоге более 220 видео курсов. На ITVDN вы можете пройти обучение по таким направлениям: C# /.NET Developer FrontEnd Developer Java Developer Python Developer PHP Developer ASP.NET MVC Developer Android Developer React Developer iOS Developer Unity / Game Developer ASP.NET Core Developer Верстальщик сайтов C++ Developer Ruby Developer и другим. Искренне благодарим вас за то, что подписаны на наш канал, что смотрите, комментируете, изучаете и, что самое важное, — любите наши видео! Ваша обратная связь — замечания и пожелания — помогают делать ITVDN более качественным ресурсом.

Дорогие друзья!  На ITVDN очередное знаковое событие! Те, кто с нами уже давно, знают, как мы любим отмечать круглые цифры нашего YouTube канала, а в этот раз особо приятное число – уже 200 000 подписчиков!   Спасибо всем вам за то, что подписаны на наш канал, за то, что смотрите, комментируете, изучаете и, что самое важное, любите наши видео! Спасибо за вашу поддержку и обратную связь. Именно ваши вопросы, ваши замечания и пожелания определяют вектор развития ITVDN.  Сейчас на канале ITVDN: больше 2000 видео - уроков, тренингов-практикумов, интервью с интересными людьми; с нами сотрудничают более 165 авторов из разных компаний и разных стран; свыше 20 млн просмотров видео!  Нас переполняет радость и гордость за наших авторов, которые делятся своими знаниями и за такое большое комьюнити. Приглашаем отпраздновать это вместе! С 26 мая по 2 июня 2021 года включительно проходит акция. Каждый из вас может получить в подарок один видео курс ITVDN.  Условия участия:  Сделать пост - поделиться любимым видео в одной из соцсетей (facebook,vk, linkedin, Instagram). Открыть доступ к своей публикации, чтобы мы могли проверить выполнение условия и другие пользователи могли увидеть ваш пост 😊 Подписаться на наши страницы в Facebook и Telegram Самое главное - заполнить анкету участника акции, выбрав себе подарок! Заявки принимаются до 18:00 2 июня 2021 года. Доступ к выбранному курсу будет предоставлен 3 или 4 июня (в зависимости от количества заявок), о чем вы будете дополнительно уведомлены письмом на ваш емейл, указанный в анкете участника акции. Доступ к курсу открывается на 30 дней. ITVDN – один из самых больших образовательных русскоязычных онлайн ресурсов для программистов. В нашем каталоге более 200 видео курсов. На ITVDN вы можете пройти обучение по таким направлениям: C# /.NET Developer FrontEnd Developer Java Developer Python Developer PHP Developer ASP.NET MVC Developer Android Developer React Developer iOS Developer Unity / Game Developer ASP.NET Core Developer Верстальщик сайтов C++ Developer Ruby Developer и другим. Вся команда ITVDN искренне благодарит каждого! Мы вас любим и работаем для вас! Продолжайте быть активными, приводите друзей и изучайте программирование на ITVDN!