How to use AngularJS Material with AngularJS 1.2.20

Question

I tried to install the latest AngularJS Material version with this Getting Started Guide on my AngularJS 1.2.20 Project. (I know its old, but I can't update)

Failed to instantiate module app due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.20/$injector/modulerr?p0=...
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js:6:450
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js:34:97
    at Array.forEach ()
    at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js:7:280)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js:33:207)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js:33:284
    at Array.forEach ()
    at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js:7:280)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js:33:207)
    at dc (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js:36:309

I don't know why, but I can't find any kind of list which version is compatible...

Maybe someone got an idea?

This is how I include the js file in <head>

<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>

Here is my angular.module:

var app = angular.module('app', [
    'ngMaterial',
    'ui.bootstrap',
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'infinite-scroll',
    'rzModule',
    'ngReallyClickModule',
    'ngVideoCutModule',
    'ngVideoTrailerModule',
    'ngItemModules',
    'ngDirectives',
    'xeditable',
    'monospaced.elastic',
    'angularFileUpload',
    'angulartics',
    'angulartics.google.analytics',
    'angular-video',
    'checklist-model',
    'ui-notification',
    'luegg.directives',
    'ngLoadingModule'
]);

Include Order of JS Files:

<script src="/inc/assets/js/modernizr.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular-sanitize.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular-resource.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular-cookies.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular-route.js"></script>

<script src="/inc/js/app/application.js"></script>
<script src="/inc/js/app/app.routes.js"></script>
<script src="/inc/js/app/app.config.js"></script>

<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>

only html is the <script> that i load in the <head> area. I edited post. I still dont copy demo html code from the angular material website. — Budi
– Budi, Commented Apr 10, 2018 at 9:43

Splaktar · Accepted Answer · 2018-04-10 17:35:15Z

1

As indicated in bower.json and package.json AngularJS 1.4 is the oldest version that we officially support with our latest releases. The reality is that 1.5+ is recommended. We'll be moving to 1.6 soon.

Note that 1.2.20 came out on Jul 11, 2014 and is lacking many security patches. If you must be on 1.2.x, you should at least be on 1.2.32 which includes fixes and security patches and was released on Oct 11, 2016.

I highly recommend upgrading to the latest AngularJS 1.6 as 1.7 is coming out this summer and will include LTS. You'll want your active projects to be on the LTS moving forward as critical fixes and security patches will only be applied to AngularJS 1.7.x.

answered Apr 10, 2018 at 17:35

Splaktar

5,9145 gold badges45 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zooly · Accepted Answer · 2018-04-10 09:55:07Z

0

Regarding discussion in question comments, I think your error is that your declare your application (and your controller) before loading AngularJS scripts.

I recommend you to do that this way:

<html>
  <script src="angular.js"></script>
  <script src="app.js"></script>

  <body ng-app="app">
    <div ng-controller="MainCtrl">
    </div>
  </body>
</html>

First load AngularJS, then your custom scripts, and declare your app (in view) and then your controller.

answered Apr 10, 2018 at 9:55

Zooly

4,7974 gold badges40 silver badges55 bronze badges

10 Comments

Budi Over a year ago

Thanks for this fast information. I tested this but i still get the same error + "can not find module" error... I load atm all javascript files in the footer.php I update the Topic Post with Include orders of Important files.

Zooly Over a year ago

Not sure to understand why you are talking about PHP?

Budi Over a year ago

Its a project where we use php files.

Zooly Over a year ago

Ok! Anyway, include angular.material.js before your custom scripts (/inc)

Budi Over a year ago

Loaded now direct after angular-route.js but still same error. I try allready alot loading positions =) is it possible that angular material dont work with angular 1.2.20?

|

Collectives™ on Stack Overflow

How to use AngularJS Material with AngularJS 1.2.20

2 Answers 2

Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related