CODEWITHSUNDEEP
javascriptangularjsangular-material
hardartcore
hardartcore

Reputation: 17037

AngularJS Material not working properly after import

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!

Upvotes: 2

Views: 515

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

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!

Upvotes: 2

Related Questions