One place for hosting & domains

      Использование

      Использование параметров запросов в Angular


      Введение

      Параметры запросов в Angular позволяют передавать опциональные параметры по любым маршрутам в приложении. Параметры запросов отличаются от обычных параметров маршрутов, которые доступны только на одном маршруте и не являются опциональными (например, /product/:id).

      В этой статье мы рассмотрим пример приложения, которое отображает список продуктов. Мы зададим опциональные значения order и price-range, которые принимающий компонент сможет считывать, и на основе которых он сможет действовать. Заданные значения повлияют на порядок и фильтрацию списка продуктов.

      Использование параметров запросов с помощью Router.navigate

      Когда вы предписываете приложению перейти на маршрут с помощью Router.navigate, вы передаете параметры запроса с помощью queryParams.

      В нашем примере, если мы хотим направить посетителей к списку продуктов, отсортированному по популярности, это будет выглядеть так:

      goProducts() {
        this.router.navigate(["https://www.digitalocean.com/products"], { queryParams: { order: 'popular' } });
      }
      

      В результате мы получим следующий URL:

      http://localhost:4200/products?order=popular
      

      Также вы можете задать несколько параметров запроса. В нашем примере, если мы хотим направить посетителей к списку продуктов, отсортированному по популярности и отфильтрованному по верхнему ценовому диапазону, это будет выглядеть так:

      goProducts() {
        this.router.navigate(["https://www.digitalocean.com/products"], { queryParams: { order: 'popular', 'price-range': 'not-cheap' } });
      }
      

      В результате мы получим следующий URL:

      http://localhost:4200/products?order=popular&price-range=not-cheap
      

      Теперь вы понимаете, как использовать queryParams, чтобы задавать параметры запросов.

      Сохранение или объединение параметров запросов с помощью queryParamsHandling

      По умолчанию параметры запросов теряются при любых последующих действиях по навигации. Чтобы предотвратить это, вы можете задать для queryParamsHandling значение 'preserve' или 'merge'.

      В нашем примере, если мы хотим перенаправлять посетителей со страницы с параметром запроса { order: 'popular' } на страницу /users с сохранением параметров запроса, мы будем использовать 'preserve':

      goUsers() {
        this.router.navigate(['/users'], { queryParamsHandling: 'preserve' });
      }
      

      В результате мы получим следующий URL:

      http://localhost:4200/users?order=popular
      

      В нашем примере, если мы хотим перенаправлять посетителей со страницы с параметром запроса { order: 'popular' } на страницу /users с передачей параметра запроса { filter: 'new' }, мы будем использовать 'merge':

      goUsers() {
        this.router.navigate(['/users'], { queryParams: { filter: 'new' }, queryParamsHandling: 'merge' });
      }
      

      В результате мы получим следующий URL:

      http://localhost:4200/users?order=popular&filter=new
      

      Примечание. Ранее для сохранения параметров запроса нужно было задать для свойства preserveQueryParams значение true, но в Angular 4+ эта возможность заменена на queryParamsHandling.

      Теперь вы понимаете, как можно использовать queryParamsHandling для сохранения и объединения параметров запросов.

      В нашем примере, если мы используем директиву RouterLink для навигации по маршрут, мы используем queryParams следующим образом:

      <a [routerLink]="["https://www.digitalocean.com/products"]" [queryParams]="{ order: 'popular'}">
        Products
      </a>
      

      В нашем примере, если мы хотим использовать 'preserve' или 'merge' для сохранения или объединения параметров запроса, при последующей навигации queryParamsHandling используется следующим образом:

      <a [routerLink]="['/users']"
         [queryParams]="{ filter: 'new' }"
         queryParamsHandling="merge">
        Users
      </a>
      

      Теперь вы понимаете, как использовать queryParams и queryParamsHandling с RouterLink.

      Доступ к значениям параметров запроса

      Теперь мы знаем, как передавать опциональные параметры запроса в маршрут. Давайте посмотри, как получить доступ к этим значениям на полученных маршрутах. Класс ActivatedRoute имеет свойство queryParams, которое возвращает наблюдаемые параметры запроса, доступные на текущем URL.

      Возьмем следующий URL маршрута:

      http://localhost:4200/products?order=popular
      

      Мы можем получить доступ к параметру запроса order :следующим образом:

      // ...
      import { ActivatedRoute } from '@angular/router';
      import 'rxjs/add/operator/filter';
      
      @Component({ ... })
      export class ProductComponent implements OnInit {
        order: string;
        constructor(private route: ActivatedRoute) { }
      
        ngOnInit() {
          this.route.queryParams
            .filter(params => params.order)
            .subscribe(params => {
              console.log(params); // { order: "popular" }
      
              this.order = params.order;
              console.log(this.order); // popular
            }
          );
        }
      }
      

      В журнале консоли мы увидим объект params:

      Output

      { order: "popular" }

      И значение params.order:

      Output

      popular

      Также у нас имеется queryParamMap, возвращающая наблюдаемый объект paramMap.

      Возьмем следующий URL маршрута:

      http://localhost:4200/products?order=popular&filter=new
      

      Мы можем получить доступ к параметрам запроса следующим образом:

      this.route.queryParamMap
        .subscribe((params) => {
          this.orderObj = { ...params.keys, ...params };
        }
      );
      

      Здесь мы использовали оператор object spread, и вот так выглядит получившаяся форма данных в orderObj:

      {
        "0": "order",
        "1": "filter",
        "params": {
          "order": "popular",
          "filter": "new"
        }
      }
      

      Теперь вы понимаете, как можно использовать queryParams и queryParamMap для доступа к значениям на полученных в результате маршрутах.

      Заключение

      В этой статье мы использовали различные примеры для настройки и получения параметров запросов в Angular. Вы познакомились с опциями queryParams и queryParamsHandling при использовании Router.navigate и RouterLink. Также вы познакомились с опциями queryParams и queryParamMap при использовании ActivatedRoute.

      Если вы хотите узнать больше об Angular, посмотрите нашу страницу тем по Angular, где вы найдете упражнения и проекты по программированию.



      Source link

      Использование JSON.parse() и JSON.stringify()


      Введение

      Объект JSON, доступный во всех современных браузерах, включает два полезных метода для работы с контентом в формате JSON: parse и stringify. JSON.parse() берет строку JSON и трансформирует ее в объект JavaScript. JSON.stringify() берет объект JavaScript и трансформирует его в строку JSON.

      Приведем пример:

      const myObj = {
        name: 'Skip',
        age: 2,
        favoriteFood: 'Steak'
      };
      
      const myObjStr = JSON.stringify(myObj);
      
      console.log(myObjStr);
      // "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"
      
      console.log(JSON.parse(myObjStr));
      // Object {name:"Sammy",age:6,favoriteFood:"Tofu"}
      

      Хотя данные методы обычно применяются к объектам, их можно использовать и в отношении массивов:

      const myArr = ['bacon', 'lettuce', 'tomatoes'];
      
      const myArrStr = JSON.stringify(myArr);
      
      console.log(myArrStr);
      // "["shark","fish","dolphin"]"
      
      console.log(JSON.parse(myArrStr));
      // ["shark","fish","dolphin"]
      

      JSON.parse()

      JSON.parse() может принимать функцию в качестве второго аргумента, который может трансформировать значения объекта до их возврата. Здесь значения объекта трансформируются в верхний регистр в возвращаемом объекте метода parse:

      const user = {
        name: 'Sammy',
        email: 'Sammy@domain.com',
        plan: 'Pro'
      };
      
      const userStr = JSON.stringify(user);
      
      JSON.parse(userStr, (key, value) => {
        if (typeof value === 'string') {
          return value.toUpperCase();
        }
        return value;
      });
      

      Примечание. Запятые в конце строки недопустимы в формате JSON, и поэтому метод JSON.parse() выдает ошибку в случае передачи в него строки, заканчивающейся на запятую.

      JSON.stringify()

      JSON.stringify() может принимать два дополнительных аргумента, первый из которых представляет собой функцию replacer, а второй — строковое или числовое значение, используемое в качестве пробела в возвращаемой строке.

      Функцию replacer можно использовать для фильтрации значений, поскольку любое значение, возвращаемое как undefined, получается из возвращаемой строки:

      const user = {
        id: 229,
        name: 'Sammy',
        email: 'Sammy@domain.com'
      };
      
      function replacer(key, value) {
        console.log(typeof value);
        if (key === 'email') {
          return undefined;
        }
        return value;
      }
      
      const userStr = JSON.stringify(user, replacer);
      // "{"id":229,"name":"Sammy"}"
      

      Приведем еще пример с передачей аргумента space:

      const user = {
        name: 'Sammy',
        email: 'Sammy@domain.com',
        plan: 'Pro'
      };
      
      const userStr = JSON.stringify(user, null, '...');
      // "{
      // ..."name": "Sammy",
      // ..."email": "Sammy@domain.com",
      // ..."plan": "Pro"
      // }"
      

      Заключение

      В этом учебном модуле мы узнали, как использовать методы JSON.parse() и JSON.stringify(). Если вы хотите узнать больше о работе с JSON в Javascript, ознакомьтесь с учебным модулем Работа с JSON в JavaScript.

      Более подробную информацию о том, как программировать на JavaScript, можно найти в серии статей Программирование на JavaScript или на странице тем по JavaScript в разделе упражнений и проектов по программированию.



      Source link

      Использование интеграции Git в Visual Studio Code


      Введение

      Редактор Visual Studio Code (VS Code) стал одним из самых популярных для веб-разработки. Его популярность обусловлена множеством встроенных возможностей, в том числе интеграции с системой контроля исходного кода, а именно с Git. Использование возможностей Git из VS Code позволяет сделать рабочие процессы более эффективными и надежными.

      В этом учебном модуле мы изучим интеграцию контроля исходного кода в VS с помощью Git.

      Предварительные требования

      Для этого обучающего модуля вам потребуется следующее:

      • Git, установленный на вашем компьютере. Более подробную информацию о том, как добиться этого, можно найти в учебном модуле Введение в Git.
      • Последняя версия Visual Studio Code, установленная на вашем компьютере.

      Шаг 1 — Знакомство с вкладкой Source Control

      Прежде всего, чтобы воспользоваться преимуществами интеграции контроля исходного кода, следует инициализировать проект как репозиторий Git.

      Откройте Visual Studio Code и запустите встроенный терминал. Вы можете открыть его, используя сочетание клавиш CTRL + ` в Linux, macOS или Windows.

      Используя терминал, создайте каталог для нового проекта и перейдите в этот каталог:

      • mkdir git_test
      • cd git_test

      Затем создайте репозиторий Git:

      Также вы можете сделать это в Visual Studio Code, открыв вкладку Source Control (иконка выглядит как развилка дороги) в левой панели:

      Иконка Source Control

      Затем нажмите кнопку Open Folder:

      Снимок экрана с кнопкой Open Folder

      При нажатии кнопки откроется проводник файлов, где будет открыт текущий каталог. Выберите предпочитаемый каталог проекта и нажмите Open.

      Затем нажмите Initialize Repository:

      Снимок экрана с кнопкой инициализации репозитория Initialize Repository

      Если теперь вы посмотрите на свою файловую систему, вы увидите, что она содержит каталог .git. Чтобы сделать это, используйте терминал для перехода в каталог проекта и вывода его содержимого:

      Вы увидите созданный каталог .git:

      Output

      Это означает, что репозиторий инициализирован, и теперь вам следует добавить в него файл index.html.

      После этого на панели Source Control вы увидите, что рядом с именем вашего нового файла отображается буква U. Обозначение U означает, что файл не отслеживается, то есть, что это новый или измененный файл, который еще не был добавлен в репозиторий:

      Снимок экрана с изображением неотслеживаемого файла, обозначенного буквой U

      Вы можете нажать значок плюс (+) рядом с файлом index.html, чтобы включить отслеживание файла в репозитории.

      После этого рядом с файлом появится буква A. A обозначает новый файл, который был добавлен в репозиторий.

      Чтобы записать изменения, введите команду отправки в поле ввода в верхней части панели Source Control. Затем нажмите иконку отметки check для отправки файла в репозиторий.

      Снимок экрана с изображением добавленного файла, помеченного буквой A, и команды отправки

      После этого вы увидите, что несохраненных изменений нет.

      Теперь добавьте немного содержания в файл index.html.

      Вы можете использовать ярлык Emmet для генерирования базовой структуры кода HTML5 в VS Code, нажав !, а затем клавишу Tab. Теперь добавьте что-нибудь в раздел <body>, например, заголовок <h1>, и сохраните файл.

      На панели исходного кода вы увидите, что ваш файл изменился. Рядом с именем файла появится буква M, означающая, что файл изменен:

      Снимок измененного файла, обозначенного буквой M

      Для практики давайте запишем это изменение в репозиторий.

      Теперь вы познакомились с работой через панель контроля исходного кода, и мы переходим к интерпретации показателей gutter.

      Шаг 2 — Интерпретация показателей Gutter

      На этом шаге мы рассмотрим концепцию Gutter («Желоб») в VS Code. Gutter — это небольшая область справа от номера строки.

      Если ранее вы использовали сворачивание кода, то в области Gutter находятся иконки «Свернуть» и «Развернуть».

      Для начала внесем небольшое изменение в файл index.html, например, изменим содержание внутри тега <h1>. После этого вы увидите, что измененная строка помечена в области Gutter синей вертикальной чертой. Синяя вертикальная черта означает, что соответствующая строка кода была изменена.

      Теперь попробуйте удалить строку кода. Вы можете удалить одну из строк в разделе <body> вашего файла index.html. Обратите внимание, что в области Gutter появился красный треугольник. Красный треугольник означает строку или группу строк, которые были удалены.

      Теперь добавьте новую строку в конец раздела <body> и обратите внимание на зеленую полосу. Вертикальная зеленая полоса обозначает добавленную строку кода.

      В этом примере описаны индикаторы области Gutter для случаев изменения, удаления и добавления строки:

      Снимок экрана с примерами трех индикаторов области Gutter

      Шаг 3 — Просмотр отличий файлов

      VS Code также позволяет посмотреть отличия между разными версиями файла. Обычно для этого нужно загружать отдельный инструмент diff, так что встроенная функция повысит эффективность работы.

      Чтобы посмотреть отличия, откройте панель контроля исходного кода и дважды нажмите на измененный файл. В этом случае следует дважды нажать на файл index.html. Откроется типовое окно сравнения, где текущая версия файла отображается слева, а ранее сохраненная в репозитории версия — справа.

      В этом примере мы видим, что в текущей версии добавлена строка:

      Снимок разделенного экрана для сравнения версий

      Шаг 4 — Работа с ветвлением

      Вы можете использовать нижнюю панель для создания и переключения ветвей кода. В нижней левой части редактора отображается иконка контроля исходного кода (которая выглядит как дорожная развилка), после которой обычно идет имя главной ветви или ветви, над которой вы сейчас работаете.

      Индикатор ветви в нижней панели VS Code с именем: master

      Чтобы создать ветвление, нажмите на имя ветви. Откроется меню, где вы сможете создать новую ветвь:

      Диалог создания новой ветви

      Создайте новую ветвь с именем test.

      Теперь внесите изменение в файл index.html, чтобы перейти в новую ветвь test, например, добавьте текст this is the new test branch.

      Сохраните эти изменения ветви test в репозитории. Затем нажмите на имя ветви в левом нижнем углу еще раз, чтобы переключиться обратно на главную ветвь master.

      После переключения обратно на ветвь master вы увидите, что текст this is the new test branch, сохраненный для ветви test, отсутствует в главной ветви.

      Шаг 5 — Работа с удаленными репозиториями

      В этом учебном модуле мы не будем вдаваться в детали, но панель Source Control также предоставляет доступ для работы с удаленными репозиториями. Если вы уже работали с удаленными репозиториями, то вы увидите знакомые вам команды, такие как pull, sync, publish, stash и т. д.

      Шаг 6 — Установка полезных расширений

      В VS Code имеется не только множество встроенных функций для Git, но и несколько очень популярных расширений, добавляющих дополнительные функции.

      Git Blame

      Это расширение дает возможность просматривать информацию Git Blame в панели состояния для текущей выделенной строки.

      Английское слово Blame имеет значение «винить», но не стоит беспокоиться — расширение Git Blame призвано сделать процесс разработки более практичным, а не обвинять кого-то в чем-то плохом. Идея «винить» кого-то за изменения кода относится не к буквальному возложению вины, а к идентификации человека, к которому следует обращаться с вопросами в отношении определенных частей кода.

      Как вы видите на снимке экрана, это расширение выводит на нижней панели инструментов небольшое сообщение, указывающее, кто изменял текущую строку кода, и когда было сделано это изменение.

      Git Blame на нижней панели инструментов

      Git History

      Хотя вы можете просматривать текущие изменения, сравнивать версии и управлять ветвлением с помощью встроенных функций VS Code, они не дают возможности просматривать историю Git. Расширение Git History решает эту проблему.

      Как можно увидеть на снимке ниже, это расширение позволяет тщательно изучать историю файла, автора, ветви и т. д. Чтобы активировать показанное ниже окно Git History, нажмите на файл правой кнопкой мыши и выберите пункт Git: View File History:

      Результаты работы расширения Git History

      Также вы сможете сравнивать ветви и записанные в репозиторий версии, создавать ветви из записанных версий и т. д.

      Git Lens

      GitLens дополняет возможности Git, встроенные в Visual Studio Code. Это расширение помогает визуализировать принадлежность кода через аннотации Git Blame и линзу кода, просматривать и изучать репозитории Git из среды VS Code, получать полезные аналитические данные с помощью мощных команд сравнения, а также выполнять многие другие задачи.

      Расширение Git Lens — одно из самых мощных и популярных среди сообщества разработчиков расширений. В большинстве случаев его функции могут заменить каждое из вышеперечисленных двух расширений.

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

      Функционал Git Blame в Git Lens

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

      При этом откроется следующее окно:

      Функционал Git History в Git Lens

      Это расширение имеет очень много функций, и потребуется время, чтобы разобраться со всеми открываемыми им возможностями.

      Заключение

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



      Source link