Angular-Materials Introduction not Working or Rendering Correctly

Question

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!

Uhm i think your version of Angular material is too old, already is in 1.0.9, and maybe your dependency and elements are from a newest version. — Paulo Galdo Sandoval
– Paulo Galdo Sandoval, Commented Jun 24, 2016 at 5:30
Since you definied your module in script tag in the html it won't look for you seperate file and try to use latest library if possbile. — nextt1
– nextt1, Commented Jun 24, 2016 at 5:30

Sunil Lama · Accepted Answer · 2016-06-24 05:30:29Z

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>

This worked great! I ended up moving the controller (I had part of it in index.html for some reason) to the script file and referenced it in index.html as you basically said.

Collectives™ on Stack Overflow

Angular-Materials Introduction not Working or Rendering Correctly

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related