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.
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 have the following angular code in header.html
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li ng-if='loginState.loggedIn' class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
id="userDropdown"
role="button"
aria-haspopup="true" aria-expanded="false">
{{loginState.currentUser}} <span class="caret"></span>
</a>
<ul class="dropdown-menu" data-toggle="collapse" aria-labelledby="userDropdown">
<li><a ui-sref="app.profile">Your Profile</a></li>
<li><a ui-sref="app.settings">Settings</a></li>
</ul>
</li>
<!-- this would work
<li><a ui-sref="app.profile">Your Profile</a></li>
-->
</ul>
</div>
The states code are very straightforward:
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/',
views: {
'header': {
templateUrl: 'static/templates/header.html',
},
'content': {
templateUrl: 'static/templates/landing.html',
},
'footer': {
templateUrl: 'static/templates/footer.html',
}
}
})
.state('app.profile', {
url: 'profile',
views: {
'content#': {
templateUrl : 'static/templates/profile.html',
controller : 'ProfileController'
}
}
})
;
$urlRouterProvider.otherwise('/');
}])
So basically once logged in, I would have a dropdown from the top right corner, and I want to transit to other states when clicking entries in dropdown menu.
However, when clicking Your Profile nothing happens, the state has not gone to app.profile. If I move the ui-sref out of the dropdown and to the navbar directly(like the commented code), it works perfectly fine.
So is there something prevent ui-sref from working in a bootstrap dropdown?
I found the problem, it's the data-toggle attribute in the dropdown menu ul, once it's removed everything works fine.
I don't know why it would prevent ui-sref from working, thought it would just collapse the menu.
EDIT:
The problem is reproducible only if I load jquery after ui-router:
<script src="//npmcdn.com/angular-ui-router#latest/release/angular-ui-router.js"></script>
<script data-require="jquery#2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
If I swap the order it works fine.
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'm dealing with a redirection with ui-router.
I have a menu with items. When I chose one of them it redirects to the correspondant html template to load. Each html template contains tabs.
I would like to open a default tab for each item in the menu.
Here are my states:
$stateProvider
.state('app.my', {
url:'/my/:numeral',
templateUrl:
function (stateParams) {
return stateParams.numeral + '.html';
}
})
.state('app.my.first', {
url:'/:filter',
templateUrl:'list-results.html',
controller: 'FilterCtrl',
controllerAs: 'results'
})
.state('app.my.second', {
url:'/:filter',
templateUrl:'list-results.html',
controller: 'FilterCtrl',
controllerAs: 'results'
});
Here I created a Plunkr which works fine when I click on tabs manually.
My goal is to set a default open tab for each menu item.
http://plnkr.co/edit/oIQDIhx2vrp1o01Xz3EL?p=preview
Thanks in advance!
edit ui-sref values like that:
<ul class="nav nav-pills">
<li>
<a class="nav-tab" ui-sref-active="active" ui-sref="app.my.first({numeral:'first',filter:'draft'})">First</a>
</li>
<li>
<a class="nav-tab" ui-sref-active="active" ui-sref="app.my.second({numeral:'second',filter:'draft'})">Second</a>
</li>
</ul>
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 ?