Yes, it is possible to use Angular Material with AngularJS. However, you should know that AngularJS have reached EOL (End-of-Life) and therefore doesn’t offer long-term support. This also includes using Angular Material with AngularJS.
If you are aware that AngularJS is not supported anymore and have reached EOL (End-of-Life) but still want to use it together with Angular Material, continue reading.
How To Use Angular Material With AngularJS
Before you start using Angular Material with AngularJs, you need to understand a few things:
- AngularJS Material only supports AngularJS 1.x
- Angular Material for AngularJS is based on old specifications (Material Design Specification version 1)
- AngularJS reached EOL (End-of-Life) on 31st December 2021
In order to use Angular Material with AngularJS you need to use a specific version of it, AngularJS Material.
There’s two ways to get AngularJS Material for your AngularJS application. You can either install it using npm or you can get it from a CDN (Content Delivery Network).
You don’t need to install it locally if you choose to get it from a CDN. The good thing about this method is that you’ll never store the library locally, the bad thing is if the CDN would shutdown, it would also affect your application. You’re free to choose the option which suits you best!
Get AngularJS Material from npm
You can install AngularJS Material using npm:
# To install latest formal release
npm install angular-material
# To install latest release and update package.json
npm install angular-material --saveAfter you have installed the library, you’ll need to include the scripts and stylesheet in your main HTML-file:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/node_modules/angular-material/angular-material.css">
</head>
<body ng-app="YourApp">
<div ng-controller="YourController">
</div>
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/angular-aria/angular-aria.js"></script>
<script src="/node_modules/angular-animate/angular-animate.js"></script>
<script src="/node_modules/angular-messages/angular-messages.js"></script>
<script src="/node_modules/angular-material/angular-material.js"></script>
<script>
// Include app dependency on ngMaterial
angular.module('YourApp', ['ngMaterial', 'ngMessages'])
.controller("YourController", YourController);
</script>
</body>
</html>That’s it, you should now be able to use all AngularJS Material components!
Get AngularJS Material from a CDN
The recommended CDN to use here is the Google CDN. Here is how you add references to the scripts and stylesheet stored in the Google CDN:
<head>
<!-- Angular Material CSS now available via Google CDN; version 1.2.1 used here -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.css">
</head>
<body>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 1.2.1 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.js"></script>
</body>This method of fetching the library from a CDN is especially useful if you want to experiment with AngularJS Material using an online editor like CodePen, jsFiddle or StackBlitz.
You are now able to use all the AngularJS Material components like you would normally do!
Conclusion
In conclusion, while it is possible to use Angular Material with AngularJS, it’s important to note that AngularJS has reached its End-of-Life (EOL) and does not offer long-term support.
If you choose to continue using AngularJS with Angular Material, you’ll need to use a specific version of AngularJS Material.
You can either install it using npm or get it from a CDN. However, it’s highly recommended to upgrade to a supported version of Angular and AngularJS Material if you haven’t already.
With that said, Angular Material is a great tool that can help you build beautiful and responsive web applications quickly and efficiently. So, whether you’re using AngularJS or the latest version of Angular, give Angular Material a try and see how it can take your project to the next level!
AngularJS Material may not be supported anymore but both Angular and Angular Material is very alive and kicking. Check out our articles and tutorial on Angular Material here!