CODEWITHSUNDEEP
javascriptangularjsasp.net-mvc-4angular-material
Jand
Jand

Reputation: 493

Angular-Materials Introduction not Working or Rendering Correctly

So I'm going through the introduction in the Angular Materials site here. As far as I can tell, I'm following the directions to the letter.

Looking more on stack overflow and google seems to indicate the CND links were wrong, but I'm getting the same result. I'd post a link, but I'm new here.

I'm getting no errors and using Visual Studio 2015

When opening the page in Chrome and pull up the dev tools I get this: Errors when inspecting from Chrome

I also tried installing them from both npm and bower and changing the links accordingly to no avail.

I'd post a plunker, but again, I'm new.

Here is my code Angular code:

<!DOCTYPE html>
<html ng-app="ReconciliationWebApp">
<head>
    <!-- Angular Material style sheet -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
</head>
<body ng-controller="MainCtrl">
    <!--Content-->
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>Reconciliation Forms</h2>
        </div>
    </md-toolbar>
    <md-content>
        <div layout="row" layout-align="center start">
            <div layout-fill>
                <md-card>
                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Hello!</span>
                        </md-card-title-text>
                    </md-card-title>
                    <md-card-content>
                        <p>
                            Whatever you do, do not click the button below.
                        </p>
                    </md-card-content>
                    <md-card-actions layout="row" layout-align="start">
                        <md-button ng-click="releaseKraken()" class="md-primary md-raised">I Dare You!</md-button>
                    </md-card-actions>
                </md-card>
            </div>
        </div>
    </md-content>

    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">        </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>

    <!-- Angular Material Library -->
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
    <script src="../../Scripts/Tabs.js" charset="utf-8"></script>
    <!-- Your application bootstrap  -->
    <script type="text/javascript">
        angular.module('ReconciliationWebApp', ['ngMaterial']);
    </script>
</body>
</html>

And here is my Javascript:

angular.module('ReconciliationWebApp', ['ngMaterial'])
  .controller('MainCtrl', function ($scope, $mdDialog) {
     $scope.hello = 'Hello Angular Material';

     $scope.releaseKraken = function () {
        $mdDialog.show(
          $mdDialog.alert({
              title: 'Danger',
              textContent: 'You asked for it!',
              ok: 'Run!'
          })
        );
      }
   })
 ;

Can anybody tell me what I'm doing wrong?

I hope I've explained myself well enough, but let me know if there is anything else that I can provide that might help!

Upvotes: 2

Views: 123

Answers (1)

Sunil Lama
Sunil Lama

Reputation: 4539

If you are using the script file in a different location you need to add the reference to that file in the index page. Your code works completely fine. Here is the working plunker: http://plnkr.co/edit/Ux1pOFgvQgipMqzvfs9X?p=preview 

<!DOCTYPE html>
<html ng-app="ReconciliationWebApp">
<head>
    <!-- Angular Material style sheet -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
</head>
<body ng-controller="MainCtrl">
    <!--Content-->
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>Reconciliation Forms</h2>
        </div>
    </md-toolbar>
    <md-content>
        <div layout="row" layout-align="center start">
            <div layout-fill>
                <md-card>
                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Hello!</span>
                        </md-card-title-text>
                    </md-card-title>
                    <md-card-content>
                        <p>
                            Whatever you do, do not click the button below.
                        </p>
                    </md-card-content>
                    <md-card-actions layout="row" layout-align="start">
                        <md-button ng-click="releaseKraken()" class="md-primary md-raised">I Dare You!</md-button>
                    </md-card-actions>
                </md-card>
            </div>
        </div>
    </md-content>

    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">        </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>

    <!-- Angular Material Library -->
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
    <script src="../../Scripts/Tabs.js" charset="utf-8"></script>
    <!-- Your application bootstrap  -->
    <script type="text/javascript">
      angular.module('ReconciliationWebApp', ['ngMaterial'])
  .controller('MainCtrl', function ($scope, $mdDialog) {
     $scope.hello = 'Hello Angular Material';

     $scope.releaseKraken = function () {
        $mdDialog.show(
          $mdDialog.alert({
              title: 'Danger',
              textContent: 'You asked for it!',
              ok: 'Run!'
          })
        );
      }
   })
 ;
    </script>
</body>
</html>

Upvotes: 1

Related Questions