AngularJS Material not working properly after import

Question

I am trying to import Angular Material to my project.I've read how to do it using bower and already all needed files are under bower_components. I've created simple file to test if everything working properly, but I have a few problems. First of all here is the code:

<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
</head>

<body ng-app="myApp">

    <div ng-controller="MyController">

        <md-button class="md-raised" style="background-color: #112233;
               color: white;">Button</md-button>

        <br />
        <md-input-container>
            <label>Email</label>
            <input type="email">
        </md-input-container>
    </div>


    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>

    <!-- Angular Material Javascript now available via Google CDN; version 0.9.4 used here -->
    <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
</body>

Here you can see what is the output: CodePen So md-button is rendered properly, but the text is not showing, and md-input-container is not animating label and input as you can see from the CodePen link. I've used links to libraries from web instead local paths just for showing the result..it's the same.

I am probably missing something small, but these are my first attempts of using AngularJS and Material so thanks for understanding!

So, what should I do to make the library works as it should be? Thanks in advance!

Cyril Cherian · Accepted Answer · 2015-10-04 10:28:58Z

2

One change the controller is not loading up as a result the button is not coming up:

your controller code new function() is incorrect

app.controller("LoginController", new function () {

});

corrected controller code

app.controller("LoginController", function () {

});

Hope this helps!

answered Oct 4, 2015 at 10:28

Cyril Cherian

32.4k7 gold badges48 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hardartcore Over a year ago

Yep, it is working after that change! Thanks for your answer.

Collectives™ on Stack Overflow

AngularJS Material not working properly after import

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related