Learn Angular-material, Babel and Canvas

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

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

babel

Converting all of our modern JavaScript into ES5 compatible syntax is a great way to use modern features while targeting older browsers. What happens when the browsers natively support these language features? Then it no longer makes sense to transform that code or to include polyfills that will go unused. In this lesson, we’ll add the `@babel/polyfill` package and configure `babel-preset-env`

Target specific browsers with babel-preset-env and the babel pollyfill

A <canvas> element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.

canvas

The `canvas` element exposes a 2d context which allows you to draw lines using the `moveTo`, `lineTo`, and `stroke` api. You can combine this with Mouse events to make a simple drawing app.

Draw with Your Mouse on an HTML Canvas

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

We take the opengraph image we wrote in codesandbox and copy it into our serverless function. We use Rollup to compile the component into an IIFE (immediately invoked function expression) that can run in our headless browser environment and cover a wide set of rollup plugins that we need for compatibility. We end the lesson having successfully screenshot our opengraph react component from our Netlify Function

**Note**:  Due to Netlify changing their handling, the path in `fs.readFileSync` is affected. Update to:
```js
const script = fs.readFileSync(path.resolve(__dirname, "image.js"), "utf-8");
```

Compiling a React to an IIFE with Rollup to execute and render in a headless browser

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 some of the different ways you can affect the graphical content that you are drawing to a canvas. We'll cover global alpha, global composite operations and shadows.

Canvas Effects

With the HTML `canvas` you can easily draw text as well as graphics. Let's take a look at basic text manipulation on the canvas.

Drawing Text on Canvas

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

In this lesson, we cover several different ways to animate graphics drawn to Canvas.

Animating with Canvas

When drawing on the HTML5 canvas element, your fills aren't limited to flat colors. You can use gradients to get smoothly blended color fills on your drawn elements.

Gradient Fills on the HTML5 Canvas

We can write our package using the latest JavaScript syntax with a compilation step. In this lesson we will install `babel-cli` and `babel-preset-latest` and wire up a `build` script to compile our code using the babel “latest” preset when source files change. This means those using our package can use it in any version of JavaScript even though we are using the latest syntax for our source code.

Set up compilation of source code using babel with npm scripts

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

Transformations can change the default canvas coordinate system and create complex drawings with much less code.

Canvas Transformations

In this lesson, listening for and handling mouse and keyboard events in Canvas is covered.

Listening for Mouse and Keyboard Events with HTML Canvas

The HTML Canvas element allows us to access powerful drawing APIs from JavaScript. In this lesson, the first in a series, we will learn about `<canvas>`, and get ready to start drawing.

Introduction to the HTML Canvas element

Now that we have an HTML5 canvas to draw on, let's take a look at drawing simple lines and rectangles with JavaScript

Topics

Instructors

Content Type

Free or Pro