I wanted to use angular material in an AngularJS application so I downloaded it with all its dependencies:
<script src="bower_components/hammer/hammer.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
And then I included it in my App:
var myApp = angular.module('myApp', ['ngRoute', 'ngResource', 'ngSanitize', 'ngMaterial', 'ngAnimate', 'ngAria']);
After that I wanted to try it on a button:
<md-container> <md-button>boutton1</md-button> </md-container>
And here is the result ( on Chrome and Firefox):
And when I click on it I have this:
Did I do something wrong?
Angular Material does not install Angular, it requires you to install it (the same way Angular requires you to have RxJS). Check your package. json to see what version of Angular you have. Also, update your global angular-cli package, probably you've got an older one.
Type npm -v in the terminal to check if npm is installed or not in our system. It displays the version of npm. Angular installations are easy with the help of Angular CLI. Visit https://cli.angular.io/ to get the reference of the command.
It integrates easily with Angular Projects because it is built with Angular structure. It can be incorporated with new or existing Angular Application despite the version. It provides tools for developers to build/customize their components. It speeds up the development process of building UI components from scratch.
Alternatively, if you are using Angular CLI, you can insert this line @import "~@angular/material/prebuilt-themes/indigo-pink.css";
into your styles.css.
Just make sure to follow the official instructions https://material.angular.io/guide/getting-started
It looks like you are not including the stylesheet.
Try adding the following:
<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" type="text/css">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With