I have the same situation as the following two posts:
Angular ui-router, scroll to next step on state change
and
Angular ui-router change state on scroll
TL;DR
I have multiple sections on one page where I want the user to scroll to when clicking on a link.
I get the scroll to function to work but it seems to scroll to random positions, except on the first click.
I also use templatecache (html2js) for my views.
I have the following routing:
$urlRouterProvider.otherwise("/");
var views = {
"viewAbout": {templateUrl: "app/views/about/about.tpl.html"},
"viewMeetups": {templateUrl: "app/views/meetup/meetup.tpl.html"},
"viewNextMeetup": {templateUrl: "app/views/meetup/next-meetup.tpl.html"},
"viewSponsors": {templateUrl: "app/views/sponsors/sponsors.tpl.html"},
"viewContactUs": {templateUrl: "app/views/contact-us/contact-us.tpl.html"},
"viewFooter": {templateUrl: "app/views/footer/footer.tpl.html"}
};
$stateProvider
.state('home', {
url: "/",
views: views
})
.state('about', {
url: "/about",
views: views,
onEnter: function () {
$('#scrollme').animate({
scrollTop: $("#about").offset().top
}, 2000);
}
})
.state('meetups', {
url: "/meetups",
views: views,
onEnter: function () {
$('#scrollme').animate({
scrollTop: $("#meetups").offset().top
}, 2000);
}
})
And the following menu:
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
<a ui-sref="about">About</a>
</li>
<li class="page-scroll">
<a ui-sref="meetups">Meetups</a>
</li>
<li class="page-scroll">
<a ui-sref="sponsors">Sponsors</a>
</li>
<li class="page-scroll">
<a ui-sref="contact">Contact us</a>
</li>
</ul>
<div ui-view="viewNextMeetup"></div>
<div ui-view="viewAbout"></div>
<div ui-view="viewMeetups"></div>
<div ui-view="viewSponsors"></div>
<div ui-view="viewContactUs"></div>
<div ui-view="viewFooter"></div>
Anyone could help me out with this ?
Related
I'm using the following ui-router configuration. So, when the user clicks on a tab, the tab is highlighted correctly as expected. However, no tab is highlighted when the page first loads and the user has to click on a tab for its state to get activated. I would like the home state to be the active tab when the page first loads. How can I achieve this?
angular.module("app", ['app.home', 'app.page1', 'app.page2', 'app.page3'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('home');
$stateProvider
.state('home', {
url: '/',
views: {
'MainContentPlaceHolder': {
templateUrl: '../Home/_Layout.html'
}
}
})
.state('page1', {
url: '/page1',
views: {
'MainContentPlaceHolder': {
templateUrl: '../Page-1/_Layout.html'
}
}
})
.state('page2', {
url: '/page2',
views: {
'MainContentPlaceHolder': {
templateUrl: '../Page-2/_Layout.html'
}
}
})
.state('page3', {
url: '/page3',
views: {
'MainContentPlaceHolder': {
templateUrl: '../Page-3/_Layout.html'
}
}
});
})
My HTML markup is:
<body>
<section id="NavBar">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="home"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a>
</div>
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="home">Home</a></li>
<li ui-sref-active="active"><a ui-sref="page1">Page 1</a></li>
<li ui-sref-active="active"><a ui-sref="page2">Page 2</a></li>
<li ui-sref-active="active"><a ui-sref="page3">Page 3</a></li>
</ul>
</div>
</nav>
</section>
<section id="ContentPlaceHolder" ui-view="MainContentPlaceHolder"></section>
</body>
Okay so I managed to figure out the issue. It was a syntax error at the third line which should change from
$urlRouterProvider.otherwise('home');
to
$urlRouterProvider.otherwise('/');
I had thought that $urlRouter.otherwise() takes in the state as parameter. It should in fact be the redirect url.
I am building an app using the MEAN stack, and in my index.ejs files I have
<div ui-view style="height: 100%"></div>.
My angularApp.js file has the following states declared:
var app = angular.module('foundry-io', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'javascripts/views/main.html',
controller: 'MainController'
})
.state('print', {
url: '/print',
templateURL: 'javascripts/views/print.html',
controller: 'MainController'
});
$urlRouterProvider.otherwise('/');
}]);
I also have a navbar as follows:
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" ui-sref="print">Services</a>
</li>
<li>
<a class="page-scroll" href="#technology">Technology</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
The home state renders as expected, but when clicking the "Services" nav button the view that's rendered is a blank, black screen. How do I make additional views render beyond the "home" view?
Thank you.
I have one problem.I have a login page.When user will logged in the home page is coming.In that home page i have some options which called its respective partial view page.Let me to explain my code first.
user.html:
<nav class="navbar navbar-default navbar-fixed-top"
style="margin-top:50px;z-index:111!important;">
<div class="container" style="width:1270px;">
div class="navbar-header navbar-brand">
{{deptName}}
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="user">Home</a></li>
<li ui-sref-active="active"><a ui-sref=".plan">Plan</a></li>
<li ui-sref-active="active"><a ui-sref="#">Subject</a></li>
<!-- <li ui-sref-active="active"><a ui-sref=".hod">HOD</a></li> -->
<li ui-sref-active="active"><a ui-sref="#">User Management</a></li>
<li ui-sref-active="active"><a ui-sref="#">User Role</a></li>
<li ui-sref-active="active"><a ui-sref="#">Time Table</a></li>
<li ui-sref-active="active"><a ui-sref="#">Faculty</a></li>
<li ui-sref-active="active"><a ui-sref="#">WDS</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--main_heading_div-->
<!--middle_content_details_data-->
<div class="row" style="padding-top:120px;" ui-view>
</div>
After login the above page is coming. Check my below routing path:
.state('user',{
url: '/user',
templateUrl: 'userview/user.html',
controller: 'userController'
})
.state('user.plan',{
url: '/plan',
templateUrl: 'userview/plan.html',
controller: 'planController'
})
.state('user.profile',{
url: '/profile',
templateUrl: 'userview/profile.html',
controller: 'userProfileController'
})
Here I need when user will logged in the plan.html will set up by default inside the ui-view of user.html.
Well, it seems like a "default redirection issue". And there are solutions, this one I do like the most:
Redirect a state to default substate with UI-Router in AngularJS
where we can mark any state with its default redirection target:
.state('user',{
url: '/user',
templateUrl: 'userview/user.html',
controller: 'userController',
// here is new marker
redirectTo: 'user.plan'
})
And with this small code snippet it will start to do the magic:
app.run(['$rootScope', '$state', function($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function(evt, to, params) {
if (to.redirectTo) {
evt.preventDefault();
$state.go(to.redirectTo, params)
}
});
}]);
There is even working example
i need to add class name dynamically inside controller page when state will change using angular js.I did some coding but its working only after page refresh.I am explaining my code below.
dashboard.html:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class={{home_active}} ><a ui-sref="dashboard">Home</a></li>
<li class={{profile_active}} ><a ui-sref=".profile" >Profile</a></li>
<li class={{dept_active}}><a ui-sref=".dept">Department</a></li>
<li class={{pricipal_active}}><a ui-sref=".princpal">Princpal</a></li>
<li class={{hod_active}}><a ui-sref=".dept_head">Dept. Head</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--main_heading_div-->
<!--middle_content_details_data-->
<div class="row" style="padding-top:120px;" ui-view>
</div>
loginRoute.js:
var Admin=angular.module('Channabasavashwara',['ui.router']);
Admin.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('/', {
url: '/',
templateUrl: 'dashboardview/login.html',
controller: 'loginController'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboardview/dashboard.html',
controller: 'dashboardController'
})
.state('dashboard.profile', {
url: '/profile',
templateUrl: 'dashboardview/profile.html',
controller: 'profileController'
})
.state('dashboard.dept', {
url: '/dept',
templateUrl: 'dashboardview/dept.html',
controller: 'deptController'
})
.state('dashboard.princpal', {
url: '/princpal',
templateUrl: 'dashboardview/princpal.html',
controller: 'princpalController'
})
.state('dashboard.dept_head', {
url: '/dept_head',
templateUrl: 'dashboardview/depthead.html',
controller: 'deptheadController'
})
.state('home',{
url: '/home',
templateUrl: 'homeview/home.html',
controller: 'homeController'
})
.state('home.course', {
url: '/course',
templateUrl: 'homeview/course.html',
controller: 'coursecontroller'
})
.state('home.subject', {
url: '/subject',
templateUrl: 'homeview/subject.html',
controller: 'subjectcontroller'
})
dashboardController.js:
var dashboard=angular.module('Channabasavashwara');
dashboard.controller('dashboardController',function($scope,$http,$state){
//$state.current='';
if($state.current.url=="/dashboard"){
$scope.profile_active="";
$scope.home_active="active";
$scope.dept_active="";
$scope.pricipal_active="";
$scope.hod_active="";
}
else if($state.current.url=="/profile"){
$scope.profile_active="active";
$scope.home_active="";
$scope.dept_active="";
$scope.pricipal_active="";
$scope.hod_active="";
}
else if($state.current.url=="/dept"){
$scope.profile_active="";
$scope.home_active="";
$scope.dept_active="active";
$scope.pricipal_active="";
$scope.hod_active="";
}
else if($state.current.url=="/princpal"){
$scope.profile_active="";
$scope.home_active="";
$scope.dept_active="";
$scope.pricipal_active="active";
$scope.hod_active="";
}
else{
$scope.profile_active="";
$scope.home_active="";
$scope.dept_active="";
$scope.pricipal_active="";
$scope.hod_active="active";
}
})
Here i am getting the class name but only after page reloading.I need when user will change the state according to that state the class name will add.Please help me.
It looks like you're using angular-ui-router. They have a build in directive called ui-sref-active. It adds a class to an element if the related ui-sref is active.
In your case you don't need all the code in your dashboardController.js. Just change your dashboard.html and add the ui-sref-active directive to the li elements:
dashboard.html:
<ul class="nav navbar-nav">
<li ui-sref-active="active" ><a ui-sref="dashboard">Home</a></li>
<li ui-sref-active="active" ><a ui-sref=".profile" >Profile</a></li>
<li ui-sref-active="active"><a ui-sref=".dept">Department</a></li>
<li ui-sref-active="active"><a ui-sref=".princpal">Princpal</a></li>
<li ui-sref-active="active"><a ui-sref=".dept_head">Dept. Head</a></li>
</ul>
I want to add breadcrums in my application , How i can achieve this task using AngularJS. So far i have implemented router and header file and not sure after this how to use breadcrums in AngularJS.
So far tried below code...
INDEX
<div class="container mainIndexContainer">
<div id="wrap">
<div ng-include src="'views/header.html'"></div>
<div class="container mainIndexContainer">
<div ui-view=""></div>
</div>
<div ng-include src="'views/footer.html'"></div>
</div>
HTML
<div class="row">
<div class="container-fluid banner">
<div class="red title pull-left">Risk Assessment Platform</div>
<div class="blue pull-right"></div>
</div>
</div>
<div class="row">
<nav ng-show="user.isAuthenticated" class="navbar navbar-default risknavheader" role="navigation">
<ul kendo-menu
k-orientation="horizontal" k-rebind="'horizontal'">
<li><a ui-sref="home" ng-click="showConfirmationOnChange('/')">Dashboard</a></li>
<li><a href="">Process Risk & Control
Inventory</a>
<ul class="submenu">
<li ng-show="PROCESS_ADD"><a ui-sref="createProcess" ng-click="showConfirmationOnChange('/process/create')">Create
New Process</a></li>
<li ng-show="RISK_ADD"><a ui-sref="createRisk" ng-click="showConfirmationOnChange('/risk/create')">Create New Unaligned
Risk</a></li>
<li ng-show="CONTROL_ADD"><a ui-sref="createControl" ng-click="showConfirmationOnChange('/createNewControl/_new')">Create
New Unaligned Control</a></li>
<li ng-show="PROCESS_VIEW || RISK_VIEW || CONTROL_VIEW"><a ui-sref="search" ng-click="showConfirmationOnChange('/viewSearchInv')">View/
Search Inventory</a></li>
<li disabled>View End-to-End</li>
<li disabled>Reports</li >
</ul></li>
<li><a class="no-style" href="#">Data Upload </a>
<ul class="submenu">
<!-- This below link will be useful for future development -->
<!-- li Upload Inventory</li -->
<li disabled>Upload Inventory</li>
</ul></li>
<li><a ui-sref="home">Risk Assessment</a>
<ul class="submenu">
<li disabled>RCSA</li>
<li disabled>CRA</li>
<li disabled>Reports</li>
</ul></li>
<li><a ui-sref="home">Administration </a>
</li>
<li style="margin-right: 0px;" class="nav navbar-nav navbar-right" ng-show="user.isAuthenticated"><a>{{user.customUserDetails.workFullName}}</a>
<ul class="submenu">
<li><a ui-sref="logout">Logout</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
ROUTER.JS
angular.module('riskAssessmentApp')
.config(function($stateProvider, $httpProvider, $urlRouterProvider) {
/*
* This has to be here because the browsers will not catch the home
* state without it
*/
$urlRouterProvider.otherwise( function($injector, $location) {
var $state = $injector.get("$state");
$state.go("home");
});
$httpProvider.defaults.withCredentials = true;
$httpProvider.defaults.headers.post = {'Content-Type': 'application/json'};
$httpProvider.interceptors.push('HttpResponseInterceptor');
$stateProvider
.state('home', {
url : '/',
templateUrl: 'views/riskAssesmentHomePage.html',
controller: 'riskHomePageController',
data: {
authenticate: true
}
}).state('smlogin', {
url: '/smlogin',
controller: 'SMLoginController'
})
.state('login', {
url : '/login',
templateUrl : 'views/login.html',
controller : 'LoginController'
})
.state('error', {
url:'/error',
templateUrl: 'views/error.html'
})
.state('settings', {
url:'/settings',
templateUrl: 'views/settings.html',
controller: 'SettingsController'
})
.state('sessions', {
url:'/sessions',
templateUrl: 'views/sessions.html',
controller: 'SessionsController',
resolve:{
resolvedSessions:['Sessions', function (Sessions) {
return Sessions.get();
}]
}
})
.state('metrics', {
url:'/metrics',
templateUrl: 'views/metrics.html',
controller: 'MetricsController'
})
.state('logs', {
url:'/logs',
templateUrl: 'views/logs.html',
controller: 'LogsController',
resolve:{
resolvedLogs:['LogsService', function (LogsService) {
return LogsService.findAll();
}]
}
})
.state('createProcess', {
url:'/process/create',
templateUrl : 'views/createEditProcessContent.html',
controller : 'ProcessController',
data: {
authenticate: true
}
})
.state('editProcess', {
url:'/process/:process_Id/:refresh',
templateUrl : 'views/createEditProcessContent.html',
controller : 'ProcessController',
data: {
authenticate: true
}
})
.state('createRisk', {
url:'/risk/create',
templateUrl: 'views/createNewRisk.html',
controller: 'RiskController',
data: {
authenticate: true
}
})
You can use https://github.com/ncuillery/angular-breadcrumb
Define a ncyBreadcrumb.label property to each states
And then use the directive
<div ncy-breadcrumb></div>