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

File structure question


  • mitzelc
    Participant

    Posts: 5
    Member Reply #4766

    Hello,

    We just purchased Metronic and wish to use it to restructure a front end for an existing web application that uses AngularJS. We want to use type 4 (light sidebar). Unfortunately, the potential files we would need to use (css, html, js) are scattered about and there do not appear to be any clear instructions on which ones we need or where to put them. It is also hard to tell whether files in a directory are there for distribution purposes or if they are intended as directories in the file structure inside an app.

    Here is where all the potential files are located:

    /theme/assets/apps/css
    /theme/assets/apps/img
    /theme/assets/apps/scripts
    /theme/assets/global/css
    /theme/assets/global/img
    /theme/assets/global/plugins
    /theme/assets/global/scripts
    /theme/assets/layouts/global/scripts (js)
    /theme/assets/layouts/layout4 (there are dirs layout – layout7; presuming we want layout4) (only a parent dir here)
    /theme/assets/layouts/layout4/css (css)
    /theme/assets/layouts/layout4/css/themes (css)
    /theme/assets/layouts/layout4/img (images)
    /theme/assets/layouts/layout4/scripts (js)
    /theme/assets/pages/css
    /theme/assets/pages/img
    /theme/assets/pages/media
    /theme/assets/pages/scripts
    /theme/admin_4 (html)
    /theme/admin_4_angularjs (html)
    /theme/admin_4_angularjs/tpl (html)
    /theme/admin_4_angularjs/views (html)
    /theme/admin_4_angularjs/js
    /theme/admin_4_angularjs/js/controllers
    /theme/admin_4_angularjs/js/scripts</span>

    As you can see, there are 5 css, 5 img, 8 javascript (6 scripts), 1 plugins, 1 media, and 4 html directories to make sense of. Could you please direct me to a document that describes which files I should copy into my app’s file structure to make use of Metronic 4 with AngularJS, and which ones should be kept whole as directories? There are some clues inside metronic_v4.5.4/_documentation, but I haven’t found any clear documentation beyond that yet.

    Basically I am hoping for something like this:

    “You need the css from /app/css and /global/css. Copy the files directly to your /css folder in your app. Copy /assets/pages/css into /pages/css. You don’t need /theme/assets/layouts/global/scripts but you do need /scripts/x and /scripts/y; copy these to /scripts/x and /scripts/y.” etc., ideally with information on why various things are needed or not needed.

    Thank you!

    • This topic was modified 2 years, 7 months ago by  mitzelc.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #4773

    Hi,

    All required files are included in the main HTML file(index.html) and you can restructure the files as per requirements.  All you need to is to study index.html and see which files are included. More dependency files can be found in “js/main.js” that loaded on demand.  Moving forward you can exclude unused files or plugins from the assets following below steps:

    1) We assume you selected Admin 1(admin_1) sub theme from available 7 sub themes.

    2) There are 2 main parts of the theme. First is the assets folder that contains all the css, js and 3rd party plugins and the templates folder where actually HTML templates are placed. So refer to “theme/assets” and “theme/admin_1” folders to get started.

    3) In “theme/assets” folder you can see separate folder for layouts(admin 1, admin 2, …. admin 7) and you can keep the assets of the layout you are using(theme/assets/layouts/layout) and also the global assets(theme/layouts/global) and the rest layout assets you can remove since your selected layout does not use them. So under “theme/assets/layouts” folder you will have “theme/assets/layouts/layout” and “theme/assets/layouts/global” folder only.

    4) From “theme/admin_1” refer to the started layout_blank_page.html template. This template includes the minimal required css, js and 3rd party plugins. You can use this template as starting point to your application pages.

    5) Try to separate the HTML code of layout_blank_page.html into modular partials(header, sidebar, footer, main content) and keep the partials centralized for each page.

    6) Under 3rd party plugins folder(theme/assets/global/plugins) you can exclude unused plugins if you need. By default metronic includes over 80 3rd party plugins and most of theme you may not use so you can exclude the ones you will not use.

    7) Also you can check the theme documentation in “_documentation/index.html”

    If you need any further clarifications please let us know.

    Thanks.


    mitzelc
    Participant

    Posts: 5
    Member Reply #4774

    Excellent, thank you for the quick response.

    I will give it a try.

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #4782

    You are welcome! Good luck with your project 🙂


    mitzelc
    Participant

    Posts: 5
    Member Reply #4840

    Could you please explain how the menus work? Knowing which plugin or JavaScript file might be sufficient. We are currently having some sort of conflict with the following AngularJS libraries which is deactivating the menu functionality. Menu headers won’t expand, and of course we can’t see any links under them.

    <script src=”https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js”></script>

    <script src=”https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.min.js”></script><script src=”https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-cookies.min.js”></script><script src=”https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js”></script>


    mitzelc
    Participant

    Posts: 5
    Member Reply #4841

    We are using Metronic layout 4.

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #4860

    Hi,

    Please double check the main angularjs template index.html and make sure the JS files loading order is as per original theme. The menu and other layout parts are handled by Metronic’s core jquery based code under “assets/layouts/layout/scripts/layout.js”, “assets/global/scripts/app.js” so please make sure script loading order is followed even though you include the angularjs scripts from CDN. Also please note you should use the same angularjs version with the original theme.

    If you need any further clarifications please let us know.

    Thanks.

You must be logged in to reply to this topic.