angular-material elements not loading correctly

Question

I have just started on material design, I am using requireJs for loading angular-material dependencies into my app. I am not sure if it has been loaded correctly but I am able to get the logs for my app which means perhaps there shouldn't be any problem with requireJs.

The material-angular elements like slider and search bars are not loading properly, when I launch the homepage.

require.config({
    baseUrl: 'js',
    paths: {
        'angular': '../bower_components/angular/angular.min',
        'ngMaterial': '../bower_components/angular-material/angular-material.min',
        'ngRoute': '../bower_components/angular-route/angular-route.min',
        'jquery': '../bower_components/jquery/dist/jquery.min',
        'bootstrap': '../bower_components/bootstrap/dist/js/bootstrap.min',
        'd3': '../bower_components/d3/d3.min',
        'ngResource': '../bower_components/angular-resource/angular-resource.min',
        'ngAria': '../bower_components/angular-aria/angular-aria.min',
        'ngAnimate': '../bower_components/angular-animate/angular-animate.min',
        'ngSanitize': '../bower_components/angular-sanitize/angular-sanitize.min'
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'd3':{
            exports: 'd3'
        },
        'ngRoute': {
            deps: ['angular'],
            exports: 'ngRoute'
        },
        'ngResource': {
            deps: ['angular'],
            exports: 'ngResource'
        },
        'ngAria': {
            deps: ['angular'],
            exports: 'ngAria'
        },
        'ngAnimate': {
            deps: ['angular'],
            exports: 'ngAnimate'
        },
        'ngSanitize':{
            deps: ['angular'],
            exports: 'ngSanitize'
        },
        'ngMaterial':{
            deps: ['angular','ngAnimate','ngAria'],
            exports: 'ngMaterial'
        },
        'jquery':{
            exports: 'jquery'
        },
        'bootstrap':{
            deps: ['jquery'],
            exports: 'bootstrap'
        },
        'app': {
            deps: ['bootstrap', 'angular', 'ngRoute', 'ngResource','ngMaterial','ngAnimate','ngSanitize'],
            exports: 'app'
        }
    }
});

require(['app'], function () {
    angular.element(document).ready(
        function () {
            angular.bootstrap(document, ['MY.App']);
        });
});

//app.js

var dependencies =
    [
        'angular',
        'ngMaterial',
        'common/module'
    ];

define(dependencies,function(){
    var appModule =
        angular.module('MY.App',
        [
            'MY.Modules.Common',
            'ngMaterial',
            'ngAnimate',
            'ngSanitize'
        ]).config(function($mdThemingProvider) {
                $mdThemingProvider.theme('default')
                    .primaryPalette('pink')
                    .accentPalette('orange');
            });

    appModule.run(
        function ($rootScope, $log) {
            $rootScope.appInitTime = new Date();

            $log.info('Application Initialized Successfully! @ ' +
            $rootScope.appInitTime.toString());
        }
    );
});

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="icon" href="images/favicon.ico"/>
    <link rel="stylesheet" href="bower_components/angular-material/material.min.css"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<md-container>
     <md-input-container>
        <label>Email</label>
        <input type="email">
    </md-input-container>

    <!-- Default Slider -->
    <input class="mdl-slider mdl-js-slider" type="range"
           min="0" max="100" value="0" tabindex="0">
    <!-- Slider with Starting Value -->
    <input class="mdl-slider mdl-js-slider" type="range"
           min="0" max="100" value="25" tabindex="0">
</md-container>

<script src="bower_components/requirejs/require.js"
        data-main="js/main"></script>

</body>

whereas the expected behavior is like : http://www.getmdl.io/components/index.html#sliders-section

I am not getting any errors on console, my app's log is also coming up fine. — fireants
– fireants, Commented Dec 10, 2015 at 9:12
Check networking tab - may be some stylesheets are not loaded — Valentyn Shybanov
– Valentyn Shybanov, Commented Dec 10, 2015 at 11:19
I am only using one stylesheet, and it is imported in my index.html. I think it is loaded correctly as I can check the css- classes under inspect element. — fireants
– fireants, Commented Dec 10, 2015 at 12:37

Valentyn Shybanov · Accepted Answer · 2015-12-10 13:51:00Z

1

You're missing MDL and Angular.Material - they are different libraries.

If you need sliders, you should use

 <md-slider flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider" class>
 </md-slider>

Check https://material.angularjs.org/latest/demo/slider

And snippet in Stackoverflow will not work because there is no bower_components, RequireJS and all modules installed.

answered Dec 10, 2015 at 13:51

Valentyn Shybanov

19.4k7 gold badges68 silver badges59 bronze badges

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

2 Comments

fireants Over a year ago

I seriously missed that both these libraries are different actually. CSS seems to be working fine now after adding it to my index.html. But how can I export componentHandler from material.js (from mdl), via requireJs. I did something like this, ` paths: { //.. 'mdl': '../bower_components/material-design-lite/material.min' }, shim: { //.. 'mdl':{ exports: 'componentHandler' }, 'app': { deps: ['angular', 'ngRoute', 'ngResource','ngMaterial','ngAnimate','ngSanitize','mdl'], exports: 'app' }`

fireants Over a year ago

paths: { //..              'mdl': '../bower_components/material-design-lite/material.min'  }, shim: { //..               'mdl':{                       exports: 'componentHandler'             }, 'app': {                   deps: ['angular', 'ngRoute', 'ngResource','ngMaterial','ngAnimate','ngSanitize','mdl'], exports: 'app'  }

Collectives™ on Stack Overflow

angular-material elements not loading 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