Creating a form in angular js using angular material

Question

I keep getting this error:

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module firstApplication due to:(…)

I tried naming firstApplication several different way but was unable to do so. I have a feeling its a simple solution but i cant seem to figure it out.

Here is my 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>

Here is my Angular Code

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

        };

Lex · Accepted Answer · 2016-11-22 18:56:23Z

There are several issues with your code. You have duplicate script references, you're referencing different versions of Angular libraries, your injection into the main Angular module is incorrect and you've used $this instead of this in your controller. Here is an updated snippet with these corrections made (I have not addressed what your code around the toast is trying to do because I'm not familiar with that):

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>

Thank you. It worked. The toast just leaves a message on top right of the screen with the persons name and says you rock !

Patryk Łucka · Accepted Answer · 2016-11-22 19:11:54Z

0

I see three bugs in your code:

You should reference app.js in head, not in the bottom of body
You should replace angular.module('firstApplication', ['$scope','$mdToast', '$animate']) with angular.module('firstApplication', ['ngMaterial'])
You should change $this.sendMail = function(){ to this.sendMail = function(){

Moreover, you referenced

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

two times

answered Nov 22, 2016 at 19:11

Patryk Łucka

1,0839 silver badges16 bronze badges

Collectives™ on Stack Overflow

Creating a form in angular js using angular material

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related