This topic contains 7 replies, has 2 voices, and was last updated by Sean Sean 2 years, 6 months ago.

AngularJS: ocLazyLoad/insertBefore

  • melino
    melino
    Participant

    Posts: 10
    Member Reply #854

    I have a lot of states that use ui-select.

    Currently the js & css are listed in each ocLazyLoad section of every state in app.js.

    Now I want them to be listed in the index.html, like I ui-bootstrap, but it fails for ui-select.
    <span style=”line-height: 1.5;”>I am trying to understand the reason why Metronic loads the files via </span><span style=”line-height: 1.5;”>ocLazyLoad and </span><span style=”line-height: 1.5;”>insertBefore: ‘#ng_load_plugins_before’.</span>

    Can you please explain <span style=”line-height: 1.5;”>in one or two sentences</span><span style=”line-height: 1.5;”> the reason and if it’s possible to move the file links to index.html?</span>

    Sean
    Sean
    Keymaster

    Posts: 3913
    Support Staff Reply #874

    Hi :),

    The reason is load on demand for load efficiency. But you can load any of those js and css files in the master file with other core js and css files.

    ui-select demo has 3 dependacy files select.min.css, select.min.js and UISelectController.js. First 2 plugin files can be loaded with core plugins(css file in the top and the js file in the bottom). UISelectController.js must be loaded only after app.js and directives.js since the controllers refers to the app instance declared in app.js

    If you need any further clarification please let us know.

    Thanks.

    melino
    melino
    Participant

    Posts: 10
    Member Reply #881

    Thanks Sean,

    after your reply I have tried it again and found out UISelectController.js was not the problem, since I do not use any of the demo data.

    But now the loading from the master file works, because this time I kept ui.select in the referring state of app.js (without ‘files:’). So the states now looks like this:

    .state('articles', {
    	url: "/articles",
    	templateUrl: "views/articles.html",
    	data: {pageTitle: 'Articles', pageSubTitle: 'manage articles'},
    	controller: "ArticlesController",
    	resolve: {
    		deps: ['$ocLazyLoad', function($ocLazyLoad) {
    			return $ocLazyLoad.load([{
    				name: 'ui.select',
    				insertBefore: '#ng_load_plugins_before',
    			}, {
    				name: 'app',
    				files: ['js/controllers/ArticlesController.js']
    			}]);
    		}]
    	}
    })

    Is there a way to move all

    name: 'ui.select',
    insertBefore: '#ng_load_plugins_before',
    
    

    in one place instead of repeating it?

    • This reply was modified 2 years, 6 months ago by melino melino. Reason: better formatting
    Sean
    Sean
    Keymaster

    Posts: 3913
    Support Staff Reply #896

    Hi :),

    Great! Glad to help you out.

    To stay updated on Metronic’s new releases please follow us on http://twitter.com/keenthemes.

    If you liked Metronic please help us spread the word among your connections. Your support is important and much appreciated!

    Thanks for using Metronic.

    melino
    melino
    Participant

    Posts: 10
    Member Reply #909

    Hey Sean,

    I guess you missed the pending question in the second part of my last post? 🙂

    Is there a way to move all

    name: 'ui.select',
    insertBefore: '#ng_load_plugins_before',
    

    in one place instead of repeating it?

    • This reply was modified 2 years, 6 months ago by melino melino.
    Sean
    Sean
    Keymaster

    Posts: 3913
    Support Staff Reply #981

    Hi :),

    We tried to set it in the global settings but it did not work. Seems you will need to specify this parameter individually for each route.

    Thanks.

    melino
    melino
    Participant

    Posts: 10
    Member Reply #996

    Alright, thanks a lot for your help anyway. 🙂

    Sean
    Sean
    Keymaster

    Posts: 3913
    Support Staff Reply #1005

    You are welcome 🙂 Thanks for using Metronic !

You must be logged in to reply to this topic.