ngInclude not loading script from index.html - AngularJS

Question

I'm starting a new AngularJS project using puikinsh/gentelella admin template.

I extract the content section from index.html into 'dashboard' view and replace it with ngView. I extract the sidebar section into 'sidebar' view using ngInclude.

All the html successfully loaded but now the sidebar can't be clicked and also all the charts in 'dashboard' view is not loaded. I didn't change any script in the index.html except adding the angular script.

I tried to place the jQuery script before angular script, but still the issue persist. The sidebar works fine and the charts loads too when I replace back the ngView & ngInclude with the html code from the view.

What am I missing?

Extra:

My code: plnkr.co/edit/gOlvOgzvNBcu9cMHBzfd

Getelella Admin Theme Demo: https://colorlib.com/polygon/gentelella/index.html

I think you need to strip down your plunker to the essence of the issue. — mvermand, Feb 28 '17 at 08:34
@mvermand The problem is the script not working after I convert the template into Angular project. — FaizFizy, Feb 28 '17 at 09:36

score 0 · Answer 1 · answered Feb 28 '17 at 08:39

0

I didn't find an ng-app in your index.html. There is no entry point for Angular in your code. Check this sample Plunker. - https://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

answered Feb 28 '17 at 08:39

Pooja

107
1
8

The ng-app is in the tag. – FaizFizy Feb 28 '17 at 09:32

score 0 · Answer 2 · answered Mar 01 '17 at 04:18

0

I use vue.js's full rendering capability to code, also run into the case;

I found that the reason is

<!-- Custom Theme Scripts -->
<script src="assets/theme/admin/gentelella/build/js/custom.min.js"></script>
<!--  vue.js components compiled file -->
<script src="{{ asset('js/app.js') }}"></script>

now I reverse their order，the sidebar's js is working with underside:

<!--  vue.js components compiled file -->
<script src="{{ asset('js/app.js') }}"></script>
<!-- Custom Theme Scripts -->
<script src="assets/theme/admin/gentelella/build/js/custom.min.js"></script>

I think that you also require('....custom.min.js') in your js template, this can be load together with the template.

answered Mar 01 '17 at 04:18

Fate

1

I already place `custom.min.js` file at the bottom of index.html – FaizFizy Mar 01 '17 at 05:23
Is there any JS error output on the console now? Or that there is no wrong, but that JS does not take effect? – Fate Mar 01 '17 at 06:43
There is no error in console. Yes, the JS does not take effect. – FaizFizy Mar 01 '17 at 06:56

score 0 · Answer 3 · answered Mar 01 '17 at 09:46

0

please remove the ng-app directive from html tag and place it on body tag. you can see the output.

preview plunker is here: [example plunker][1]

[1]: http://plnkr.co/edit/smCHpD3QK0zmfxkUT3CM?p=preview

answered Mar 01 '17 at 09:46

chaitanya gudela

1
1

What's the different? The sidebar still not working. – FaizFizy Mar 02 '17 at 01:01
i think you have not checked it perfectly. please check the link i have given above, its working perfect. i think you are viewing it as is in the plunker. make the output screen larger by dragging it and you can see the sidebar working fine. – chaitanya gudela Mar 03 '17 at 04:39
You are right regarding the point , it does not matter whether we place ng-app, you can place it on HTML tag too. Thanks – chaitanya gudela Mar 03 '17 at 04:59

Rondy Monnaie · Answer 4 · 2020-11-05T10:14:43.963

I Managed to get it working by firstly moving the initial variable declarations in custom.js to a function.

var CURRENT_URL = '',
    $BODY = '',
    $MENU_TOGGLE = '',
    $SIDEBAR_MENU = '',
    $SIDEBAR_FOOTER = '',
    $LEFT_COL = '',
    $RIGHT_COL = '',
    $NAV_MENU = '',
    $FOOTER = '';

function init_vars() {
    CURRENT_URL = window.location.href.split('#')[0].split('?')[0];
    $BODY = $('body');
    $MENU_TOGGLE = $('#menu_toggle');
    $SIDEBAR_MENU = $('#sidebar-menu');
    $SIDEBAR_FOOTER = $('.sidebar-footer');
    $LEFT_COL = $('.left_col');
    $RIGHT_COL = $('.right_col');
    $NAV_MENU = $('.nav_menu');
    $FOOTER = $('footer');
}

then inside your angular controller js file you need to add a run method that listens to the ngInclude '$includeContentLoaded' emitter.

in my case i am using an ng-include for the side-menu called menu.html

<div ng-include="'menu.html'" id="sidebar-menu" class="main_menu_side hidden-print main_menu"></div>

The 'menu.html' filename is what the second parameter (templateName) in the function will pick up.

init_vars() is then called to define the global variables after the DOM has been loaded.

We can then call the relevant inits based on what has been loaded as shown below.

app.run(function ($rootScope) {
    $rootScope.$on("$includeContentLoaded", function (event, templateName) {
        init_vars(); //my defined function to load global variables after dom has been loaded
        if (templateName == 'menu.html') { //checking if this ng-include is the one that has loaded
            init_sidebar();
            //... other init functions
        }
    });
});

You will have to disable the call in custom.js that is triggered after the DOM has loaded that initializes everything. So the below code should be commented out in your custom.js file.

$(document).ready(function () {
    init_sparklines();
    init_flot_chart();
    init_sidebar();
    init_wysiwyg();
    //...other inits
});

If you run into issues with constant reloading just add a global variable that indicates whether the scripts have been loaded.

ngInclude not loading script from index.html - AngularJS

4 Answers4