Angular Material: Installing with NPM

Angular Material: Containers with the Layout API

Angular Material: Intro to UI Components

Angular Material: UI Components with Dynamic Data

Angular Material: Using a BottomSheet

Angular Material: Adaptive Layouts

Angular Material: Theming and ARIA

Introduction to AngularJS Material

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

[00:00] Let's use angular material with Angular 1 to build this starter app. We're going to start with an empty project. We're going to go ahead and install the libraries we need using npm. Let's start by saying npm install angular. We're also going to install angular material.

[00:17] We use --save to get to the save at our package.json. Once those are done installing, let's go ahead and add them to our page. We'll start by adding a link to the CSS for angular material up in the head. Later on, at the bottom of the body, we'll add the script text to our libraries.

[00:36] We'll start by adding the tag for angular, as it's our first library. We're going to add the tags for the two libraries. The angular material depends on the first one is ngAnimate for animations. The second one is ngAria for accessibility support. The last one will be angular material itself.

[00:58] Now that we've got these added, we'll go ahead. On the body, we'll add our ngApp directive. We're going to call our app My App. Let's add one more script tag to set up the dependencies.

[01:18] Here, we're going to declare our app saying angular app module, and we called it My App. We're going to provide an array of modules that our app depends on. The only angular module we depend on is ngMaterial.

[01:32] At this point, our app's declared. We're going to add a run block so that we can see once our app has bootstrapped in angular. Here, we'll just say console at log, "My App is ready." We save this, and over the console, you can see our app is ready.

Course

Introduction to AngularJS Material

Angular Material: Installing with NPM

Share this video with your friends