Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 832 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Angular Material: Installing with NPM

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

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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

Avatar
Mauro

If I am not missing something you should add animate and aria manually as well:

npm i -S angular angular-animate angular-aria angular-material
In reply to egghead.io
Avatar
Aaron

npm installs any peerDependencies that a library specifies. So you don't have to install them by hand. npm takes care of it for you.

In reply to Mauro
Avatar

Good catch Mauro, the peer dependencies no longer work. I had to manually add animate and aria as well.

In reply to Mauro
Avatar
mark

Getting an error in Angular 1.5 with webpack.

using this:
import 'angular-material/angular-material.css';

give the following error:
ERROR in ./~/angular-material/angular-material.css
Module parse failed: /Users/mark/Documents/my-project/node_modules/angular-material/angular-material.css Unexpected token (7:11)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:11)

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.

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?