如何在 AngularJS 1.2.20 中使用 AngularJS 材质答案

【问题标题】：How to use AngularJS Material with AngularJS 1.2.20如何在 AngularJS 1.2.20 中使用 AngularJS 材质
【发布时间】：2018-09-19 20:47:30
【问题描述】：

我尝试在我的 AngularJS 1.2.20 项目中使用 Getting Started 指南安装最新的 AngularJS Material 版本。（我知道它旧了，但我不能更新）

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

我不知道为什么，但我找不到任何兼容版本的列表...

也许有人有想法？

这就是我在<head>中包含js文件的方式

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

这是我的 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'
]);

包含 JS 文件的顺序：

<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>

【问题讨论】：

你能展示一些你的代码吗？
使用 angular.module 编辑的帖子
@Budi 和你的 HTML
只有 html 是我在区域加载的
ng-app="" 请

标签： angularjs angularjs-material

【解决方案1】：

如bower.json 和package.json 所示，AngularJS 1.4 是我们最新版本正式支持的最旧版本。实际情况是推荐1.5+。我们很快就会迁移到 1.6。

请注意，1.2.20 于 2014 年 7 月 11 日发布，缺少许多安全补丁。如果您必须使用 1.2.x，则至少应该使用 1.2.32，其中包含修复和安全补丁，并于 2016 年 10 月 11 日发布。

我强烈建议升级到最新的 AngularJS 1.6，因为 1.7 将于今年夏天发布，并将包括 LTS。您会希望您的活动项目在 LTS 上向前推进，因为关键修复和安全补丁将仅应用于 AngularJS 1.7.x。

【讨论】：

【解决方案2】：

关于问题 cmets 的讨论，我认为您的错误是您在加载 AngularJS 脚本之前声明了您的应用程序（和您的控制器）。

我建议你这样做：

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

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

首先加载 AngularJS，然后是您的自定义脚本，并声明您的应用（在视图中），然后是您的控制器。

【讨论】：

感谢您提供如此快速的信息。我对此进行了测试，但仍然遇到相同的错误+“找不到模块”错误...我在 footer.php 中加载了所有 javascript 文件我使用包含重要文件的顺序更新了主题帖子。
不确定为什么要谈论 PHP？
这是一个我们使用php文件的项目。
好的！无论如何，在您的自定义脚本 (/inc) 之前包含 angular.material.js
现在直接在 angular-route.js 之后加载，但仍然是同样的错误。我已经尝试了很多加载位置 =) 角度材料是否可能不适用于角度 1.2.20？