Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Angular Material: Installing with NPM

    Thomas BurlesonThomas Burleson

    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

    angularjsAngularJS
    angular-materialAngular Material
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss