I have created a plunker here with my code, which includes these routes.
'use strict';
var app = angular.module('app', ['ngResource', 'ui.router','ngAnimate', 'ui.bootstrap'])
.controller('Ctrl',function($scope,$log){
// controller code....
})
.config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider,$stateProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('home', {
url:'/home',
templateUrl: '/views/home_page.html',
resolve: {
loggedin: checkLoggedin
}
})
.state('admin', {
url:'/admin',
templateUrl: 'views/admin.html',
resolve: {
loggedin: checkLoggedin
}
})
.state('login', {
url:'/login',
templateUrl: 'views/login.html',
});
}]) // end of config()
I am facing problem in routing. I have created login.html file , I am successfully logging in , after login it is redirecting to home_page.html , in this page I have created nav bar and few things. But if I click link admin from home page , it is showing only the admin page content , it is not showing nav bar in admin page. In index.html page I am using ui-view, but still it is not displaying home page's nav bar in other pages.
If I go to other pages other than home_page.html it is not showing nav bar.
If I write nav bar code in index.html then on the login screen also it will display nav bar. On login screen it should not display nav bar. please help me in solving this issue.
If you want to have the nav bar on every page after login, you must use nested views.
Mean, you define a "master" view where you have your nav-bar and define there a container, content (admin, main page) have to go in.
When I look at your source above, you not defined any nested view.
Good description and examples how to do this can be found here.
Cause the explanation would be to long for here, I provide the link.
Related
I have a simple React application that has a Home and Privacy Policy page. When using <Link /> from react-router-dom the current page scrollY position is maintained from path A to path B.
My home page has a footer at the bottom of the page. When I scroll to the bottom of the page and click on the Privacy Policy link it correctly takes me from the root path (/) to the new path of /privacy but I am not at the top of the privacy page when I get there. It maintains the scrollY position.
Why is this?
How should I be doing this to correctly navigate to the privacy policy and arrive at the top of the page?
I am importing like so: import { Link } from "react-router-dom";
My link looks like this: <Link to="/privacy">Privacy Policy</Link>
react-router-dom doesn't do scroll restoration to my best knowledge.
Try using useLayoutEffect.
Import it from react and use the following inside your Privacy page. This will allow you use window.scrollTo().
import { useLayoutEffect } from "react";
const Privacy = () => {
useLayoutEffect(() => {
window.scrollTo(0, 0);
}, []);
return <div>... your code</div>;
};
export default Privacy;
I have angular project in which I have included custom js in index.html . I have following code in custom.js file for navigation menu open and close for mobile devices. active class not getting applied in mobile view. I searched but did not found reason/solution of it.
$(document).ready(function () {
// Navigation Toggle
$("#nav-icon").click(function () {
$(this).toggleClass("active");
$(".close_overlay").toggleClass("active");
$(".navigation").toggleClass("active");
});
$(".close_overlay").click(function () {
$("#nav-icon").removeClass("active");
$(".close_overlay").removeClass("active");
$(".navigation").removeClass("active");
});
$("header .singleMenu").click(function () {
$("#nav-icon").removeClass("active");
$(".close_overlay").removeClass("active");
$(".navigation").removeClass("active");
});
});
If above code is included in header component ts file. It works. But that's not correct way of doing this.
How can add active class in mobile view when click events as above?
please guide and help. thanks.
I have a component that I use in a page and this component have tabs in it, the tabs works fine they aren't components though, they are just in the component.
This is what I'm trying to do, have a new link when clicking on a tab:
entity/someUid <-- Current behaviour
entity/someUid/messages <-- When clicking on a tab
entity/someUid/languages <-- When clicking on a tab
Page:
<app-entity
(currentTab)="getCurrentTab($event)"
></app-entity>
Page Module:
const routes: Routes = [
{
path: '',
component: EntityPage
}
];
Page Component:
// It does navigate like the example above but instead my 404 page is showing up
getCurrentTab(tab: string) {
this.router.navigate(['entity', this.entity.uid, tab]);
}
The component itself:
<ul>
<li (click)="view = 'messages'; currentTab.emit('messages')">Messages</li>
<li (click)="view = 'languages'; currentTab.emit('languages')">Languages</li>
</ul>
<div *ngIf="view == 'messages'">
Messages Content
</div>
<div *ngIf="view == 'languages'">
Languages Content
</div>
#Output() currentTab: EventEmitter<string> = new EventEmitter();
view: string
How can I make my component have routing while I still can render this component inside a page?
Try this
https://codecraft.tv/courses/angular/routing/nested-routes/
Children routes by adding one more router outlet in app entity and make the routes declared in its module
I have a page with 2 ui-views, the top view has a form and some controls and the bottom view will be changed by the top view, but defaults to displaying a few tables.
I decided to try and do this initial page all in one state, and I am wondering if this is the correct way in this case. The state is called "tracker" and has the views with content as described above. When the user clicks a button in the top view, I want the bottom view to display alternate content (e.g. a map).
I can figure out how to change state "tracker" (views loaded with "controls.html" and "content.html") to a complete second state ("controls.html" and "map.html").
What I'm confused about is how would I change only the bottom view content#tracker between "contact.html" and "map.html" based on the button state in the top view.
The router is:
(function() {
'use strict';
angular.module('pb.tracker').config(function($stateProvider) {
$stateProvider.state('tracker', {
url: '/tracker',
controller: 'TrackerController as track',
data: {
pageTitle: 'Parcel Tracker',
access: 'public',
bodyClass: 'tracker'
},
views: {
'': {
templateUrl: 'modules/tracker/templates/tracker.html'
},
'controls#tracker': {
templateUrl: 'modules/tracker/templates/tracker-controls.html'
},
'content#tracker': {
templateUrl: 'modules/tracker/templates/tracker-details.html'
}
}
});
});
})();
and the base page's html is
<div class="container">
<div class="row spacer-top-xl">
<div class="col-md-12">
<div ui-view="controls"></div>
<div ui-view="content"></div>
</div>
</div>
</div>
One way out is using $broadcast and $on :
From the top view controller..
$scope.sendBroadcast = function() {
$rootScope.$broadcast('myAction');
}
and from the bottom view controller
$scope.$on('myAction', function() {
//Message received
});
another option may be using a service and $watch on a particular value for change.
I am trying to use multiple UI-views in my AngularJS app and it is not working as expected. The app is a dashboard.
My directory structure is as follows:
index.html
app/
app.js
dashboard/
dashboard.html
dashboard.js
partials/
business.html
items.html
orders.html
sales.html
login/
login.html
login.js
The problem that I am having is that my index.html file has the following line of code:
<div ui-view></div>
The above line enables my application to show the login.html page and dashboard.html page. Now I want to be able to have partial views in my dashboard.html page and so I have also put the same line of code
<div ui-view></div>
in order to be able to embed partial views in my dashboard page. Instead of embedding though, the page instead just redirects. So for example if I am in my dashboard.html and click on a navigation item such as 'business', I am redirected to partials/business.html instead of the content being embedded.
1) Can I have multiple ui-views embedded within each other?
2) Am I correctly embedding the partial views?
I have scoured the internet but cannot find a solution. Thanks in advance for the help!
You can definitely have multiple embedded views.
Check out these AngularJS UI-Router tutorials: Nested Views and Multiple Named Views.
Let me know if you still have issues after looking them over.
You can define a ui-view inside another ui-view. I have implemented it in the following manner and its pretty straight forward.
Inside index.html I have code:
<div ui-view=""></div>
Then inside user.html I have code
<div ui-view=""></div>
And I have defined a config for displaying my views as
.config(function($urlRouterProvider, $stateProvider) {
var users = {
//Name must be in format Parent.Child
name: 'users',
url: '/user',
templateUrl: 'users/user.html',
controller: 'usersHandler',
data: {
pageTitle: 'Welcome to Users'
},
},
createUsers = {
name: 'users.createUsers',
url: '/createUser',
templateUrl: 'users/createUser.html',
data: {
pageTitle: 'Create Users'
}
},
listUsers = {
name: 'users.listUsers',
url: '/listUsers',
templateUrl: 'users/userLists.html',
data: {
pageTitle: 'Users listing'
}
},
getUserDealer = {
name: 'users.getUserDealer',
url: '/getUserDealer',
templateUrl: 'users/getUserDealer.html',
data: {
pageTitle: 'Users dealer listing'
}
},
editUser = {
name: 'users.editUser',
url: '/editUser',
templateUrl: 'users/editUser.html',
data: {
pageTitle: 'Edit User'
}
};
//Similarly define all the combination you want to separate
//add routes to stateProvider
$stateProvider
.state('users', users)
.state('users.createUsers', createUsers)
.state('users.listUsers', listUsers)
.state('users.getUserDealer', getUserDealer)
.state('users.editUser', editUser);
$urlRouterProvider.otherwise('/user/listUsers');
});
Whats happening is this that user.html is my parent file which is loaded inside index.html and editUser.html, getUserDealer.html and userLists.html etc are its children which I load within user.html using ui-view.
And I provide the links for nested pages as:
<ul class="nav navbar-nav">
<li>NEW USER</li>
<li>GET USER</li>
</ul>
This can be extended to additional parents and their children as per the need.
Hope it helps!!