使用角度材料在角度js中创建表单答案

【问题标题】：Creating a form in angular js using angular material使用角度材料在角度js中创建表单
【发布时间】：2016-11-22 18:25:32
【问题描述】：

我不断收到此错误：

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>

这是我的 Angular 代码

'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)
                );
           };

        };

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

您的代码存在几个问题。您有重复的脚本引用，您引用了不同版本的 Angular 库，您对主 Angular 模块的注入不正确，并且您在控制器中使用了 $this 而不是 this。这是一个更新的 sn-p 并进行了这些更正（我没有解决你在 toast 周围的代码试图做什么，因为我不熟悉）：

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)
    );
  };

};

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

【讨论】：

谢谢。有效。祝酒词只是在屏幕右上角留下一条带有人名的消息，并说你很摇滚！

【解决方案2】：

我在您的代码中发现了三个错误：

您应该在head 中引用app.js，而不是在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>

两次

【讨论】：