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

  1. Create a meteor app:
    • $ meteor create my-simple-app
  2. Navigate to the project:
    • $ cd my-simple-app
  3. Install node modules:
    • $ meteor npm install
  4. Check if project is working by running:
  5. 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
  6. Now we need to replace it with UI package for angular:
    • $ meteor add angular-templates
  7. 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>
  8. 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
    ]);
  9. 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
  10. Then we now install Angular Material
    • $ meteor npm install angular-material –save
  11. 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>
  12. 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
    ]);
  13. That’s it, now we can use angular-material in our application layout.