I have an angular 2 app with authentication, using this html as the main layout
<div *ngIf="auth.loggedIn" class="container">
<router-outlet></router-outlet>
</div>
<div *ngIf="!auth.loggedIn" class="login">
<router-outlet></router-outlet>
</div>
Yet when I login to the app I get the Error: Cannot find primary outlet to load error. This error is gone when I reload the page, but keeps happening when I login without refreshing the page after. What am I doing wrong?
There should be one <router-outlet></router-outlet> ,
in your code there is no meaning of putting two <router-outlet></router-outlet> ,
Logically it does nothing.
You should put all your conditions within , your component html , not into the root html part , as per your code.
Related
I'm working on revamping an old AngularJS application including a component based layout. The issue I'm having is that nesting a component within a component doesn't seem to work.
Routing:
.state('mainApp', {
url:mapPath(""),
component: 'main'
})
.state('mainApp.project', {
url: "/project",
component:'project'
})
Main component HTML:
<div class="all-wrapper solid-bg-all" >
<div class="layout-w">
<nav-bar></nav-bar>
<div class="content-w">
<top-bar></top-bar>
<div class="content-i">
<div class="content-box">
<h1>main</h1>
<div ui-view></div>
</div>
</div>
</div>
</div>
</div>
Using standalone routes for main or project works fine. Main even loads in perfectly on the index on a ui-view there. But main.project state only displays a blank screen with no errors. The constructor in project is also not being called. When I inspect the page, it just shows the index without main in the first ui-view. Any ideas on what is causing this weird problem? Kind of losing my mind since it was working before without components but with controllers.
I've even tried it with template: '<h1>test</h1>' and that doesn't seem to work. ES6 doesn't seem to be the problem as well, just converted everything back to plain JS.
Resolved: error was based on the application: Turned out it caught any transition, checked if the user was authenticated and if not sent them to login. However the login state was broken, which resulted in a blank page.
I'd like to have Vue custom components loaded only after the route has been clicked.
Let's say my app's stripped down html structure looks like this:
<div id="admin">
<admin-menu><!-- component with routes --></admin-menu>
<div id="content-container">
<!-- want dynamically loaded Single Page Components here -->
</div>
</div>
I'd like content container to be the target, where the dynamically loaded Single Page Components should be placed.
The one thing I don't want is to predefine the custom components in the content container right from the start like this:
<div id="admin">
<admin-menu><!-- component with routes --></admin-menu>
<div id="content-container">
<my-component-1></my-component-1>
<my-component-2></my-component-2>
<my-component-3></my-component-3>
<my-component-N></my-component-N>
</div>
</div>
If I do that, they must be registered i.e. loaded when vue hits them on startup of the app and but I'd like the components to be lazy loading.
So how can I initialize and place a single file component in the target content-container only after the respective router link has been clicked?
In my application I have an index.html file where i have loaded all the required scripts and the body contains am empty ng-view whose content will update based on the route url.
The first page is a landing page where I'am showing a button to the user, clicking on which am showing Login Page, by changing the path value of $location.
On Successful login a dashboard page should come where header, sidebar footer area is going to be fixed and only the center area is going to be changed based on the menu clicks which is there in header section, by changing the route value
so the center area i declared as
when am trying to load the dashboard.html page it is going to infinite loop and when am removing the center div which is nothing but an empty view , my view is rendering fine. So the problem is with using the
Can anyone suggest me whether my understanding is corect ??
If yes please suggest me how to achieve my requirement...
index.html
<div class="row">
<div data-ng-view=""></div>
</div>
dashBoard.html
<div class = "row">
<header div here>
<div>
<sidebar div>
**<div data-ng-view = ""></div>** which is not working
</div>
<footer div here>
</div>
I have provided the html code
Thanks
What you're trying to do is not supported by the default router. You can try ui-router which supports multiple and nested views. You can see an example here http://plnkr.co/edit/7FD5Wf?p=preview. The index.html contains the main view.
<body ng-controller="MainCtrl" class="container">
<div ui-view></div>
</body>
Inside contacts.html there is another view
<h1>My Contacts</h1>
<div ui-view></div>
Try checking the difference between route provider and state provider.
Here's a link to ease your search.
I want to have an single-page App (AngularJS) with following views:
Login
Main View
Now the Main-View should have different "elements":
- Toolbar
- Main Content Div
- 2 Sidebars
Can I handle all this elements as a subview? I would like to have a .html Template for each of these "elements".
Thank you very much!
Do not split into two base html. That is not good design for Angularjs apps and it will be creating problem while running test cases (unit or end-2end test cases).
Please look the below code. Here "userLoggedIn" is a $rootscope variable for loading necessary block based on authentication.
<div ng-include="'views/common/loginHeader.html'" ng-show="!userLoggedIn"></div> <!-- loginHeader -->
<div ng-include="'views/common/userHeader.html'" ng-show="userLoggedIn"></div> <!-- userHeader -->
<div class="container" ng-view></div> <!-- body -->>
<div ng-include="'views/common/footer.html'"></div> <!-- footer -->
After authentication, you can set boolean flag or object to that variable.
$rootScope.userLoggedIn= true
(or)
$rootScope.userLoggedIn= {"name":"john smith", "settings":[{}]}
In logout controller, you can set false for hiding authentication containers and redirect to login page.
$rootScope.userLoggedIn= false;
I have been trying to implement the header / footer in an Angular JS App. I was thinking of adding these as ng-include in the main index.html. However this would have worked if the header and footer are static pages. My case is slightly different... In Login page no header / footer is shown. Other pages depending on whether you are logged in or not, you have to show "Welcome user [ logout] " or "Welcome guest [ login ]".
I save the login information in the rootScope as well as set a boolean $rootScope.isLoggedIn on login. The biggest problem seems to be that the whole ng-include is not refreshed on a logoff. Hence divs with ng-show hide directives will not hide/show on change. Somebody suggested using ng-switch - it also behaves the same way.
If I move the header code inside individual views then everything is fine.
A similar question is here: Refresh header page in angularjs
Use a controller in the header/footer, as ivarni suggested. An example from an (experimental) app of my own:
In the index.html, the header will display a dynamically generated menu, login/logout etc:
<div id="navbar" class="navbar navbar-inverse navbar-fixed-top"
x-ng-controller="NavbarCtrl" x-ng-include="'app/main/navbar.html'"></div>
The NavbarCtrl builds the appropriate scope for the app/main/navbar.html template. The template would be as follows (taking into account your needs - and irrelevant details removed):
<div class="navbar-inner" x-ng-if="showHeader">
<div class="container">
<div>
<ul class="nav">
<li x-ng-repeat="menuEntry in menuEntries">
<a x-ng-href="#{{menuEntry.path}}">{{menuEntry.display}}</a>
</li>
</ul>
</div>
</div>
<div x-ng-if="userData.loggedIn">
Wellcome {{userData.userName}}!
<a x-ng-click="logout()">Logout</a>
</div>
<div x-ng-if="!userData.loggedIn">
<a x-ng-click="login()">Login</a>
</div>
</div>
So the entire markup is hidden depending on the showHeader scope variable. It creates the menu dynamically (menuEntries). And depending on userData.loggedIn, the appropriate Login/Logout message.