Using Angular Material with Meteor

When I first started developing mobile applications with Meteor, I struggled a little bit trying to figure out how to integrate Angular Material to my application. After some extensive research, I was finally able to integrate Angular Material. The steps bellow worked for me

Create a meteor app:
- $ meteor create my-simple-app
Navigate to the project:
- $ cd my-simple-app
Install node modules:
- $ meteor npm install
Check if project is working by running:
- $ meteor
- View project on browser: http://localhost:3000
To use Angular in our app, we first need to remove the default UI package of Meteor, called Blaze. We remove it by running:
- $ meteor remove blaze-html-templates
Now we need to replace it with UI package for angular:
- $ meteor add angular-templates
Update the code in file client/main.html
1
2
3
4
5
6
7
8
<head>
<title>My Simple App</title>
</head>
<body>
<div class="container" ng-app="my-simple-app">
/* Your angular material code goes in here */
</div>
</body>
Update the code in file client/main.html
1
2
3
4
5
6
import angular from 'angular';
import angularMeteor from 'angular-meteor';

angular.module('my-simple-app', [
angularMeteor
]);
Before we can Install angular-material, we need to install its dependencies first:
- $ meteor npm install angular-aria –save
- $ meteor npm install angular-animate –save
Then we now install Angular Material
- $ meteor npm install angular-material –save
In client/main.html, we include angular-meteor CSS within the head tag
1
2
3
4
<head>
<title>My Simple App</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
Next, we want to inject the angular-material module into our Angular application. Update client/main.js code to:
1
2
3
4
5
6
7
8
import angular from 'angular';
import angularMeteor from 'angular-meteor';
import ngMaterial from 'angular-material';

angular.module('myApp', [
angularMeteor,
ngMaterial
]);
That’s it, now we can use angular-material in our application layout.

Do you need help with a project? or have a new project in mind that you need help with?

Contact Me