dimanche 26 juin 2016

How to sync dynamic and static views in Angular SPA?

I'm building simple Angular Single page app. I'll try to describe it in minimal and abstract way:

App has three main sections:

  • header - page header, which describes state to user, e.g. "Type your username".
  • view - which is dynamic and has different functional depending on app state. (e.g. There can be a form, or just buttons to choose something)
  • next/prev buttons - Which let user navigate through app.

Problem is, I dont want to repeat header and next/prev buttons in every view, I want to include them once and then dynamically update them.

here is an example markup:

<body ng-controller="MainCtrl">
    <header>
        <h1 ng-bind="mainHeader">
    </header>

    <div ng-view></div>

    <footer>
        <button type="button">Prev</button>
        <button type="button">Next</button>
    </footer>
</body>

This is sample view:

<div ng-controller="UsernameCtrl">
    <input type="text" ng-model="username">
</div>

Flow is the following: When user clicks the next button, data from the dynamic view, should be sent to the service and in case of specific type of response, next view should be loaded.

The question is, What is the correct Design for this flow?

Aucun commentaire:

Enregistrer un commentaire