I'm sorry not good at English well, please understand the subject is not good.
I am creating a SPA with angular.js.
I want to change or append view by path using ng-route.
For example,
<div id="topMenu" ng-controller="MainMenuController as mainMenuCtrl">
menu1
menu2</div>
<div>
<div id="leftMenu"><!-- Sub menus for each main menu. path= #/(menu1|menu2) --></div>
<div id="content"><!-- Contents for each submenus path= #/(menu1|menu2)/{someSubMenu}/{contentName}--></div>
When the select top menu, then leftMenu shuld be changed.
And I access the link which is #/menu1/someContent then leftMenu and content should be changed.
What I have to do implementing these process?
Related
I need to keep a menu open when changing url. Right now if I click on View File or Diff the menu hides because the url will have a different path (/files , /diff).
Is there any way to prevent the menu from hiding when the url is changed?
This is my code:
Click to toggle menu
<div ng-show="collapsed">
<div class=container" ng-controller="MenuController" ng-show="show_menu()" ng-init="init_file_ids(number_of_files, selected_files)">
View File |
Diff |
Import |
Toggle chart
</div>
</div>
you want to make sure that collapsed variable is always set false when the pages are initiated. probably you can do that through controllers or from menu's directive controller.
I define a spinner, when the page need to do some thing for example bring some data from database i want to show it, and when its done i want to hide this spinner, so i decide to define some thing like this in Layout.cshtml :
<div id="SpinnerDiv" ng-show="showSpinner">
<div id="AllContent">
<!--I put all of my contents here-->
<div>
</div>
but there is a problem in this method, when i put ng-show to False it will hide it's child too, so its not the right way, anyone one can help how can i implement a spinner ?
Your spinner should be managed by adding/removing a specific css class to <div id="AllContent">
I have an index that serves a static header menu, and below that an ng-view that based on route, selects the right template. Like this for example:
<navbar>
...
</navbar>
<div ng-view>
</div>
Everything is good so far, when a specific route is hit, a template is loaded in that container with the associated controller.
Now, I have another page that is loaded inside ng-view, and it's fired when url "/dashboard" is hit. The problem is that the dashboard page, has a sidebar menu that also needs to contain some routing logic (more or less). When a link has been clicked from the sidebar menu, I have to load only the left hand side of the page (not the whole ng-view container).
I have identified two solutions:
1) Create a directive that stores that sidebar menu, and inject it in all of the pages that are handled by the sidebar menu ==> routing is still handled by ng-view.
2) Use ng-include and have some routing logic in the dashboard page like this:
<a ng-click="templateType = 1">Template 1</a>
<a ng-click="templateType = 2">Template 1</a>
<div ng-if="templateType === 1" ng-include="template1"
ng-controller="Template1Controller"></div>
<div ng-if="templateType === 2" ng-include="template2"
ng-controller="Template2Controller"></div>
Is there another approach? Or what is the best practice in handling both a sidebar that handles some routes, and a static menu that handles another routes, with the mention that the sidebar menu is only available on some of the routes.
I have provided a paint drawing, in the hope that I can explain my problem better.
You can use UI-Router and give a shot at nested views. Here is a really good tutorial. I think what you're trying to achieve is mentioned at the end of the tutorial.
As all others have suggested you need to go for UI-router and nested views. It is great way to set up your page layout.
You can find the answer in
Angular UI-Router How to create a "layout" state?
I am quite new to AngularJS.
It looks like AngularJS can handle multi view application with ng-view.
My question is: how can I stay on the same page but make the ng-view display as inline modal box ?!
(It looks like ng-view replaces totally the original view)
Structure of the site is
<div id="mainContainer">
<div id="loginBoxModule"></div>
<div id="usersBoxModule"></div>
</div>
You should checkout Ui.Router -> https://github.com/angular-ui/ui-router
What it basically does is the following.
You create a partial that you want to load and in the index.html you can put something like:
<body>
<a ui-sref="list">Show List</a>
<div ui-view></div>
</body>
When clicking the link the partial list.html will load into the ui-view. So it will only reload the ui-view and not the whole page.
Try to use ng-include instead of ng-view. ng-view has a very specific behavior as it's hardly linked to the ui-router as Mike was mentioning.
With ng-include you can have a set of tabs at the top of the page and when you click on a tab, you just load another template (which has 1 parent div and 1 ng-controller on that div for instance).
Not sure what's your real use case though.
I have a few static html pages of content. I want to make an index page that has two div's One for a sidebar menu and one to hold content. When one of the menu links in the sidebar is clicked I want to load one of the other static html pages into the content div.
I just cant find any documentation that shows how to do this, so i'm not even sure if it's possible. Can anyone help?
You can also use ng-view to setup routes that will load your templates into your div. It's pretty straight forward, and there's a good example # https://docs.angularjs.org/api/ngRoute/directive/ngView
Use ng-include:
<ng-include
src="{string}"
[onload="{string}"]
[autoscroll="{string}"]>
</ng-include>
http://docs.angularjs.org/api/ng.directive:ngInclude