Как начать работу с пользовательским интерфейсом Angular Material

Angular Material — это библиотека компонентов пользовательского интерфейса (UI), которую разработчики используют в своих проектах Angular с точки зрения ускорения процесса разработки стильного и совместимого пользовательского интерфейса. Он предлагает разработчикам функциональные и элегантные компоненты пользовательского интерфейса, такие как входы, таблицы данных, карты и многое другое. Его компоненты помогают создавать функциональные, совместимые и привлекательные веб-приложения/страницы, а также адаптивные веб-сайты с точки зрения долговечности, универсальности и качества дизайна.

Почему интерфейс Angular Material?

Давайте рассмотрим значение Angular Material в наших проектах, чтобы лучше понять, почему он важен для фреймворка Angular.

  • Его компоненты спроектированы таким образом, что сайт может подстраиваться под любой размер экрана.
  • Он легко интегрируется с Angular Projects, потому что он построен с использованием структуры Angular.
  • Его можно включить в новое или существующее приложение Angular независимо от версии.
  • Он предоставляет разработчикам инструменты для создания/настройки своих компонентов.
  • Это ускоряет процесс разработки компонентов пользовательского интерфейса с нуля.

Ниже приведены некоторые особенности Angular Material:

  • Angular Material состоит из стандартного CSS.
  • Это кроссплатформенный браузер, который можно использовать для создания повторно используемого компонента.
  • Он имеет встроенный адаптивный дизайн.
  • Он включает в себя последнюю версию компонентов пользовательского интерфейса: кнопки, флажки и поле формы, форма которых соответствует концепциям Angular Material Design.
  • Он предоставляет специализированные и расширенные функции, такие как панель инструментов, прокрутка, боковая навигация, карты, быстрый набор и многие другие интересные функции.

Альтернативы пользовательскому интерфейсу Angular Material

Когда мы говорим об альтернативах, мы говорим о других библиотеках компонентов пользовательского интерфейса, которые мы можем использовать вместо Angular Material. Возможны следующие жизнеспособные альтернативы.

Ignite UI for Angular — это исчерпывающая коллекция виджетов пользовательского интерфейса, компонентов, наборов пользовательского интерфейса и сопутствующих директив для Angular на основе материалов, которая позволяет программистам создавать самые передовые и высокопроизводительные приложения для современных браузеров, мобильных приложений и PWA.

Bootstrap — это библиотека с открытым исходным кодом, которая предлагает несколько собственных виджетов Angular, созданных с помощью Bootstrap 4 CSS. Как вы, наверное, уже знаете, один из самых популярных фреймворков CSS, Bootstrap, используется для создания стильных современных приложений. Он включает библиотеки для HTML, CSS и JavaScript. Однако «ng-bootstrap» предоставляет нам идеальный метод для использования в наших приложениях Angular без какого-либо JS-файла. Раньше, чтобы использовать фреймворки Bootstrap в приложении Angular, нам приходилось использовать загрузочный CSS и его файлы JavaScript.

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

Запускаем наш проект

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

npm install -g @angular/cli

Как только это будет сделано, мы переходим к созданию/созданию нашего проекта. n/b: нам нужно запустить команду только один раз. После этого мы можем приступить к созданию наших проектов. Запустите ng new my-appв командной строке, заменив my-appна название вашего приложения.

первый

Выберите Yдля маршрутизации.

2

Выберите CSSдля стилей.

После всего этого выполните следующую команду:

cd <your-app-name>
ng add @angular/material

3

Выберите Y, чтобы продолжить.

Команда ng addустановит Angular Material , Component Dev Kit (CDK) и Angular Animations . Кроме того, вы можете выбрать любую из готовых или пользовательских тем по мере необходимости.

4

Нажмите Enter, чтобы выбрать тему.

5

Выберите Yтипографику углового материала.

6

Выберите Yдля анимации.

7

И наш пакет Angular Material Package полностью установлен. Давайте перейдем к нашему проекту и создадим контент.

Мы удалим все в нашем , app.component.htmlза исключением <router-outlet></router-outlet>того, что материал автоматически генерируется Angular, и мы изменим его.

Создайте наш контент

Чтобы использовать компоненты Angular Material в приложении, нам нужно импортировать отдельные компоненты в файл app.module.ts file. Допустим, мы хотим отобразить счетчик прогресса в нашем приложении; все, что нам нужно сделать, это импортировать компонент MatProgressSpinnerModule app.module.tsниже:

import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';

@NgModule ({
  imports: [
    MatProgressSpinnerModule,
  ]
})
class AppModule {}

Для больших приложений следует создать отдельный файл; скажем material.module.ts, и импортируйте все отдельные компоненты, затем импортируйте модуль материала в app.module.ts. Это помогает нашему коду быть СУХИМ («Не повторяйтесь»), особенно когда нам нужно более одного компонента Angular Material. Добавьте <mat-spinner>тег к app.component.htmlследующему:

<mat-spinner color='warn'></mat-spinner>

Затем после этого запустите локальный сервер разработки:

ng serve

8

Создать компонент материала

Создадим несколько компонентов.

Компонент панели инструментов

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

<mat-toolbar color="primary">
    <span>My Angular Material App</span>
</mat-toolbar>

9

Карточный компонент

A card— это контейнер для контента, который сочетает в себе текст, графику и действия по одной теме. Самая простая карта нуждается только в <mat-card>элементе, наполненном контентом. Наш компонент карты будет иметь заголовок и подзаголовок, изображение, абзац и описание.

<mat-card class="card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Mercedes-Benz 360c</mat-card-title>
    <mat-card-subtitle>Automobile</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://images.theconversation.com/files/274334/original/file-20190514-60570-gfti2h.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop" alt="Photo of a Mercedes-Benz">
  <mat-card-content>
    <p>
      The unique 360-degree view feature on CarDekho lets you explore a car from each and every angle on your mobile device.
      Take a detailed tour of a car's exterior and interior without having to visit a showroom! For the best experience,
        download the CarDekho app.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

10

Компонент кнопки

Нативные элементы «кнопка» или «а», дополненные стилем Material Design и чернильной рябью, составляют « Кнопки углового материала ». Итак, мы добавим различные кнопки в соответствии с нашим проектом.

<section>
  <div class="example-button-row">
    <button mat-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-stroked-button color="accent">Accent</button>
    <button mat-flat-button color="warn">Warn</button>
    <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
        <mat-icon>open_in_new</mat-icon>
      </button>
    <div class="example-button-container">
        <button mat-fab disabled aria-label="Example icon button with a heart icon">
          <mat-icon>favorite</mat-icon>
        </button>
      </div>
  </div>
</section>

11

Компонент Progressive Bar

Наш компонент Progressive Bar показывает активность и прогресс в виде горизонтального индикатора выполнения. Индикатор выполнения поддерживает четыре режима работы: определенный, неопределенный, буфер и запрос. В этом разделе мы рассмотрим использование неопределенного знака всякий раз, когда пользователю нужно подождать, пока что-то завершится, и нет необходимости указывать, сколько времени это займет.

<mat-progress-bar mode="indeterminate"></mat-progress-bar>

11б

Поле формы/ средство выбора даты

Компонент поля формы — это компонент, который применяет популярные стили текстового поля, такие как подчеркивание, плавающая метка и сообщения-подсказки, к нескольким компонентам Angular Material. В то же время Datepicker состоит из ввода текста и всплывающего окна календаря, соединенных свойством Datepicker текстового ввода.

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

двенадцатый

Собираем все вместе

После долгих объяснений давайте объединим все, что мы обсуждали в нашей статье, чтобы создать что-то значимое для глаз.

Создать компонент

Создайте компонент с помощью Angular CLI

  • Бежатьng generate component home
  • Настраиваем маршруты в нашей домашней папке; замените пустые маршруты на app.routing.module.ts:
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full'}
];

Эти процедуры создадут компонент с именем Homeи назначат его домашней страницей. Запустите ng serve, чтобы скомпилировать приложение и увидеть текстHome Works!

Добавьте компоненты Angular Material

Добавьте компоненты углового материала вhome.component.html

<mat-card class="card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Mercedes-Benz 360c</mat-card-title>
    <mat-card-subtitle>Automobile</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://images.theconversation.com/files/274334/original/file-20190514-60570-gfti2h.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop" alt="Photo of a Mercedes-Benz">
  <mat-card-content>
    <p>
      The unique 360-degree view feature on CarDekho lets you explore a car from each and every angle on your mobile device.
      Take a detailed tour of a car's exterior and interior without having to visit a showroom! For the best experience,
        download the CarDekho app.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

<div class="flex-container">
  <div>
      <button mat-raised-button color="primary"> Primary</button>
      <button mat-raised-button color="accent"> Accent</button>
      <button mat-stroked-button>Basic</button>
      <button mat-stroked-button color="primary">Primary</button>
  </div>
  <mat-form-field>
      <mat-label>Choose a date</mat-label>
      <input matInput [matDatepicker]="picker">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <mat-checkbox>Check me!</mat-checkbox>
  <mat-slider></mat-slider>
</div>

Добавить основные стили

Мы добавим основные стили CSS FlexBox для создания интервалов на нашей домашней странице. Вы можете найти код на странице Github .

13

Вывод

С помощью Angular Material мы могли создать интерактивную веб-страницу, как мы видим выше. Это говорит нам о том, что разработчики могут создавать быстрые проекты, привлекательные, отзывчивые и интуитивно понятные в глазах пользователей во всех областях разработки. Чтобы посмотреть наш исходный код, нажмите на ссылку Github .

Ссылка: https://blog.openreplay.com/getting-started-with-angular-material-ui

#angular #angularjs #javascript #ui

Как начать работу с пользовательским интерфейсом Angular Material
Thierry  Perret

Thierry Perret

1659112882

Comment Démarrer Avec Angular Material UI

Angular Material est une bibliothèque de composants d'interface utilisateur (UI) que les développeurs utilisent dans leurs projets Angular pour accélérer le processus de développement d'une interface utilisateur élégante et compatible. Il offre aux développeurs des composants d'interface utilisateur fonctionnels et élégants tels que des entrées, des tableaux de données, des cartes et bien plus encore. Ses composants aident à créer des applications/pages Web fonctionnelles, compatibles et captivantes et des sites Web réactifs concernant la durabilité, la polyvalence et la qualité de la conception.

Pourquoi Angular Material UI ?

Examinons l'importance de Angular Material dans nos projets pour mieux comprendre pourquoi il est essentiel au framework Angular.

  • Ses composants sont conçus pour qu'un site puisse s'adapter à n'importe quelle taille d'écran.
  • Il s'intègre facilement aux projets angulaires car il est construit avec une structure angulaire.
  • Il peut être intégré à une application angulaire nouvelle ou existante quelle que soit la version.
  • Il fournit des outils aux développeurs pour construire/personnaliser leurs composants.
  • Il accélère le processus de développement de la création de composants d'interface utilisateur à partir de zéro.

Voici quelques caractéristiques du matériau angulaire :

  • Le matériau angulaire se compose de CSS standard.
  • Il s'agit d'un navigateur multiplateforme et peut être utilisé pour créer un composant réutilisable.
  • Il a une conception réactive intégrée.
  • Il inclut la dernière version des composants de l'interface utilisateur : boutons, cases à cocher et champ de formulaire, conçus pour suivre les concepts de conception de matériaux angulaires.
  • Il fournit des fonctionnalités spécialisées et avancées telles qu'une barre d'outils, un balayage, une navigation latérale, des cartes, une numérotation rapide et de nombreuses autres fonctionnalités intéressantes.

Alternatives à l'interface utilisateur de matériau angulaire

Lorsque nous parlons d'alternatives, nous parlons d'autres bibliothèques de composants d'interface utilisateur que nous pouvons utiliser à la place de Angular Material. Voici des alternatives possibles et viables.

Ignite UI for Angular est une collection complète de widgets, de composants, de kits d'interface utilisateur et de directives d'accompagnement basés sur le matériel pour Angular qui permet aux programmeurs de créer les applications les plus avancées et les plus performantes pour les navigateurs contemporains, les expériences mobiles et les PWA.

Bootstrap est une bibliothèque open-source qui propose quelques widgets Angular natifs réalisés avec Bootstrap 4 CSS. Comme vous le savez probablement déjà, l'un des frameworks CSS les plus appréciés, Bootstrap, est utilisé pour créer des applications élégantes et contemporaines. Il comprend des bibliothèques pour HTML, CSS et JavaScript. Cependant, "ng-bootstrap" nous fournit la méthode idéale à utiliser dans nos applications angulaires sans aucun fichier JS. Auparavant, pour utiliser les frameworks Bootstrap dans l'application Angular, nous aurions dû utiliser le CSS bootstrap et ses fichiers JavaScript.

PrimeNG Une bibliothèque de composants d'interface utilisateur alternative créée par PrimeFaces. Il fournit une variété de thèmes prédéfinis et d'éléments d'interface utilisateur pour la présentation des données, les entrées de formulaire, les menus, les graphiques, les superpositions et d'autres utilisations. PrimeNG propose une large gamme de composants, notamment des tableaux de données, des listes déroulantes, des sélections multiples, des messages de notification, des accordéons, des fils d'Ariane et d'autres composants d'entrée qui répondraient à la majorité des exigences de l'interface utilisateur de votre application. Par conséquent, l'inclusion de bibliothèques distinctes pour diverses exigences d'interface utilisateur ne serait pas nécessaire.

Démarrage de notre projet

Pour les débutants qui n'ont jamais utilisé Angular auparavant ou qui essaient pour la première fois le framework avant de commencer à créer notre projet, nous devons configurer notre environnement et pour ce faire, nous devons installer la CLI à l'aide du gestionnaire de packages npm avec les éléments suivants commande.

npm install -g @angular/cli

Une fois cela fait, nous passons à la création/construction de notre projet. n/b : nous n'avons besoin d'exécuter la commande qu'une seule fois. Après cela, nous pouvons commencer à créer nos projets. Exécutez ng new my-appdans la ligne de commande, en remplaçant my-apppar le nom de votre application.

première

Sélectionnez Ypour le routage.

2

Sélectionnez CSSpour les styles.

Après tout cela, lancez la commande suivante :

cd <your-app-name>
ng add @angular/material

3

Sélectionnez Ypour continuer.

La ng addcommande installera Angular Material , le Component Dev Kit (CDK) et Angular Animations . En outre, vous devez choisir l'un des thèmes prédéfinis ou personnalisés selon vos besoins.

4

Cliquez Enterpour sélectionner votre thème.

5

Sélectionnez Ypour la typographie de matériau angulaire.

6

Sélectionnez Ypour les animations.

sept

Et notre package de matériel angulaire est entièrement installé. Passons à notre projet et créons du contenu.

Nous supprimerons tout dans notre app.component.htmlsauf <router-outlet></router-outlet>puisque le contenu matériel est généré automatiquement par Angular, et nous le modifierons.

Créer notre contenu

Pour utiliser les composants Angular Material dans l'application, nous devons importer les composants individuels dans le fichier app.module.ts file. Disons que nous voulons afficher Progress Spinner dans notre application. tout ce que nous avons à faire est d'importer le composant MatProgressSpinnerModule dans notre app.module.tsci-dessous :

import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';

@NgModule ({
  imports: [
    MatProgressSpinnerModule,
  ]
})
class AppModule {}

Pour les applications plus importantes, vous devez créer un fichier séparé ; disons material.module.ts, et importez tous les composants individuels, puis importez le module de matériau dans app.module.ts. Cela aide notre code à être DRY ("Ne vous répétez pas"), en particulier lorsque nous avons besoin de plus d'un composant Angular Material. Ajoutez la <mat-spinner>balise ci- app.component.htmldessous :

<mat-spinner color='warn'></mat-spinner>

Ensuite, lancez votre serveur de développement local :

ng serve

8

Générer un composant de matériau

Créons quelques composants.

Un composant de barre d'outils

Un composant de barre d'outils est un endroit où les en-têtes, les titres ou les actions peuvent être placés. La plupart du temps, une barre d'outils avec une seule ligne et le titre du programme seront ajoutés en haut de votre application. Créons un composant d'en-tête de barre d'outils pour notre projet.

<mat-toolbar color="primary">
    <span>My Angular Material App</span>
</mat-toolbar>

9

Un composant de carte

A cardest un conteneur de contenu qui mélange du texte, des graphiques et des activités autour d'un même thème. La carte la plus simple n'a besoin que d'un <mat-card>élément rempli de contenu. Notre composant de carte aura un titre et un sous-titre, une image, un paragraphe et une description.

<mat-card class="card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Mercedes-Benz 360c</mat-card-title>
    <mat-card-subtitle>Automobile</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://images.theconversation.com/files/274334/original/file-20190514-60570-gfti2h.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop" alt="Photo of a Mercedes-Benz">
  <mat-card-content>
    <p>
      The unique 360-degree view feature on CarDekho lets you explore a car from each and every angle on your mobile device.
      Take a detailed tour of a car's exterior and interior without having to visit a showroom! For the best experience,
        download the CarDekho app.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

Dix

Un composant de bouton

Les éléments natifs "bouton" ou "a" complétés par le style Material Design et les ondulations d'encre constituent les " boutons de matériau angulaires ". Nous allons donc ajouter des variétés de boutons en fonction de notre projet.

<section>
  <div class="example-button-row">
    <button mat-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-stroked-button color="accent">Accent</button>
    <button mat-flat-button color="warn">Warn</button>
    <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
        <mat-icon>open_in_new</mat-icon>
      </button>
    <div class="example-button-container">
        <button mat-fab disabled aria-label="Example icon button with a heart icon">
          <mat-icon>favorite</mat-icon>
        </button>
      </div>
  </div>
</section>

11

Un composant de barre progressive

Notre composant de barre progressive affiche l'activité et la progression sous la forme d'une barre de progression horizontale. La barre de progression prend en charge quatre modes de fonctionnement : déterminé, indéterminé, tampon et enquête. Dans cette section, nous envisagerons d'utiliser le signe indéterminé chaque fois que l'utilisateur doit attendre pendant que quelque chose se termine, et il n'est pas nécessaire de spécifier combien de temps cela prendra.

<mat-progress-bar mode="indeterminate"></mat-progress-bar>

11b

Un champ de formulaire/sélecteur de date

Le composant de champ de formulaire est un composant qui applique des styles de champ de texte populaires tels que le soulignement, l'étiquette flottante et les messages d'indication à plusieurs composants de matériau angulaire. En même temps, le Datepicker se compose d'une entrée de texte et d'une fenêtre contextuelle de calendrier jointes par la propriété Datepicker de l'entrée de texte.

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

douzième

Tout mettre ensemble

Après de nombreuses explications, combinons tout ce dont nous avons discuté dans notre article pour produire quelque chose de significatif pour les yeux.

Générer un composant

Générer un composant à l'aide d' Angular CLI

  • Courirng generate component home
  • Configurez les itinéraires dans notre dossier personnel ; remplacez les routes vides dans app.routing.module.tspar :
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full'}
];

Ces procédures créeront un composant appelé Homeet le définiront comme page d'accueil. Exécuter ng servepour compiler l'application et voir le texteHome Works!

Ajouter des composants de matériau angulaire

Ajouter des composants de matériau angulaires àhome.component.html

<mat-card class="card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Mercedes-Benz 360c</mat-card-title>
    <mat-card-subtitle>Automobile</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://images.theconversation.com/files/274334/original/file-20190514-60570-gfti2h.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop" alt="Photo of a Mercedes-Benz">
  <mat-card-content>
    <p>
      The unique 360-degree view feature on CarDekho lets you explore a car from each and every angle on your mobile device.
      Take a detailed tour of a car's exterior and interior without having to visit a showroom! For the best experience,
        download the CarDekho app.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

<div class="flex-container">
  <div>
      <button mat-raised-button color="primary"> Primary</button>
      <button mat-raised-button color="accent"> Accent</button>
      <button mat-stroked-button>Basic</button>
      <button mat-stroked-button color="primary">Primary</button>
  </div>
  <mat-form-field>
      <mat-label>Choose a date</mat-label>
      <input matInput [matDatepicker]="picker">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <mat-checkbox>Check me!</mat-checkbox>
  <mat-slider></mat-slider>
</div>

Ajouter des styles de base

Nous ajouterons des styles CSS FlexBox de base pour créer un espacement sur notre page d'accueil. Vous pouvez trouver le code sur la page Github .

13

Conclusion

Avec l'aide de Angular Material , nous avons pu créer une page Web interactive, comme nous pouvons le voir ci-dessus. Cela nous indique que les développeurs peuvent créer des projets rapides qui sont attrayants, réactifs et intuitifs aux yeux des utilisateurs dans tous les espaces de développement. Pour notre code source, cliquez sur le lien Github .

Lien : https://blog.openreplay.com/getting-started-with-angular-material-ui

#angular #angularjs #javascript #ui

Comment Démarrer Avec Angular Material UI
山田  千代

山田 千代

1659102004

如何開始使用 Angular Material UI

Angular Material是一個用戶界面 (UI) 組件庫,開發人員在他們的 Angular 項目中使用它來加快開發過程,以獲得時尚且兼容的用戶界面。它為開發人員提供了功能強大且優雅的 UI 組件,例如輸入、數據表、卡片等等。它的組件有助於構建功能性、兼容和引人入勝的 Web 應用程序/頁面和響應式網站,涉及設計耐久性、多功能性和質量。

為什麼選擇 Angular 材質 UI?

讓我們檢查一下 Angular Material 在我們項目中的重要性,以更好地理解為什麼它對 Angular 框架至關重要。

  • 它的組件經過精心設計,使網站可以適應任何屏幕尺寸。
  • 它很容易與 Angular 項目集成,因為它是用 Angular 結構構建的。
  • 不管版本如何,它都可以與新的或現有的 Angular 應用程序合併。
  • 它為開發人員提供構建/定制其組件的工具。
  • 它加快了從頭開始構建 UI 組件的開發過程。

以下是 Angular Material 的一些特性:

  • Angular Material 由標準 CSS 組成。
  • 它是一個跨平台瀏覽器,可用於創建可重用組件。
  • 它內置了響應式設計。
  • 它包括最新版本的 UI 組件:按鈕、複選框和表單字段,其形狀遵循 Angular Material Design 概念。
  • 它提供了專門和高級的功能,例如工具欄、滑動、側導航、卡片、快速撥號以及更多令人興奮的功能。

Angular Material UI 的替代品

當我們談論替代品時,我們談論的是可以用來代替 Angular Material 的其他 UI 組件庫。以下是可能的、可行的替代方案。

Ignite UI for Angular 是基於 Material 的 UI 小部件、組件、UI 工具包和 Angular 隨附指令的綜合集合,使程序員能夠為當代瀏覽器、移動體驗和 PWA 創建最前沿、高性能的應用程序。

Bootstrap是一個開源庫,它提供了一些使用 Bootstrap 4 CSS 製作的原生 Angular 小部件。您可能已經知道,最受歡迎的 CSS 框架之一 Bootstrap 用於創建時尚、現代的應用程序。它包括用於 HTML、CSS 和 JavaScript 的庫。但是,“ng-bootstrap”為我們提供了在沒有任何 JS 文件的情況下在 Angular 應用程序中使用的理想方法。以前,要在 Angular 應用程序中使用 Bootstrap 框架,我們必須使用 bootstrap CSS 及其 JavaScript 文件。

PrimeNG PrimeFaces 創建的替代 UI 組件庫。它為數據表示、表單輸入、菜單、圖表、覆蓋和其他用途提供了各種預構建的主題和 UI 元素。PrimeNG 提供了廣泛的組件,包括數據表、下拉菜單、多選、通知消息、折疊式、麵包屑和其他輸入組件,可以滿足您應用程序的大部分 UI 要求。因此,沒有必要為各種 UI 要求包括不同的庫。

啟動我們的項目

對於之前沒有使用過Angular的初學者,或者在我們開始創建項目之前這是他們第一次嘗試框架,我們需要設置我們的環境,為此我們需要使用 npm 包管理器安裝CLI,並使用以下內容命令。

npm install -g @angular/cli

完成後,我們將繼續創建/構建我們的項目。n/b:我們只需要運行一次命令。之後,我們就可以開始創建我們的項目了。ng new my-app在命令行中運行,替換my-app為您的應用程序的名稱。

第一的

選擇Y路由。

2

選擇CSS樣式。

畢竟,運行以下命令:

cd <your-app-name>
ng add @angular/material

3

選擇Y繼續。

ng add命令將安裝Angular MaterialComponent Dev Kit (CDK)Angular Animations。此外,您將根據需要選擇任何預建或自定義主題。

4

單擊Enter以選擇您的主題。

5

選擇YAngular Material Typography。

6

選擇Y動畫。

7

我們的 Angular Material Package 已完全安裝。讓我們繼續我們的項目並創建一些內容。

我們將刪除我們的所有內容app.component.html<router-outlet></router-outlet>因為材料內容是由 Angular 自動生成的,我們將對其進行更改。

創建我們的內容

要在應用程序中使用Angular Material 組件,我們需要在app.module.ts file. 假設我們想在我們的應用程序中顯示進度微調器;我們所要做的就是將 MatProgressSpinnerModule 組件導入到我們的app.module.ts下面:

import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';

@NgModule ({
  imports: [
    MatProgressSpinnerModule,
  ]
})
class AppModule {}

對於較大的應用程序,您應該創建一個單獨的文件;讓我們說material.module.ts,並導入所有單獨的組件,然後將材料模塊導入app.module.ts. 這有助於我們的代碼變得 DRY(“不要重複自己”),尤其是當我們需要多個 Angular Material 組件時。將<mat-spinner>標籤添加到app.component.html以下內容:

<mat-spinner color='warn'></mat-spinner>

然後,運行本地開發服務器:

ng serve

8

生成材質組件

讓我們創建一些組件。

工具欄組件

工具欄組件是可以放置標題、標題或操作的地方。大多數時候,只有一行和程序標題的工具欄將添加到應用程序的頂部。讓我們為我們的項目創建一個工具欄標題組件。

<mat-toolbar color="primary">
    <span>My Angular Material App</span>
</mat-toolbar>

9

卡片組件

Acard是一個內容容器,它圍繞一個主題混合了文本、圖形和活動。最直接的卡片只需要一個內容填充的<mat-card>元素。我們的卡片組件將具有標題和副標題、圖像、段落和描述。

<mat-card class="card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Mercedes-Benz 360c</mat-card-title>
    <mat-card-subtitle>Automobile</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://images.theconversation.com/files/274334/original/file-20190514-60570-gfti2h.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop" alt="Photo of a Mercedes-Benz">
  <mat-card-content>
    <p>
      The unique 360-degree view feature on CarDekho lets you explore a car from each and every angle on your mobile device.
      Take a detailed tour of a car's exterior and interior without having to visit a showroom! For the best experience,
        download the CarDekho app.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

十

一個按鈕組件

原生“按鈕”或“a”元素輔以 Material Design 樣式和墨水波紋,構成了“ Angular Material Buttons ”。因此,我們將添加各種按鈕以適應我們的項目。

<section>
  <div class="example-button-row">
    <button mat-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-stroked-button color="accent">Accent</button>
    <button mat-flat-button color="warn">Warn</button>
    <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
        <mat-icon>open_in_new</mat-icon>
      </button>
    <div class="example-button-container">
        <button mat-fab disabled aria-label="Example icon button with a heart icon">
          <mat-icon>favorite</mat-icon>
        </button>
      </div>
  </div>
</section>

11

進度條組件

我們的進度條組件將活動和進度顯示為水平進度條。進度條支持四種操作模式:確定、不確定、緩沖和查詢。在本節中,我們將考慮在用戶需要等待某事完成時使用不確定符號,並且沒有必要指定需要多長時間。

<mat-progress-bar mode="indeterminate"></mat-progress-bar>

11b

表單字段/日期選擇器

表單字段組件是將流行的文本字段樣式(如下劃線、浮動標籤和提示消息)應用於多個 Angular Material 組件的組件。同時,Datepicker包含一個文本輸入和一個由文本輸入的 Datepicker 屬性連接的日曆彈出窗口。

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

第十二

放在一起

經過大量的解釋,讓我們將我們在文章中討論的所有內容結合起來,產生一些對眼睛有意義的東西。

生成組件

使用Angular CLI生成組件

  • ng generate component home
  • 在我們的主文件夾中設置路線;將空路由替換為app.routing.module.ts
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full'}
];

這些過程將創建一個名為的組件Home並將其設置為主頁。運行ng serve編譯應用程序並查看文本Home Works!

添加角度材質組件

Angular 材質組件添加到home.component.html

<mat-card class="card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Mercedes-Benz 360c</mat-card-title>
    <mat-card-subtitle>Automobile</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://images.theconversation.com/files/274334/original/file-20190514-60570-gfti2h.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop" alt="Photo of a Mercedes-Benz">
  <mat-card-content>
    <p>
      The unique 360-degree view feature on CarDekho lets you explore a car from each and every angle on your mobile device.
      Take a detailed tour of a car's exterior and interior without having to visit a showroom! For the best experience,
        download the CarDekho app.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

<div class="flex-container">
  <div>
      <button mat-raised-button color="primary"> Primary</button>
      <button mat-raised-button color="accent"> Accent</button>
      <button mat-stroked-button>Basic</button>
      <button mat-stroked-button color="primary">Primary</button>
  </div>
  <mat-form-field>
      <mat-label>Choose a date</mat-label>
      <input matInput [matDatepicker]="picker">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <mat-checkbox>Check me!</mat-checkbox>
  <mat-slider></mat-slider>
</div>

添加基本​​樣式

我們將添加基本的 CSS FlexBox 樣式以在我們的主頁上創建間距。您可以在Github頁面上找到代碼。

13

結論

在Angular Material的幫助下,我們可以構建一個交互式網頁,如上所示。這告訴我們,開發人員可以在所有開發空間中構建在用戶眼中有吸引力、響應迅速且直觀的快速項目。對於我們的源代碼,請單擊Github 鏈接

鏈接:https ://blog.openreplay.com/getting-started-with-angular-material-ui

#angular #angularjs #javascript #ui

如何開始使用 Angular Material UI
Hans  Marvin

Hans Marvin

1659091158

How to Get Started with Angular Material UI

Angular Material is a user interface (UI) component library that developers use in their Angular projects in terms of hastening the development process for a stylish and compatible user interface. It offers developers functional and elegant UI components like Inputs, Data Tables, Cards, and much more. Its components help build functional, compatible, and captivating web applications/pages and responsive websites regarding Design Durability, Versatility, and Quality.

In this tutorial, We'll share How to Get Started with Angular Material UI for Beginners

See More at: https://blog.openreplay.com/getting-started-with-angular-material-ui

#angular #angularjs #javascript

How to Get Started with Angular Material UI
Hoang  Kim

Hoang Kim

1659080030

Cách Bắt đầu Với Angular Material UI

Angular Material là thư viện thành phần giao diện người dùng (UI) mà các nhà phát triển sử dụng trong các dự án Angular của họ nhằm đẩy nhanh quá trình phát triển để có giao diện người dùng phong cách và tương thích. Nó cung cấp cho các nhà phát triển các thành phần UI thanh lịch và chức năng như Đầu vào, Bảng dữ liệu, Thẻ, v.v. Các thành phần của nó giúp xây dựng các ứng dụng / trang web chức năng, tương thích và hấp dẫn và các trang web đáp ứng liên quan đến Độ bền thiết kế, Tính linh hoạt và Chất lượng.

Tại sao Angular Material UI?

Hãy xem xét tầm quan trọng của Angular Material trong các dự án của chúng ta để hiểu rõ hơn tại sao nó lại cần thiết cho Angular framework.

  • Các thành phần của nó được thiết kế để một trang web có thể điều chỉnh theo bất kỳ kích thước màn hình nào.
  • Nó tích hợp dễ dàng với các dự án Angular vì nó được xây dựng với cấu trúc Angular.
  • Nó có thể được kết hợp với Ứng dụng Angular mới hoặc hiện có bất chấp phiên bản.
  • Nó cung cấp các công cụ cho các nhà phát triển để xây dựng / tùy chỉnh các thành phần của họ.
  • Nó tăng tốc quá trình phát triển xây dựng các thành phần giao diện người dùng từ đầu.

Dưới đây là một vài tính năng của Angular Material:

  • Vật liệu Angular bao gồm CSS tiêu chuẩn.
  • Nó là một trình duyệt đa nền tảng và có thể được sử dụng để tạo một thành phần có thể tái sử dụng.
  • Nó có thiết kế đáp ứng được tích hợp sẵn.
  • Nó bao gồm phiên bản mới nhất của các thành phần giao diện người dùng: các nút, hộp kiểm và trường biểu mẫu, được định hình để tuân theo các khái niệm Thiết kế Vật liệu Góc.
  • Nó cung cấp các tính năng chuyên biệt và nâng cao như thanh công cụ, vuốt, điều hướng bên, thẻ, quay số nhanh và nhiều tính năng thú vị khác.

Các lựa chọn thay thế cho giao diện người dùng vật liệu Angular

Khi chúng ta nói về các lựa chọn thay thế, chúng ta đang nói về các thư viện thành phần UI khác mà chúng ta có thể sử dụng thay cho Angular Material. Sau đây là những lựa chọn thay thế khả thi, khả thi.

Ignite UI cho Angular là một bộ sưu tập toàn diện các widget, thành phần, bộ giao diện người dùng dựa trên Vật liệu và các chỉ thị đi kèm cho Angular cho phép các lập trình viên tạo ra các ứng dụng tiên tiến nhất, hiệu suất cao nhất cho các trình duyệt hiện đại, trải nghiệm di động và PWA.

Bootstrap là một thư viện mã nguồn mở cung cấp một số tiện ích Angular gốc được tạo bằng Bootstrap 4 CSS. Như bạn có thể đã biết, một trong những framework CSS được yêu thích nhất, Bootstrap, được sử dụng để tạo các ứng dụng hiện đại, kiểu dáng đẹp. Nó bao gồm các thư viện cho HTML, CSS và JavaScript. Tuy nhiên, “ng-bootstrap” cung cấp cho chúng tôi phương pháp lý tưởng để sử dụng trong các ứng dụng Angular của chúng tôi mà không cần bất kỳ tệp JS nào. Trước đây, để sử dụng các khung Bootstrap trong ứng dụng Angular, chúng tôi sẽ phải sử dụng bootstrap CSS và các tệp JavaScript của nó.

PrimeNG Một thư viện thành phần giao diện người dùng thay thế được tạo bởi PrimeFaces. Nó cung cấp nhiều chủ đề và phần tử giao diện người dùng được tạo sẵn để trình bày dữ liệu, đầu vào biểu mẫu, menu, biểu đồ, lớp phủ và các mục đích sử dụng khác. PrimeNG cung cấp một loạt các thành phần, bao gồm bảng dữ liệu, trình đơn thả xuống, nhiều lựa chọn, tin nhắn thông báo, accordions, breadcrumbs và các thành phần đầu vào khác sẽ đáp ứng phần lớn các yêu cầu về giao diện người dùng của ứng dụng của bạn. Do đó, việc bao gồm các thư viện riêng biệt cho các yêu cầu giao diện người dùng khác nhau sẽ không cần thiết.

Khởi động dự án của chúng tôi

Đối với những người mới bắt đầu chưa sử dụng Angular trước đây hoặc đây là lần đầu tiên họ dùng thử framework trước khi bắt đầu tạo dự án của mình, chúng tôi cần thiết lập môi trường của mình và để làm điều đó, chúng tôi cần cài đặt CLI bằng trình quản lý gói npm với những điều sau yêu cầu.

npm install -g @angular/cli

Khi điều này được thực hiện, chúng tôi chuyển sang tạo / xây dựng dự án của mình. n / b: chúng ta chỉ cần chạy lệnh một lần. Sau đó, chúng ta có thể bắt đầu tạo các dự án của mình. Chạy ng new my-apptrong dòng lệnh, thay thế my-appbằng tên ứng dụng của bạn.

1

Chọn Yđể định tuyến.

2

Chọn CSSphong cách.

Sau tất cả những điều đó, hãy chạy lệnh sau:

cd <your-app-name>
ng add @angular/material

3

Chọn Yđể tiếp tục.

Lệnh ng addsẽ cài đặt Angular Material , Component Dev Kit (CDK)Angular Animations . Ngoài ra, bạn có thể chọn bất kỳ chủ đề nào được tạo sẵn hoặc tùy chỉnh theo yêu cầu.

4

Nhấp Enterđể chọn chủ đề của bạn.

5

Chọn Ycho Kiểu chữ Vật liệu Góc.

6

Chọn Ycho Ảnh động.

7

Và Gói Vật liệu Angular của chúng tôi đã được cài đặt đầy đủ. Hãy chuyển sang dự án của chúng tôi và tạo một số nội dung.

Chúng tôi sẽ xóa mọi thứ trong app.component.htmlngoại trừ của chúng tôi <router-outlet></router-outlet>vì nội dung tài liệu được Angular tạo tự động và chúng tôi sẽ thay đổi nội dung đó.

Tạo nội dung của chúng tôi

Để sử dụng các thành phần Angular Material trong ứng dụng, chúng ta cần nhập các thành phần riêng lẻ trong app.module.ts file. Giả sử chúng tôi muốn hiển thị Progress spinner trong ứng dụng của mình; tất cả những gì chúng ta phải làm là nhập thành phần MatProgressSpinnerModule vào app.module.tsbên dưới:

import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';

@NgModule ({
  imports: [
    MatProgressSpinnerModule,
  ]
})
class AppModule {}

Đối với các ứng dụng lớn hơn, bạn nên tạo một tệp riêng biệt; chúng ta hãy nói material.module.tsvà nhập tất cả các thành phần riêng lẻ, sau đó nhập mô-đun vật liệu vào app.module.ts. Điều này giúp mã của chúng tôi trở nên KHÔ (“Đừng lặp lại chính bạn”), đặc biệt khi chúng tôi cần nhiều hơn một thành phần Angular Material. Thêm <mat-spinner>thẻ vào app.component.htmlbên dưới:

<mat-spinner color='warn'></mat-spinner>

Sau đó, chạy máy chủ nhà phát triển cục bộ của bạn:

ng serve

8

Tạo thành phần vật liệu

Hãy tạo một số thành phần.

Thành phần Thanh công cụ

Thành phần Thanh công cụ là nơi có thể đặt tiêu đề, tiêu đề hoặc hành động. Hầu hết thời gian, thanh công cụ chỉ với một hàng và tiêu đề chương trình sẽ được thêm vào đầu ứng dụng của bạn. Hãy tạo một thành phần tiêu đề thanh công cụ cho dự án của chúng ta.

<mat-toolbar color="primary">
    <span>My Angular Material App</span>
</mat-toolbar>

9

Một thành phần thẻ

A cardlà vùng chứa cho nội dung kết hợp văn bản, đồ họa và các hoạt động xung quanh một chủ đề duy nhất. Thẻ đơn giản nhất chỉ cần một <mat-card>phần tử chứa đầy nội dung. Thành phần thẻ của chúng tôi sẽ có tiêu đề và phụ đề, hình ảnh, đoạn văn và mô tả.

<mat-card class="card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Mercedes-Benz 360c</mat-card-title>
    <mat-card-subtitle>Automobile</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://images.theconversation.com/files/274334/original/file-20190514-60570-gfti2h.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop" alt="Photo of a Mercedes-Benz">
  <mat-card-content>
    <p>
      The unique 360-degree view feature on CarDekho lets you explore a car from each and every angle on your mobile device.
      Take a detailed tour of a car's exterior and interior without having to visit a showroom! For the best experience,
        download the CarDekho app.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

10

Một thành phần nút

Các phần tử “nút” hoặc “a” tự nhiên được bổ sung với kiểu dáng Material Design và các gợn mực là những gì tạo thành “ Các nút vật liệu góc cạnh ”. Vì vậy, chúng tôi sẽ thêm nhiều loại nút để phù hợp với dự án của chúng tôi.

<section>
  <div class="example-button-row">
    <button mat-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-stroked-button color="accent">Accent</button>
    <button mat-flat-button color="warn">Warn</button>
    <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
        <mat-icon>open_in_new</mat-icon>
      </button>
    <div class="example-button-container">
        <button mat-fab disabled aria-label="Example icon button with a heart icon">
          <mat-icon>favorite</mat-icon>
        </button>
      </div>
  </div>
</section>

11

Thành phần thanh lũy tiến

Thành phần thanh tiến trình của chúng tôi hiển thị hoạt động và tiến trình dưới dạng thanh tiến trình ngang. Thanh tiến trình hỗ trợ bốn chế độ hoạt động: xác định, không xác định, bộ đệm và yêu cầu. Trong phần này, chúng tôi sẽ xem xét việc sử dụng dấu hiệu không xác định bất cứ khi nào người dùng cần đợi trong khi một thứ gì đó hoàn thành và không cần thiết phải chỉ định thời gian sẽ mất bao lâu.

<mat-progress-bar mode="indeterminate"></mat-progress-bar>

11b

Trường biểu mẫu / Bộ chọn ngày

Thành phần Trường Biểu mẫu là một thành phần áp dụng các kiểu trường Văn bản phổ biến như gạch dưới, nhãn nổi và thông báo gợi ý cho một số thành phần Vật liệu góc. Đồng thời, Datepicker bao gồm một đầu vào văn bản và một cửa sổ bật lên lịch được kết hợp bởi thuộc tính Datepicker của đầu vào văn bản.

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

12

Gắn kết tất cả lại với nhau

Sau nhiều lời giải thích, hãy kết hợp tất cả những gì chúng ta đã thảo luận trong bài viết của mình để tạo ra thứ gì đó có ý nghĩa đối với đôi mắt.

Tạo một thành phần

Tạo một thành phần bằng Angular CLI

  • Chạyng generate component home
  • Thiết lập các tuyến đường trong thư mục chủ của chúng tôi; thay thế các tuyến đường trống app.routing.module.tsbằng:
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full'}
];

Các thủ tục này sẽ tạo ra một thành phần được gọi Homevà đặt nó làm Trang chủ. Chạy ng serveđể biên dịch ứng dụng và xem văn bảnHome Works!

Thêm các thành phần Vật liệu góc

Thêm các thành phần vật liệu góc vàohome.component.html

<mat-card class="card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Mercedes-Benz 360c</mat-card-title>
    <mat-card-subtitle>Automobile</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://images.theconversation.com/files/274334/original/file-20190514-60570-gfti2h.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop" alt="Photo of a Mercedes-Benz">
  <mat-card-content>
    <p>
      The unique 360-degree view feature on CarDekho lets you explore a car from each and every angle on your mobile device.
      Take a detailed tour of a car's exterior and interior without having to visit a showroom! For the best experience,
        download the CarDekho app.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

<div class="flex-container">
  <div>
      <button mat-raised-button color="primary"> Primary</button>
      <button mat-raised-button color="accent"> Accent</button>
      <button mat-stroked-button>Basic</button>
      <button mat-stroked-button color="primary">Primary</button>
  </div>
  <mat-form-field>
      <mat-label>Choose a date</mat-label>
      <input matInput [matDatepicker]="picker">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <mat-checkbox>Check me!</mat-checkbox>
  <mat-slider></mat-slider>
</div>

Thêm kiểu cơ bản

Chúng tôi sẽ thêm các kiểu CSS FlexBox cơ bản để tạo khoảng cách trên Trang chủ của chúng tôi. Bạn có thể tìm thấy mã trên trang Github .

13

Sự kết luận

Với sự trợ giúp của Angular Material , chúng ta có thể xây dựng một trang web tương tác, như chúng ta thấy ở trên. Điều này cho chúng tôi biết rằng các nhà phát triển có thể xây dựng các dự án nhanh chóng hấp dẫn, đáp ứng và trực quan trong mắt người dùng trên tất cả các không gian phát triển. Đối với mã nguồn của chúng tôi, hãy nhấp vào liên kết Github .

Liên kết: https://blog.openreplay.com/getting-started-with-angular-material-ui

#angular #angularjs #javascript #ui

Cách Bắt đầu Với Angular Material UI
Nat  Grady

Nat Grady

1658380500

A Fully Featured, Self-hosted Release Server for Electron Apps

Electron Release Server    

A node web server which serves & manages releases of your Electron App, and is fully compatible with Squirrel Auto-updater (which is built into Electron).

Electron Release Server Demo

Note: Despite being advertised as a release server for Electron applications, it would work for any application using Squirrel.

If you host your project on your Github and do not need a UI for your app, then Nuts is probably what you're looking for. Otherwise, you're in the same boat as I was, and you've found the right place!

Advisory Notices

IMPORTANT:

  • The release of Angular 1.6.0 has broken all electron-release-server versions prior to 1.4.2. Please use the instructions under the Maintenance heading below to update your fork! Sorry for the inconvenience.
  • Since release 1.5.0 several models have changed to accommodate new features. Please use the instructions under Migration to update your database! Sorry for the inconvenience.

Features

  • ✨ Docker 🐳 support (thanks to EvgeneOskin)!
  • ✨ Awesome release management interface powered by AngularJS
    • Authenticates with LDAP, easy to modify to another authentication method if needed
  • ✨ Store assets on server disk, or Amazon S3 (with minor modifications)
    • Use pretty much any database for persistence, thanks to Sails & Waterline
  • ✨ Simple but powerful download urls (NOTE: when no assets are uploaded, server returns 404 by default):
    • /download/latest
    • /download/latest/:platform
    • /download/:version
    • /download/:version/:platform
    • /download/:version/:platform/:filename
    • /download/channel/:channel
    • /download/channel/:channel/:platform
    • /download/flavor/:flavor/latest
    • /download/flavor/:flavor/latest/:platform
    • /download/flavor/:flavor/:version
    • /download/flavor/:flavor/:version/:platform
    • /download/flavor/:flavor/:version/:platform/:filename
    • /download/flavor/:flavor/channel/:channel
    • /download/flavor/:flavor/channel/:channel/:platform
  • ✨ Support pre-release channels (beta, alpha, ...)
  • ✨ Support multiple flavors of your app
  • ✨ Auto-updates with Squirrel:
    • Update URLs provided:
      • /update/:platform/:version[/:channel]
      • /update/flavor/:flavor/:platform/:version[/:channel]
    • Mac uses *.dmg and *.zip
    • Windows uses *.exe and *.nupkg
  • ✨ Auto-updates with NSIS differential updates for Windows
  • ✨ Serve the perfect type of assets: .zip for Squirrel.Mac, .nupkg for Squirrel.Windows, .dmg for Mac users, ...
  • ✨ Specify date of availability for releases
  • ✨ Release notes endpoint
    • /notes/:version/:flavor?

NOTE: if you don't provide the appropriate type of file for Squirrel you won't be able to update your app since the update endpoint will not return a JSON. (.zip for Squirrel.Mac, .nupkg for Squirrel.Windows).

Deploy it / Start it

Follow our guide to deploy Electron Release Server.

Auto-updater / Squirrel

This server provides an endpoint for Squirrel auto-updater, it supports both OS X and Windows.

Documentation

Check out the documentation for more details.

Building Releases

I highly recommend using electron-builder for packaging & releasing your applications. Once you have built your app with that, you can upload the artifacts for your users right away!

Maintenance

You should keep your fork up to date with the electron-release-server master.

Doing so is simple, rebase your repo using the commands below.

git remote add upstream https://github.com/ArekSredzki/electron-release-server.git
git fetch upstream
git rebase upstream/master

Credit

This project has been built from the Sails.js up by Arek Sredzki, with inspiration from nuts.

Author: ArekSredzki
Source Code: https://github.com/ArekSredzki/electron-release-server 
License: MIT license

#electron #node #angularjs #update 

A Fully Featured, Self-hosted Release Server for Electron Apps

How Much Does It Cost To Develop An Angular Web App?

Angular JS will be the most popular web development language in 2022.

Are you planning to use AngularJS to create a website or a web application?

This article will teach you how much it costs to design a website or web app, hourly rates, factors, and the cost of employing Angularjs developers.

https://multiqos.com/how-much-does-it-cost-to-develop-an-angular-web-app-and-website

#angularjs #angularjsdevelopment #webdevelopmnet #webdeveloper #angularjsdeveloper 

How Much Does It Cost To Develop An Angular Web App?
Lawrence  Lesch

Lawrence Lesch

1656379080

Line-chart: Awesome Charts for angularJS

n3-line-chart v2

n3-line-chart is an easy-to-use JavaScript library for creating beautiful charts in AngularJS applications and it is built on top of D3.js.

n3-charts lead image

Getting started

Please note: Currently, n3-line-chart works only with D3.js version 3! In D3.js version 4, the API changed and hence breaks compatibility with many 3rd party libaries such as n3-line-chart.

You can install n3-line-chart by using the npm package manager and running following command from the terminal.

npm install n3-charts

Alternatively you can download the latest release and place the line-chart.min.js wherever you want. Please note, that you need to also download D3.js and AngularJS when installing n3-line-chart manually!

Next, you need to reference LineChart.js and LineChart.css in your index.html file.

<script src="node_modules/n3-charts/build/LineChart.js"></script>
<link rel="stylesheet" href="node_modules/n3-charts/build/LineChart.css">

Finally, you need to reference the n3-line-chart module in your AngularJS application.

angular.module('app', ['n3-line-chart'])

Here is an example how your HTML file should look like.

<!doctype html>
<html ng-app="app">
  <head>
    <!-- Reference AngularJS and D3.js -->
    <script src="node_modules/angular/angular.min.js"></script>
    <script src="node_modules/d3/d3.min.js"></script>
    <!-- Reference n3-line-chart -->
    <script src="node_modules/n3-charts/build/LineChart.js"></script>
    <link rel="stylesheet" href="node_modules/n3-charts/build/LineChart.css">

    <script type="text/javascript">
      angular.module('app', ['n3-line-chart'])
    </script>
  </head>
  <body>
    <!-- Now you can use the n3-line-chart directive -->
  </body>
</html>

Now, you can go ahead and check the examples and the complete documentation!

Looking for the previous version 1? Try using bower install n3-line-chart#1.1.12

What's new in v2?

Good question. Not that we rebuilt this just because we like building things, right ? Seriously though, v2 right now is mostly about solving v1 problems, you know, extendability and maintenance. The chart's directive lifecycle has been thought of from the very beginning, which allows better transitions and full leverage of d3.js capabilities.

Also, we now use something we call... Shoot, we dont have a name for that. Well, imagine a cake. With a bunch of fruits in it. Everything is baked in. Remove a fruit and there's a hole in the cake. No one wants a cake with air in it. That was v1. Now, imagine a pile of pancakes. Delicious, banana flavoured pancakes. Pour some maple syrup on those godly pastries. The syrup goes from one pancake to another, nothing fancy in this. Now if you remove one or two pancake, the syrup probably won't even notice. That's v2. v2's components are organized in layers and talk to each other using two powerful singletons, eventManager and factoryManager. It makes it super easy to add stuff and extend the directive's features.

Okay seriously, what's new ?

CSS styling for the entire chart Elements naming across the chart is now consistent and easy to override

Pure-HTML legend and tooltip you can pimp as much as you want Way easier to implement !

D3.js transitions for data update In v1, the entire chart was redrawn each time the data changed. V2 knows better.

Better data format The dataset has a new, more versatile format that allow unsynced data to be plotted.

Better performance due to smarter algorithms Well, actually what we were doing previously was the dumb way, this one is just the correct one.

Better options format Still WIP, though !

Contribution and Help

You can easily reach us via Gitter for discussions and questions regarding development and usage. If you got stuck, found a bug or want to share some thoughts and improvements please file an issue.

If you want to contribute, please contact us via Gitter to discuss the changes. Make sure you checkout the contribution docs and developer guidelines before. And don't be shy, we are always glad to help you with your first contributions.

Authors

n3-line-chart v2 is made with love and care by Christoph Körner & Sébastien Fragnaud.

Resource

Author: n3-charts
Source Code: https://github.com/n3-charts/line-chart 
License: MIT license

#javascript #d3 #chart #angularjs 

Line-chart: Awesome Charts for angularJS

Best Examples of Websites and Applications Built with Angular

The Angular framework is a technology stack that has helped global powerhouses in growing and succeeding.

In this essay, we will look at some of the most popular websites and apps developed with Angular technology.

https://multiqos.com/10-successful-angular-apps-examples/

#angular #angulardevelopment #angulardeveloper #angularjs #website

Best Examples of Websites and Applications Built with Angular
伊藤  直子

伊藤 直子

1652139480

AngularJSで無限スクロールを使用してリストをレンダリングする

DOMでアイテムの長いリストをレンダリングするためのより優れた動的な方法

大量のデータを処理する場合、そのデータをDOMで処理することは、効率とパフォーマンスの向上という点で常に課題です。
そのデータをDOMに読み込もうとすると、データのサイズでDOMにノードが作成され、データの長いリストでDOMとページが肥大化し始めます。

例-

 if data is an array [] with length 100<div class="example-viewport">
        <div *ngFor="let item of data" class="list">
          <h2>{{item.name}}</h2>
        </div>
      </div>As data [] has length 100, it will create 100 nodes in DOM. 

問題 -

上記の例では、長さ100のデータを取得しました。データが多いと、DOMでより多くのノードが作成され、データサイズが大きくなると、アプリケーションの速度が低下し、DOMとページが肥大化し始めます。

解決

Angular(7+)を使用すると、Material Component Development Kit(CDK)の新しい仮想スクロール動作にアクセスできます。ビューポートに表示されている場合にのみ要素をレンダリングするデータをループするためのツールを提供し、DOMでアイテムの長いリストを効率的にレンダリングするためのより優れた動的な方法を提供します。

コンポーネント開発キット(CDK)-
一般的な動作を実装するツールのセットです。これはAngular Material Libraryの一種の抽象化であり、マテリアルデザインに固有のスタイルはありません。

無限の仮想スクロールを実装しましょう

前提条件— Angular(バージョン7または7以降)、ノードバージョン11.0以降

ステップ-1-@angle/cdkパッケージを追加します

npm install @angular/cdk

ステップ-2ScrollingModuleをモジュールにインポートします

import { ScrollingModule} from '@angular/cdk/scrolling';
imports: [
  ...,
ScrollingModule
]

ステップ-3コンポーネントの内部

Wrap your looping element inside <cdk-virtual-scroll-viewport>
</cdk-virtual-scroll-viewport>use  *cdkVirtualFor instead of *Ngfor itemSize directive tells how tall(height of height) each item will be(in pixels). So, itemSize="100" means that item in the list will require 100px of height.<cdk-virtual-scroll-viewport itemSize="100">
  <li *cdkVirtualFor="let item of data">
      <!-- Print item here -->
  </li>
</cdk-virtual-scroll-viewport>

おめでとうございます。これで、基本的な無限仮想スクロールが完了しました。これにより、ページのパフォーマンスとデータの読み込みエクスペリエンスが向上します。

cdk-virtual-scrollの高度な機能を備えたボーナス情報

カスタムイベント—特定のアイテムがスクロールされたときにイベントをリッスンします

<cdk-virtual-scroll-viewport itemSize="100" (scrolledIndexChange)="scrollhandler($event)">
  </cdk-virtual-scroll-viewport>

CdkVirtualScrollViewportとそのメソッドへのアクセス

import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';@ViewChild(CdkVirtualScrollViewport)
  viewport: CdkVirtualScrollViewport;Access methods like
 this.viewport.scrollToIndex(23)

* cdkVirtualForは、テンプレートにいくつかの論理変数を提供します

<cdk-virtual-scroll-viewport itemSize="100">
  <li *cdkVirtualFor="let item of data; let index = index;
                       let count = count;
                       let first = first;
                       let last = last;
                       let even = even;
                       let odd = odd;">
      <!-- Print item here -->
  </li>
</cdk-virtual-scroll-viewport>

幸せな学習…👏👏👏

ソース:https ://hackernoon.com/render-lists-using-infinite-scroll-in-angularjs

#angularjs 

AngularJSで無限スクロールを使用してリストをレンダリングする

Renderizar Listas Usando Infinite Scroll En AngularJS

Una forma mejor y dinámica de representar largas listas de elementos en DOM

Cuando trabajamos con una gran lista de datos, manejar esos datos en DOM siempre es un desafío en términos de eficiencia y mejor rendimiento.
Cuando intentamos cargar esos datos en DOM, creará nodos en DOM con el tamaño de los datos y comenzará a inflar nuestro DOM y nuestra página con una larga lista de datos.

Ejemplo-

 if data is an array [] with length 100<div class="example-viewport">
        <div *ngFor="let item of data" class="list">
          <h2>{{item.name}}</h2>
        </div>
      </div>As data [] has length 100, it will create 100 nodes in DOM. 

Problema -

En el ejemplo anterior, hemos tomado datos de longitud 100, supongamos que tiene más datos, entonces creará más nodos en DOM, y con un aumento en el tamaño de los datos ralentizará nuestra aplicación, comenzará a inflar nuestro DOM y página.

Solución

Angular(7+) nos da acceso a un nuevo comportamiento de desplazamiento virtual en el Material Component Development Kit (CDK). Proporciona herramientas para recorrer datos que solo representan elementos cuando están visibles en la ventana gráfica, y proporciona una forma mejor y dinámica de representar listas largas de elementos en DOM de manera eficiente.

Kit de desarrollo de componentes (CDK):
es un conjunto de herramientas que implementan comportamientos comunes. Es una especie de abstracción de la Biblioteca de materiales angulares, sin un estilo específico para el diseño de materiales.

Implementemos el desplazamiento virtual infinito

Requisitos previos: Angular (versión 7 o 7+), Node versión 11.0 o superior

Paso- 1- Agregue el paquete @angular/cdk

npm install @angular/cdk

Paso -2 importa ScrollingModule a tu módulo

import { ScrollingModule} from '@angular/cdk/scrolling';
imports: [
  ...,
ScrollingModule
]

Paso- 3 Dentro de su componente

Wrap your looping element inside <cdk-virtual-scroll-viewport>
</cdk-virtual-scroll-viewport>use  *cdkVirtualFor instead of *Ngfor itemSize directive tells how tall(height of height) each item will be(in pixels). So, itemSize="100" means that item in the list will require 100px of height.<cdk-virtual-scroll-viewport itemSize="100">
  <li *cdkVirtualFor="let item of data">
      <!-- Print item here -->
  </li>
</cdk-virtual-scroll-viewport>

Felicitaciones, ha terminado con el desplazamiento virtual infinito básico. Mejorará el rendimiento de la página y la experiencia de carga de datos.

Información adicional con funciones avanzadas de cdk-virtual-scroll

Eventos personalizados: escuche el evento cuando se desplaza un elemento específico

<cdk-virtual-scroll-viewport itemSize="100" (scrolledIndexChange)="scrollhandler($event)">
  </cdk-virtual-scroll-viewport>

Acceso a CdkVirtualScrollViewport y su método

import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';@ViewChild(CdkVirtualScrollViewport)
  viewport: CdkVirtualScrollViewport;Access methods like
 this.viewport.scrollToIndex(23)

*cdkVirtualFor proporciona algunas variables lógicas en su plantilla

<cdk-virtual-scroll-viewport itemSize="100">
  <li *cdkVirtualFor="let item of data; let index = index;
                       let count = count;
                       let first = first;
                       let last = last;
                       let even = even;
                       let odd = odd;">
      <!-- Print item here -->
  </li>
</cdk-virtual-scroll-viewport>

Feliz aprendizaje… 👏👏👏

Fuente: https://hackernoon.com/render-lists-using-infinite-scroll-in-angularjs

#angularjs 

Renderizar Listas Usando Infinite Scroll En AngularJS

Mean-Blog: Blog using Nodejs, Expressjs, Angularjs and Mongodb

Mean Blog

Blog using Nodejs, Expressjs, Angularjs and Mongodb. MEAN Javascript Fullstack application

Features

  • Create/Edit/Delete Article
  • Passport Authentication for Administration
  • Bcrypt Password Hash
  • Angular ui router
  • textAngular Text-Editor
  • Sass

Server Side Dependencies

"bcrypt": "^0.8.4",
"body-parser": "^1.13.2",
"connect-flash": "^0.1.1",
"cookie-parser": "^1.3.5",
"ejs": "^2.3.3",
"express": "^4.13.1",
"express-session": "^1.11.3",
"mongoose": "^4.1.0",
"morgan": "^1.6.1",
"passport": "^0.2.2",
"passport-local": "^1.0.0"

Client Side Dependencies

"textAngular": "~1.4.2",
"bootstrap": "~3.3.5",
"angular": "1.4.3",
"angular-ui-router": "~0.2.15"

Getting Started

Clone Repo

git clone https://github.com/DimiMikadze/Mean-Blog.git

Npm install dependencies

cd server & npm install

Create config.js file in config folder

module.exports = {
    'secret': 'SomeSecretString',
    'database': 'mongodb://localhost/yourdatabasename'
};

Start Mongodb

mongod

Start Server

cd server & node app.js

Create Admin User

uncomment testUser route in app.js

app.use("/", require("./routes"));
app.use("/admin", require("./routes/admin"));
// app.use("/test", require("./routes/testUser"));

Navigate to

/test/create-user/your-name/your-password

this will create admin user with your name and hashed password

User Admin

Navigate to

/login

Insert your newly created name and password

Change Styles

Css is written with Sass, you can update scss files with running

cd client/public & sass --watch scss:css

or if you don't want to use Sass just update

client/public/css/app.css

Grunt Packages

grunt-contrib-concat
grunt-contrib-watch

Start Grunt

Grant will concatenate admin script and css files and watch for changes

cd client
grunt

output will look like this

Running "concat:js" (concat) task
File app/scripts.js created.

Running "concat:css" (concat) task
File public/css/admin/bundle.css created.

Running "watch" task
Waiting...

Contributing

contributions are more than welcome!

Author: DimiMikadze
Source Code: https://github.com/DimiMikadze/Mean-Blog 
License: MIT License

#node #angularjs #mongodb #expressjs 

Mean-Blog: Blog using Nodejs, Expressjs, Angularjs and Mongodb
Emilie  Okumu

Emilie Okumu

1647633600

AngularJS: HTML Enhanced For Web Apps!

AngularJS

AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade/Pug and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding. To help you structure your application better and make it easy to test, AngularJS teaches the browser how to do dependency injection and inversion of control.

It also helps with server-side communication, taming async callbacks with promises and deferred objects, and it makes client-side navigation and deep linking with hashbang urls or HTML5 pushState a piece of cake. Best of all? It makes development fun!


On July 1, 2018 AngularJS entered a 3 year Long Term Support period: Find out more

Looking for the new Angular? Go here: https://github.com/angular/angular


Documentation

Go to https://docs.angularjs.org

Contribute

We've set up a separate document for our contribution guidelines.

Develop

We've set up a separate document for developers.

Analytics

What to use AngularJS for and when to use it

AngularJS is the next generation framework where each component is designed to work with every other component in an interconnected way like a well-oiled machine. AngularJS is JavaScript MVC made easy and done right. (Well it is not really MVC, read on, to understand what this means.)

MVC, no, MV* done the right way!

MVC, short for Model-View-Controller, is a design pattern, i.e. how the code should be organized and how the different parts of an application separated for proper readability and debugging. Model is the data and the database. View is the user interface and what the user sees. Controller is the main link between Model and View. These are the three pillars of major programming frameworks present on the market today. On the other hand AngularJS works on MV*, short for Model-View-Whatever. The Whatever is AngularJS's way of telling that you may create any kind of linking between the Model and the View here.

Unlike other frameworks in any programming language, where MVC, the three separate components, each one has to be written and then connected by the programmer, AngularJS helps the programmer by asking him/her to just create these and everything else will be taken care of by AngularJS.

Interconnection with HTML at the root level

AngularJS uses HTML to define the user's interface. AngularJS also enables the programmer to write new HTML tags (AngularJS Directives) and increase the readability and understandability of the HTML code. Directives are AngularJS’s way of bringing additional functionality to HTML. Directives achieve this by enabling us to invent our own HTML elements. This also helps in making the code DRY (Don't Repeat Yourself), which means once created, a new directive can be used anywhere within the application.

HTML is also used to determine the wiring of the app. Special attributes in the HTML determine where to load the app, which components or controllers to use for each element, etc. We specify "what" gets loaded, but not "how". This declarative approach greatly simplifies app development in a sort of WYSIWYG way. Rather than spending time on how the program flows and orchestrating the various moving parts, we simply define what we want and AngularJS will take care of the dependencies.

Data Handling made simple

Data and Data Models in AngularJS are plain JavaScript objects and one can add and change properties directly on it and loop over objects and arrays at will.

Two-way Data Binding

One of AngularJS's strongest features. Two-way Data Binding means that if something changes in the Model, the change gets reflected in the View instantaneously, and the same happens the other way around. This is also referred to as Reactive Programming, i.e. suppose a = b + c is being programmed and after this, if the value of b and/or c is changed then the value of a will be automatically updated to reflect the change. AngularJS uses its "scopes" as a glue between the Model and View and makes these updates in one available for the other.

Less Written Code and Easily Maintainable Code

Everything in AngularJS is created to enable the programmer to end up writing less code that is easily maintainable and readable by any other new person on the team. Believe it or not, one can write a complete working two-way data binded application in less than 10 lines of code. Try and see for yourself!

Testing Ready

AngularJS has Dependency Injection, i.e. it takes care of providing all the necessary dependencies to its controllers and services whenever required. This helps in making the AngularJS code ready for unit testing by making use of mock dependencies created and injected. This makes AngularJS more modular and easily testable thus in turn helping a team create more robust applications.


Author: angular
Source Code: https://github.com/angular/angular.js
License: MIT License
#html #angularjs 

AngularJS: HTML Enhanced For Web Apps!

How to Consume a RESTful Web Service with AngularJS Using Spring Boot

Consuming a RESTful Web Service with AngularJS

This guide walks you through writing a simple AngularJS client that consumes a Spring MVC-based RESTful web service.

What you’ll build

You will build an AngularJS client that consumes a Spring-based RESTful web service. Specifically, the client will consume the service created in Building a RESTful Web Service with CORS.

The AngularJS client will be accessed by opening the index.html file in your browser, and will consume the service accepting requests at:

http://rest-service.guides.spring.io/greeting

The service will respond with a JSON representation of a greeting:

{"id":1,"content":"Hello, World!"}

The AngularJS client will render the ID and content into the DOM.

 The service at rest-service.guides.spring.io is running the code from the CORS guide with small modifications: there is open access to the /greeting endpoint because the app is using @CrossOrigin with no domain.

What you’ll need

  • About 15 minutes
  • A favorite text editor
  • A modern web browser
  • An internet connection

Create an AngularJS Controller

First, you will create the AngularJS controller module that will consume the REST service:

public/hello.js

angular.module('demo', [])
.controller('Hello', function($scope, $http) {
    $http.get('http://rest-service.guides.spring.io/greeting').
        then(function(response) {
            $scope.greeting = response.data;
        });
});

This controller module is represented as a simple JavaScript function that is given AngularJS’s $scope and $http components. It uses the $http component to consume the REST service at "/greeting".

If successful, it will assign the JSON returned back from the service to $scope.greeting, effectively setting a model object named "greeting". By setting that model object, AngularJS can bind it to the application page’s DOM, rendering it for the user to see.

Create the Application Page

Now that you have an AngularJS controller, you will create the HTML page that will load the controller into the user’s web browser:

public/index.html

<!doctype html>
<html ng-app="demo">
	<head>
		<title>Hello AngularJS</title>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    	<script src="hello.js"></script>
	</head>

	<body>
		<div ng-controller="Hello">
			<p>The ID is {{greeting.id}}</p>
			<p>The content is {{greeting.content}}</p>
		</div>
	</body>
</html>

Note the following two script tags within the head section.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="hello.js"></script>

The first script tag loads the minified AngularJS library (angular.min.js) from a content delivery network (CDN) so that you don’t have to download AngularJS and place it in your project. It also loads the controller code (hello.js) from the application’s path.

The AngularJS library enables several custom attributes for use with standard HTML tags. In index.html, two such attributes are in play:

  • The <html> tag has the ng-app attribute to indicate that this page is an AngularJS application.
  • The <div> tag has the ng-controller attribute set to reference Hello, the controller module.

Also note the two <p> tags which use placeholders (identified by double-curly-braces).

<p>The ID is {{greeting.id}}</p>
<p>The content is {{greeting.content}}</p>

The placeholders reference the id and content properties of the greeting model object which will be set upon successfully consuming the REST service.

Run the client

To run the client, you’ll need to serve it from a web server to your browser. The Spring Boot CLI (Command Line Interface) includes an embedded Tomcat server, which offers a simple approach to serving web content. See Building an Application with Spring Boot for more information about installing and using the CLI.

In order to serve static content from Spring Boot’s embedded Tomcat server, you’ll also need to create a minimal amount of web application code so that Spring Boot knows to start Tomcat. The following app.groovy script is sufficient for letting Spring Boot know that you want to run Tomcat:

app.groovy

@Controller class JsApp { }

You can now run the app using the Spring Boot CLI:

spring run app.groovy

Once the app starts, open http://localhost:8080 in your browser, where you see:

Model data retrieved from the REST service is rendered into the DOM.

The ID value will increment each time you refresh the page.

Summary

Congratulations! You’ve just developed an AngularJS client that consumes a Spring-based RESTful web service.

Link: https://spring.io/guides/gs/consuming-rest-angularjs/

#angularjs #angular #rest #spring  #spring-boot  #java 

How to Consume a RESTful Web Service with AngularJS Using Spring Boot