Toggle Menu

Insights > > Building Scalable and Beautiful AngularJS Apps (Part 5): Default Beauty and Great Mobile-First UX with Angular Material

Building Scalable and Beautiful AngularJS Apps (Part 5): Default Beauty and Great Mobile-First UX with Angular Material

First things first: Running code is far more valuable than any blog post. So, launch the demo site here, check out the source code on GitHub and pull the Docker image without delay: docker pull duluca/angular1.5-starter

Angular Material

angular

By

April 05, 2017

First things first: Running code is far more valuable than any blog post. So, launch the demo site here, check out the source code on GitHub and pull the Docker image without delay: docker pull duluca/angular1.5-starter

Angular Material

angular

Angular Material has quickly become one of the best things about Angular. Unlike UI frameworks like Bootstrap or Materialize, Material ships with Angular directive that encapsulate not just the look, but also behavior of every user control. This way you write less css and by default all of your components look and work great. Unlike, Angular UI, you don’t have to worry about low quality or constantly breaking user controls, because a dedicated team at Google is developing Material.

Mobile-First Design

angular

In Angular Starter, SideNav provides a side navigation experience with a hamburger menu. When the screen is wide enough, the SideNav locks open, leveraging Material functionality. The top NavBar provides a complimentary navigation experience for contextual or less used elements like a logout button that only displays when user is logged in.

By observing how navBar hides the hamburger menu the hide-gt-sm property or how sideNav remains locked open md-is-locked-open=”$mdMedia(‘gt-sm’)” you can observe how mobile first design works with Angular Material.

Like Bootstrap, Material has a column and row based layout system, but unlike Bootstrap you can configure column widths based on percentages, instead of the arbitrary 12-column layout system.

The best resource on how responsive layout works is in Material and is documented here.

Rich Forms and Validations

password

Creating rich and dynamic input forms with Material is quite easy. Angular Starter comes pre-configured with access to a rich and great looking icon library called Material Design Icons or mdi for short. In addition, proper form validation is crucial to be able to deliver a good user experience. You must properly form your HTML, but once you do, Material will create a dynamic experience for you.

Let’s examine how the email field is formed in app/components/login.

angular

  • <md-input-container>: Wraps a single input element in a form.
  • md-icon-float: Allows for the icon to appear side-by-side with the input field.
  • <label>: Creates a placeholder style label on the form, that appears as a header when the user clicks on it.
  • <md-icon>: Is a Material directive that allows us to render the mdi-email icon from the mdi library.
  • <input>: This is the classic HTML tag, where you bind your viewModel to. required, md-autofocus, type=”email” attributes bring forward Material and ng-messages magic that requires an input and validates it as an e-mail address.
  • <ng-messages>: This is an Angular component, which displays the appropriate message to the user, when validation conditions are triggered.

UI Service and Data Table

Ui service provides convenience functions for commonly used UI elements like showToast, shake, showAlert and showConfirm. These functions wrap Material API calls and configures them in a default manner that you expect. By exposing these functions as an Angular service. We can call these methods easily from other services and controllers for basic user interactions.

Material, notably, doesn’t ship with a Data Table. However, the Material development team recommends the Angular Material Data Table library, which is being built-in to the next iteration of Angular Material targeted for Angular Beyond.

material design data table

Angular Material Data Table looks and works great, while providing an easy to implement pagination pattern for large datasets. For example see usage, please head over to the source GitHub repository.

Start Today

As German poet Goethe puts it, “what is not started today is never finished tomorrow.” Here’s the code on GitHub. Fork it, create issues with it, otherwise just clone it and use it. Start today.

If you have any questions, ask them on Twitter @duluca.

Interested in learning more? Check out the rest of the blogs in this series:

You Might Also Like

Excella

The Shift Left and the Future of Tech with John Gilroy and Jeff Gallimore

In case you missed it, Jeff Gallimore, Excella’s Chief Technology and Innovation Officer, joined long-time...

Excellian Spotlights

Excella Innovators: Mindy Bohannon

Meet Mindy Bohannon, Agile Analyst and Xpert on our Innovation team. Mindy sat down with...

Excella

The Value in Building Untouchable Towers

At the recent AgileDC conference, Ricardo Abella and I co-facilitated a session entitled “The Value...