1

Currently I am working on my app and I decided to use AngularJS as a framework to structure my front-end code. However, I don't have any experience with AngularJS and thus, am currently struggling with the concepts and logics of it.

Below you can see a rough draft of my app's scaffold: application scaffold

So what I am trying to do is to create a single page application for my whole app.

Within the <menu bar> one can select different pages to display within the workspace. I learned that I can realise this behaviour by using the <ng-view> directive.

However, what I want to do is, depending on the buttons clicked within the <workspace> (-> the currently loaded view) I'd like to show different <sidebars>.

For example: If one clicks on an edit object button within the workspace, the form to edit the object will be loaded into the sidebar.

At first I though I could solve this by using multiple ng-view directives within the app, but I learned that this is not possible.

So, do you have any ideas on how to realise the above described behaviour? I would like to asynchronously load <sidebar> templates whenever they are needed within the app. These sidebar templates should contain some logic, e.g. buttons to submit data etc.

I really don't know how to realise this behaviour, as I'm as well struggling with how to use scopes and controllers in this context.

Any ideas, articles, examples are highly suggested! Thanks.

Edit: I created a small and only minimalised draft of how I imagine AngularJS would handle the process: enter image description here

Improve this question

1 Answer 1

Reset to default
1

You can use Angular-UI.

The UI-Router has much more powerful routing features than the default AngularJS router.

For the views, with Angular-UI, you can have multiple views in a same document (ui-view) and each can load a different template depending on the current application state (the URL).

Here is the documentation for these components:

You definitely should check it out!

Please note that once you'll get your two templates, they will be in different scopes so you'll need some sort of communication service to handle passing data from one scope to another without getting into a $watch or $rootscope hell.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.