Structure
One file
  1. import dash
  2. import dash_core_components as dcc
  3. import dash_html_components as html
  4.  
  5. # Since we're adding callbacks to elements that don't exist in the app.layout,
  6. # Dash will raise an exception to warn us that we might be
  7. # doing something wrong.
  8. # In this case, we're adding the elements through a callback, so we can ignore
  9. # the exception.
  10. app = dash.Dash(__name__, suppress_callback_exceptions=True)
  11.  
  12. app.layout = html.Div([
  13.     dcc.Location(id='url', refresh=False),
  14.     html.Div(id='page-content')
  15. ])
  16.  
  17. link_style = {'color':'blue', 'margin':'10px 5px 10px 5px', 'font-weight': 'bold', 'text-decoration': 'none'}
  18.  
  19. index_page = html.Div([
  20.     dcc.Link('Home', href='/', style=link_style),
  21.     dcc.Link('Research', href='/page-research', style=link_style),
  22.     dcc.Link('Skill', href='/page-skill', style=link_style),
  23.     html.Br(),
  24.     html.Label('Homepage content')
  25. ])
  26.  
  27. page_research_layout = html.Div([
  28.     dcc.Link('Home', href='/', style=link_style),
  29.     dcc.Link('Research', href='/page-research', style=link_style),
  30.     dcc.Link('Skill', href='/page-skill', style=link_style),
  31.     html.Br(),
  32.     html.Label('Reserach-page content')
  33. ])
  34.  
  35. page_skill_layout = html.Div([
  36.     dcc.Link('Home', href='/', style=link_style),
  37.     dcc.Link('Research', href='/page-research', style=link_style),
  38.     dcc.Link('Skill', href='/page-skill', style=link_style),
  39.     html.Br(),
  40.     html.Label('Skill-page content')
  41. ])
  42.  
  43. @app.callback(dash.dependencies.Output('page-content', 'children'),
  44.               [dash.dependencies.Input('url', 'pathname')])
  45. def display_page(pathname):
  46.     if pathname == '/page-research':
  47.         return page_research_layout
  48.     elif pathname == '/page-skill':
  49.         return page_skill_layout
  50.     else:
  51.         return index_page
  52.  
  53. if __name__ == '__main__':
  54.     app.run_server(debug=True)
  55.
Multiple files
  1. # index.py
  2. from layout import *
  3. from app import app
  4. import callbacks
  5.  
  6. app.layout = content
  7.  
  8. if __name__ == '__main__':
  9.     app.run_server(debug=True)
  10. 		
  1. # app.py
  2. import dash
  3.  
  4. app = dash.Dash(__name__, suppress_callback_exceptions=True)
  5. 		
  1. # layout.py
  2. import dash_core_components as dcc
  3. import dash_html_components as html
  4.  
  5. content = html.Div([
  6.     dcc.Location(id='url', refresh=False),
  7.     html.Div(id='page-content')
  8. ])
  9.  
  10. link_style = {'color':'blue', 'margin':'10px 5px 10px 5px', 'font-weight': 'bold', 'text-decoration': 'none'}
  11.  
  12. index_page = html.Div([
  13.     dcc.Link('Home', href='/', style=link_style),
  14.     dcc.Link('Research', href='/page-research', style=link_style),
  15.     dcc.Link('Skill', href='/page-skill', style=link_style),
  16.     html.Br(),
  17.     html.Label('Homepage content')
  18. ])
  19.  
  20. page_research_layout = html.Div([
  21.     dcc.Link('Home', href='/', style=link_style),
  22.     dcc.Link('Research', href='/page-research', style=link_style),
  23.     dcc.Link('Skill', href='/page-skill', style=link_style),
  24.     html.Br(),
  25.     html.Label('Reserach-page content')
  26. ])
  27.  
  28. page_skill_layout = html.Div([
  29.     dcc.Link('Home', href='/', style=link_style),
  30.     dcc.Link('Research', href='/page-research', style=link_style),
  31.     dcc.Link('Skill', href='/page-skill', style=link_style),
  32.     html.Br(),
  33.     html.Label('Skill-page content')
  34. ])
  35. 		
  1. # callbacks.py
  2. from dash.dependencies import Input, Output
  3. from layout import *
  4. from app import app
  5.  
  6. @app.callback(Output('page-content', 'children'),
  7.               [Input('url', 'pathname')])
  8. def display_page(pathname):
  9.     if pathname == '/page-research':
  10.         return page_research_layout
  11.     elif pathname == '/page-skill':
  12.         return page_skill_layout
  13.     else:
  14.         return index_page
  15.
Model-View-Controller

  1. # app.py
  2. from model import *
  3. from control import *
  4. from view import *
  5.  
  6. app.layout = get_content()
  7.  
  8. if __name__ == '__main__':
  9.     app.run_server(debug=True)
  10.         
  1. # model.py
  2. import pandas as pd
  3.  
  4. def get_data():
  5.     temp = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')
  6.  
  7.     return temp
  8.         
  1. # view.app
  2. import dash
  3. from dash import html
  4. from dash import dcc
  5. import plotly.express as px
  6. from model import *
  7.  
  8. def get_content():
  9.     return html.Div([
  10.         html.Button('Click', id = 'button'),
  11.         html.Div(id='output')
  12.     ])
  13.  
  14. def get_graph():
  15.     fig = px.bar(get_data(), x='year', y='pop')
  16.     return dcc.Graph(figure=fig)
  17.         
  1. # control.py
  2. import dash
  3. from dash.dependencies import Output, Input, State
  4. from dash.exceptions import PreventUpdate
  5. from model import *
  6. from view import *
  7.  
  8. app = dash.Dash(__name__)
  9.  
  10. @app.callback(
  11.     Output('output', 'children'),
  12.     Input('button', 'n_clicks')
  13. )
  14. def update_table(n_clicks):
  15.     if not n_clicks:
  16.         raise PreventUpdate
  17.  
  18.     return get_graph()
  19.