Lumx animation not working

I am using Django, angularJS and lumx to create a website. I am pretty new to this framework and I am trying to get the basic lumx functionality to work. I installed lumx using the instructions http://ui.lumapps.com/getting-started/installation (using "bower install lumx"). Django is setup to handle the static files correctly.

I have my base.html file that I want to test (should only show a dropdown box):

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="{% static 'browse/js/script.js' %}"></script>
    <link rel="stylesheet" href="{% static 'browse/bower_components/lumx/dist/lumx.css' %}">

    <script src="{% static 'browse/bower_components/jquery/dist/jquery.js' %}"></script>
    <script src="{% static 'browse/bower_components/velocity/velocity.js' %}"></script>
    <script src="{% static 'browse/bower_components/moment/min/moment-with-locales.js' %}"></script>
    <script src="{% static 'browse/bower_components/angular/angular.js' %}"></script>
    <script src="{% static 'browse/bower_components/lumx/dist/lumx.js' %}"></script>

</head>
<body>

    <lx-dropdown over-toggle="true">
        <button class="btn btn--m btn--black btn--flat" lx-ripple lx-dropdown-toggle>
            Dropdown toggle
        </button>

        <lx-dropdown-menu>
            <ul>
            <li><a class="dropdown-link" ng-click="dropdownAlert()">Notification</a></li>
            <li><a class="dropdown-link">Another action</a></li>
            <li><a class="dropdown-link">Another action</a></li>
            <li><a class="dropdown-link">Another action</a></li>
            <li><a class="dropdown-link">Something else here</a></li>
            <li class="dropdown-divider"></li>
            <li><span class="dropdown-link dropdown-link--is-header">Header</span></li>
            <li><a class="dropdown-link">Separated link</a></li>
            </ul>
        </lx-dropdown-menu>
    </lx-dropdown>
</body>

However the animation does not work, I am not sure what is wrong. None of the lumx animation work (like button ripple) but I am able to call the icons they have. The server logs show all of my css and js files are getting called.

Solution

I think this is because you did not initialize Angular correctly. You need to:

Declare your app with ngApp directive
Declare lumx as a dependency of your app (maybe you did in script.js?)
Make sure you call angular after the library is loaded. Right now your script.js is before the load of all libraries.

So a fixed version of your head might be like:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{% static 'browse/bower_components/lumx/dist/lumx.css' %}">

    <script src="{% static 'browse/bower_components/jquery/dist/jquery.js' %}"></script>
    <script src="{% static 'browse/bower_components/velocity/velocity.js' %}"></script>
    <script src="{% static 'browse/bower_components/moment/min/moment-with-locales.js' %}"></script>
    <script src="{% static 'browse/bower_components/angular/angular.js' %}"></script>
    <script src="{% static 'browse/bower_components/lumx/dist/lumx.js' %}"></script>
    <script src="{% static 'browse/js/script.js' %}"></script>

</head>

With something like this in script.js:

angular.module('myApp', ['lumx']);