Question

我一直收到这个错误：

angular.js：68未捕获错误：[$ injector：modulerr]失败实例化模块firstApplication，原因是：（...）

我尝试用几种不同的方式命名firstApplication但是无法这样做。我感觉它是一个简单的解决方案，但我似乎无法弄明白。

这是我的HTML

<head>
    <title></title>
    <link type="text/css" src="style.css"></link>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.0/angular-material.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
    <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v0.8.0/angular-material.js"></script> </head>

<body ng-app="firstApplication">
    <div data-ng-controller="ContactFormController as cf" flex layout="row" layout-align="center center">
        <div flex-sm="100" flex-gt-sm="90" flex-gt-md="70" flex-gt-lg="50" class="md-whiteframe-z2">
            <md-content class="md-padding">
                <form name="contactForm" data-ng-submit="cf.sendMail()">
                    <md-input-container>
                        <lable>Name:</lable>
                        <input type="text" data-ng-model="cf.contactName" required>
                    </md-input-container>
                    <md-input-container>
                         <lable>Email</lable>
                        <input type="email" data-ng-model="cf.contactEmail" required> 
                    </md-input-container>
                    <md-input-container>
                         <lable>Message</lable>
                        <textarea data-ng-model="cf.contactMsg" columns="1" required></textarea>
                    </md-input-container>
                    <md-button type="submit" class="md-primary" ng-class="{'md-raised md-hue-1': (contactForm.$dirty && contactForm.$valid)}">Send</md-button>
                </form>
            </md-content>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="app.js"></script> </body>

这是我的角色代码

'use strict'; angular.module('firstApplication', ['$scope','$mdToast', '$animate'])
          .controller('ContactFormController', ContactFormController);

         function ContactFormController ($scope, $mdToast, $animate) {
           $scope.toastPosition ={
            bottom: false,
            top:true,
            left: false,
            right:true
           };
           $scope.getToastPosition = function(){
                return Object.keys($scope.toastPosition)
                .filter(function(pos){
                    return $scope.toastPosition[pos];
                })
                .join(' ');
           };

           $this.sendMail = function(){
                $mdToast.show(
                    $mdToast.simple()
                        .content('Thanks for your message' + this.contactName +'You Rock')
                        .position($scope.getToastPosition())
                        .hideDelay(5000)
                );
           };

        };

Answer 1

您的代码存在一些问题。您有重复的脚本引用，您引用了不同版本的Angular库，您对主Angular模块的注入不正确，并且您在控制器中使用了$this而不是this。这是一个更新的片段，其中包含了这些更正（我没有解决围绕吐司的代码尝试做什么，因为我不熟悉）：

＆＃13;

angular.module('firstApplication', ['ngMaterial'])
  .controller('ContactFormController', ContactFormController);

function ContactFormController($scope, $mdToast, $animate) {
  $scope.toastPosition = {
    bottom: false,
    top: true,
    left: false,
    right: true
  };
  $scope.getToastPosition = function() {
    return Object.keys($scope.toastPosition)
      .filter(function(pos) {
        return $scope.toastPosition[pos];
      })
      .join(' ');
  };

  this.sendMail = function() {
    $mdToast.show(
      $mdToast.simple()
      .content('Thanks for your message' + this.contactName + 'You Rock')
      .position($scope.getToastPosition())
      .hideDelay(5000)
    );
  };

};

＆＃13;

<head>
  <title></title>
  <link type="text/css" src="style.css"></link>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.0/angular-material.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
  <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v0.8.0/angular-material.js"></script>
</head>

<body ng-app="firstApplication">
  <div data-ng-controller="ContactFormController as cf" flex layout="row" layout-align="center center">
    <div flex-sm="100" flex-gt-sm="90" flex-gt-md="70" flex-gt-lg="50" class="md-whiteframe-z2">
      <md-content class="md-padding">
        <form name="contactForm" data-ng-submit="cf.sendMail()">
          <md-input-container>
            <label>Name:</label>
            <input type="text" data-ng-model="cf.contactName" required>
          </md-input-container>
          <md-input-container>
            <label>Email</label>
            <input type="email" data-ng-model="cf.contactEmail" required>
          </md-input-container>
          <md-input-container>
            <label>Message</label>
            <textarea data-ng-model="cf.contactMsg" columns="1" required></textarea>
          </md-input-container>
          <md-button type="submit" class="md-primary" ng-class="{'md-raised md-hue-1': (contactForm.$dirty && contactForm.$valid)}">Send</md-button>
        </form>
      </md-content>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</body>

＆＃13;

Answer 2

我在你的代码中看到了三个错误：

您应该在app.js中引用head，而不是body
您应该将angular.module('firstApplication', ['$scope','$mdToast', '$animate'])替换为angular.module('firstApplication', ['ngMaterial'])
您应该将$this.sendMail = function(){更改为this.sendMail = function(){

此外，您引用了

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>

两次

使用角度材质在角度js中创建表单

2 个答案: