How to integrate Ionic with an existing Django project?

ionic-v1
1

Hi. I’ve been building a Django project and I want it to be integrated with the Ionic framework. I’ve tried simply adding the css and js files, which get loaded correctly (status 304 in the console network), but the custom HTML tags like < ion-side-menus > don’t work as they should according to the Ionic docs.

I also tried integrating Ionic by installing, following these instructions:

http://ionicframework.com/docs/guide/installation.html
And then I created a blank project on my desktop, added the iOS and Android platforms, and moved all files to my Django base directory… still no luck.

Can anyone point me in the right direction? Any help is very appreciated. Thanks

My HTML template:

<!DOCTYPE html>
{% load staticfiles %}

<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>
    {% block page_title_block %}{% endblock %}
</title>
<link rel="stylesheet" style="text/css" href="{% static 'css/bootstrap.min.css' %}"/>
<link rel="stylesheet" style="text/css" href="{% static 'css/ionic.css' %}"/>
<link rel="stylesheet" style="text/css" href="{% static 'css/ionicons.min.css' %}"/>

</head>
<body ng-app="ia">
<div class="container">
<div class="jumbotron">
    <div class="bar bar-header">
        <button class="button button-icon icon ion-navicon" ng-click="toggleLeftSideMenu()"></button>
        <div class="h1 title">
            <b>
                {% block header_title_block %}{% endblock %}
            </b>
        </div>
    </div>
    <div>
        <ion-side-menus>
            <!-- Center content -->
            <ion-side-menu-content ng-controller="leftMenuCtrl">
                <ion-content class="has-header">
                    <div>
                        {% block body_block %}{% endblock %}
                    </div>
                </ion-content>
            </ion-side-menu-content>

            <!--Left menu -->
            <ion-side-menu side="left">
                <ion-content class="has-header">
                    <div class="list">
                        <a class="item item-icon-left" href="{% url 'profile' %}">
                            <i class="icon ion-person"></i>
                            Profile
                        </a>
                        <a class="item item-icon-left" href="{% url 'lfstd' %}">
                            <i class="icon ion-person-stalker"></i>
                            LFSTD
                            <span class="badge badge-assertive">10</span>
                        </a>
                    </div>
                </ion-content>
            </ion-side-menu>
        </ion-side-menus>
    </div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="{% static 'js/ionic.bundle.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js'%}"></script>
<script src="{% static 'js/app.js' %}"></script>

<script src="{% static 'js/angular.min.js' %}"></script>
<script src="{% static 'js/angular-ui-router.js' %}"></script>
<script src="{% static 'js/ionic.min.js'%}"></script>
<script src="{% static 'js/ionic-angular.min.js'%}"></script>
</body>
</html>

app.js:

angular
.module('ia', ['ui-route','ionic'])

.controller('LFSTD', ['$scope', '$ionicSideMenuDelegate', function($scope) {
$scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
};
}]);

function leftMenuCtrl($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeftSideMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
  };
}
2

Some code to look at would help but I’m guessing you haven’t added the ng-app on your body tag (or wherever). Angular will only work inside an ng-app node and it’s children.

3

I edited the question to include the code.

4

So, that isn’t valid angular (nevermind ionic), quite a few problems the main one being that leftMenuCtrl isn’t a controller it just a function (LFSTD is a controller) and even it it was a controller the ng-click=“toggleLeftSideMenu()” is higher up the dom tree than the controller so would never have been called anyway.

Rather than list out all the problems and solutions I would just recommend that you go through an angular tutorial or two before you try to tackle this problem, without a grasp of angular you are going to really struggle with ionic.