I am working angularjs with MVC , where I need two different ng-view based upon condition.
Currently I have put ng-view on Account folder view for all pages before login.
But Now I have to show different view (not template) after login where i have menu and other html .
How can i have multiple ng-view directive for different base page before and after login page
I don't think you can have multiple ng-view. If you can change your router, try ui-router. They have something called multiple named views
Related
I don't want to use the layout page for login page where as all other pages in application have to use the layout page. How to achieve this in Angular JS SPA?
The most flexible and most common solution is to use composite templates with ui-router. This allows you to define a top level login that uses one template, and then another top-level whose child states will all inherit another template.
I got the following problem in angular and don't really know how to get around it
When you click on the modal links a modal windows should open, each modal window should have it's own controller
When clicking on the sidebar I want a the respective sidbar controller to load as well as the linked template url.
I have tried different setups but using normal ng-view all content keeps loading in the sidebar content area.
Any ideas on how to use multiple controllers and views in this manner?
i don't 100% understand your question, but try using ng-include instead of the ng-view. You can use ng-view for the whole page and you can load dynamic partials through controllers. https://docs.angularjs.org/api/ng/directive/ngInclude
I am absolutely novice to angular.js and i have some confusion, is it compulsory to define ngRoute on the angular module, as far as i think that it is require to include if we want to change the view on the basis of URl change.
Or is it also possible to define the route and return the view manually by calling some controller and on button click and it will return a view that i can use in the my index page.
You can create a app without using ngRoute. In that case you do not use the nv-view directive in html and the app does not respond to url change.
Also in that case if you want to change any part of the site, you use ng-include which takes parameter as the view name on server and it can be dynamically changed based on some logic.
Said that, you should use the view segregation and loading based on route as it makes your application a truly single page app, where views are update without any page refresh and each of the individual views can be bookmarked.
I read about angularJS routing. I want to implement it in my web app, but unfortunately I have a rather difficult situation changing to routing now I think. This is how my app works now (and I know it's probably not the way it should, but it does work):
I have one controller for the whole app.
The view is built with some divs, one of which is a menu div. The others are 'partial' views as angularjs calls them I guess. But the problem I see here is that two of my partial views can be shown at the same time (page is built like this, partial view only takes a portion of the page for itself).
So what I am doing is: I click the button on the menu -> one partial view shows up (ng-show), then I can click something on this partial view to get the second partial view opened on the same page (menu and first partial must stay the way they are).
At the moment I include partials within some divs with php include (which is I am sure the wrong way) and the divs have ng-show on them so that nothing is shown on the beginning. Then I manipulate all the clicks in the menu with setting ng-show parameters of all my partials (views). So if one button is clicked I hide all the others (with ng-click and a function inside controller). But this is tedious work and not the angularJS way and that is why I am asking this question here.
Example of my included partial (stripped of all unnecessary css classes etc):
<div ng-show="showNames">
<?php include_once("views/AREA1/names.php") ?>
</div>
And names.php has for instance just some few elements with ng-repeat and other angularJS directives… I have many includes like that and they work with just ng-show manipulation very well. But now that I grasped some of the AngularJS concepts I see that I made a mistake…
To sum up: how can I use angularJS routes (with ng-view perhaps?-not necessary) to show views within my web app? (taking into account the situation that I have described above). I just want user to be able to know on what "part of page" he is at any given moment.
EDIT: I went trough this and I reckon I could work it out: I need a structure similar to the one in this example 2.1 Online Demo, but furthermore I need to be able to click something on ng-view which should open another view (first one should stay in place). Any idea how to accomplish this?
By using routing feature in AngularJS, the html content of ng-view will be totally replaced by the new partial. You should not use ng-view for such a purpose like showing multiple partials at the same time.
But you can think about mix the ng-view and ng-include.
Let's say, we click each item on the menu, ng-view changes the sub-partial, you can have ng-include in your sub-partials which we can all it here like sub-sub-partial.
Try reading ng-include
AngularJS has ng-view which would contain the main theme of current context, rest of the UI elements are all managed by ng-include. Routes also work in sync with nv-view.
If your view requirement are complex look at ui-router component that supports various combinations.
I have an index.html with an ng-view within the page at a specific region. I want to make it such that when I click on a button on the page, the ng-view switches to another view, but without having to define a new route or trigger a route change. The following options are what I am thinking:
A main controller around everything. Each region/view would have its own controller (subcontroller1 and subcontroller2). Main controller has the responsiblity of switching views when appropriate without route.
Is this the right train of thinking? Are there any examples of switching just a part of the page?
For the first part of your question : no, you can't partially use ng-view. There is only one ng-view per angularjs app, and the ng-view switches to another view according to the router.
You can load specific part of a page by using ng-switch, so that only part of the DOM are loaded according to the value of the ng-switch : http://docs.angularjs.org/api/ng.directive:ngSwitch
Probably the closest answer to your question is to have look at the ui-router, in order to use nested routing : https://github.com/angular-ui/ui-router