Learn Angular-material, Lodash and Redwoodjs

Angular Material is an Angular-native, UI component framework from Google. It is a reference implementation of Google's Material Design and provides >30 UI components and services essential for mobile and desktop AngularJS applications.

In this course, we will quickly build a real-work application Angular UI application, take a tour of Angular Material, and learn how ngMaterial can be used in your projects.

*presented by Thomas Burleson and Aaron Frost*

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Introduction to AngularJS Material

[Lodash](https://lodash.com/docs/) is a collection of utilities that have become a staple of modern web development. This collection will show you how to re-create its most common methods using simple JavaScript techniques available in any modern web browser. In addition to re-building tools like `_.merge`, `_.get` and `_.debounce` from scratch you will also learn how to replace them completely in some cases with modern syntax such as [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining), [nullish coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) and [Object.fromEntries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries).

This collection should interest the following groups:
- Those who want to better understand common JavaScript patterns
- Engineers who want to reduce their dependence on Lodash (for performance or other reasons)
- Candidates preparing for a technical job interview (where it is common to be asked how to implement some of these methods).

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Recreating Popular JavaScript Utility Methods from Lodash

The Angular Material Layout API wraps the flexbox CSS features with an amazingly easy, powerful HTML markup API. The Layout API hides the complexities of the CSS, is intuitive to use, and eliminates the need for developers to become flexbox experts to implement modern page layouts. 

In this lesson we will learn how to use the Angular Material Container components and the Layout API to implement the layouts specified in design wireframe.

> This course has been created by Thomas Burleson and Aaron Frost. 

Angular Material: Containers with the Layout API

Themes convey meaning through color, tones, and contrasts. And the theme color palettes, alphas, and shadows deliver a consistent tone to your application and a unified feel for all Angular Material UI components. Theming allows developers to change the intention and meaning of the application by changing the colors and shadows. 

Accessibility is a huge - often overlooked - feature in modern web applications. Angular Material components all implement ARIA features whenever possible. And for usage scenarios where the ARIA attributes are not explicitly provided and cannot be inferred, then Angular Material will provide details console warnings alerting the developer.

Let’s use the Angular Material Theming service to change the background, primary, accent, and warning colors used within the entire application. These will be configured at startup using the $mdThemeProvider.  

Let’s also resolve the two ARIA warnings shown in console. These originate from icon buttons where the ARIA label cannot be inferred. So let’s add a static aria-label and a dynamic, interpolated aria-label to those buttons.

> This course presented by Thomas Burleson and Aaron Frost

Angular Material: Theming and ARIA

Learn how to install Angular Material with `npm install`  and load the required libraries and stylesheets into your blank web page.

> This course has been created by Thomas Burleson and Aaron Frost

Angular Material: Installing with NPM

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

This lesson explores the Angular Material sidenav component. This includes input and display options, creating a sidenav with a nav list, and utilizing the `@angular/cdk` to update sidenav settings based on the users screen size.

Use the Angular Material Sidenav Component

A modern JavaScript utility library delivering modularity, performance & extras.

lodash

This lesson shows how to refactor your old loops into using a simpler and more powerful lodash-style. We will start by looking at how many people traditionally write JavaScript `for` loops and then talk about the alternate style and benefits that Lodash offers.

Lodash: Refactoring Simple For Loops

Most Angular Material UI components are declarative and used directly in the HTML markup. Some components, however, are programmatic and must be configured and invoked from Javascript. Programmatic components have a short-term, limited DOM lifespan and include Dialogs, Toast, and BottomSheet.

Let’s use the BottomSheet service to configure and display an Angular Material BottomSheet container which in turn will display a nested, custom Contact Sheet view.

> This course presented by by Thomas Burleson & Aaron Frost.

Angular Material: Using a BottomSheet

Both flexbox CSS and the Angular Material Layout allow web applications to `respond` to the size of the browser at any given point. No matter what the browser width may be, the web app adjusts its layout sizing accordingly. Combine responsive functionality with media query support and your web applications will have `adaptive` features to adapt to the width of the browser at a specific points. More than fluidly adjusting the widths and heights of elements, Adaptive applications can change the rendered UX with new positions, new components, and new styles. Angular Material Layout hides the complexities of implementing adaptive features with a singularly unique and simple HTML syntax.
Let’s use the Adaptive extensions of the Angular Material API to hide the SideNav on small devices (like iPhone or Android). We will explore the use of the $mdMedia service to easily lock open the SideNav on larger devices. And we will see how the $mdSideNav service can be used to programmatically close the SideNav after a user is selected.

> This course presented by Thomas Burleson and Aaron Frost.

Angular Material: Adaptive Layouts

Angular Material provides over 30 UI components and services. The framework offers a suite of components and containers: from simple Button components with built-in ink and hover effects, theming, and ARIA support… to more complex container components like mdList and Tabs.  

Let’s use some of those components in our SideNav and Content containers. For now we will use hard-coded, HTML markup. This allows us to confirm the UX matches that specified in the design docs before we start working on our application logic.

> This course has been created by Thomas Burleson and Aaron Frost.

Angular Material: Intro to UI Components

Angular Material UI components have been designed from the ground-up to use dynamic, live data. Supporting AngularJS interpolation, expressions, and databindings… each component exposes an intuitive API and fully supports the existing ng-<xxx> directives published in AngularJS.

Let’s replace the hard-coded, static HTML with dynamic, mock data using AngularJS data bindings, ng-repeat, and the ng-click directives. Our UX remains unchanged, yet now we are using custom application logic and dataservices.

> This course has been created by Thomas Burleson & Aaron Frost.

Angular Material: UI Components with Dynamic Data

Lodash has an enormous amount of utility functions for dealing with collections and objects in javascript. You can use it in your AngularJS applications to "debounce" user input, or add delay between user actions. This is a common technique for text input to hold firing service calls until the user stops typing for a fraction of a second.

Debounce (delay) User Input in AngularJS with Lodash

Imagine if looking at your business logic read as simple as a story from a children's book. That's exactly what we'll cover by learning how to compose small pieces of business logic and also set them up for further composition in the future.

We're showing a list of fictional tweets in a trivial React component created with create-react-app, however the example is not React specific and can be applied to any framework/environment.

Our example will refactor out business logic from a non-composable function to small composable pieces. To accomplish this we'll be using flow, filter and map from lodash/fp, which is included in the regular lodash npm package.

This approach works well in any environment where you're not relying on object references to your original data, as our functional approach creates new collection objects instead of mutating them.

Guide to lodash/fp: https://github.com/lodash/lodash/wiki/FP-Guide


Refactor Business Logic to Composable Functions with Lodash

Lodash's "sortBy" method helps you sort data in your collections and "sortedIndex" helps you find where to place new data. In this video, John walks you through how to use each of these methods and how they can work together.

Lodash - sortBy and sortedIndex

Property access in Javascript can be problematic - especially when dealing with nested Objects and Arrays. Doing it manually and in a safe manner requires tons of boilerplate inside conditionals and results in a defensive style of coding. In this lesson we look at why this is a problem & how to overcome it using the `get` method from the popular utility library `Lodash`

Safer property access with Lodash's 'get' method

Logic often gets added to our loops. We need to iterate over a collection, and get the sum of values, for instance. This approach can lead to complicated methods, that are hard to test. Using Lodash (Underscore), we are going to extract logic in a large loop body into well named methods. The result will be cleaner and easier to understand.

Refactoring: Replace Loop with Collection Closure using Lodash

Learn how to use Object.assign to combine multiple objects together. This pattern is helpful when writing libraries that have a set of default options where you want to allow a user to override specific options. You'll also learn how to use a third party library to recursively merge nested objects together.

Combine Objects with Object.assign and Lodash merge

Lodash is a toolkit of Javascript functions that provides clean, performant methods for manipulating objects and collections. It is a "fork" of the Underscore library and provides additional functionality as well as some serious performance improvements. If you aren't using Lodash, you should be.

Introduction to Lodash

This lesson explores the angular material datepicker component. This includes basic setup and configuration options, validation and date range scenarios, configuring the datepicker for touch use, and how to utilize momentjs with the material datepicker.

Manage Date Selection with the Angular Material Datepicker



This lesson demonstrates how to utilize the Angular Material dialog module for application dialogs. We will touch on methods to present and close dialogs, configuring your dialog to accept data, and responding to user actions when a dialog is dismissed.


Manage Application Dialogs with the Angular Material Dialog Component

This lesson explores the Angular Material datatable component. This includes configuring your data source, setup of row and column templates, and adding filtering and paging to your datatable.


Search

Search Results