Develop Reference

ui-sref not working in bootstrap dropdown

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.

Angular ui.router renders home state, but not other states

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.

Getting issue while using ui-router of Angular.js

I am getting some issue while using Angular.js Ui-router.First let me to explain my code below.
<ul class="nav navbar-nav">
<li ui-sref-active="active" ><a ui-sref=".profile">College Profile</a></li>
<li ui-sref-active="active" ><a ui-sref=".stream">College stream</a></li>
<li ui-sref-active="active"><a ui-sref=".dept" >College Department</a></li>
<li class="dropdown " ui-sref-active="active">
<a ui-sref=".res.userrole" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resource Management <span class="caret"></span></a>
</li>
<li ui-sref-active="active"><a ui-sref=".usermanagement">User Management</a></li>
<li ui-sref-active="active"><a ui-sref=".role">User Role</a></li>
</ul>
When user is clicking on Resource Management menu the below page is opening.
<div class="container">
<tabset>
<tab ui-sref="dashboard.res.userrole" ui-sref-active="active">
<tab-heading>Add User Role</tab-heading>
</tab>
<tab ui-sref="dashboard.res.course" ui-sref-active="active">
<tab-heading>Add Course</tab-heading>
</tab>
</tabset>
<div ui-view></div>
</div>
Here i need if user will select Add course tab the main menu Resource Management will be hignlight/active.In this case only it is active when user is clicking Add User Role tab.Please check my below route file.
.state('dashboard.res', {
url: '/res',
templateUrl: 'dashboardview/res.html',
controller: 'resController'
})
.state('dashboard.res.userrole', {
url: '/userrole',
templateUrl: 'dashboardview/userrole.html',
controller: 'resourceuserroleController'
})
.state('dashboard.res.course', {
url: '/course',
templateUrl: 'dashboardview/course.html',
controller: 'resourcecourseController'
})
Here i have also another issue.Suppose user is refreshing the page staying on any tab select the ,the both tab are getting highlighted.Actually here i need if Add user roletab will select the parent menu will be highlight and same forAdd course`.I was following this plunkr link but in my case its not working as per required.Please help me to resolve this issue.

How to select the partial view page by default using angular.js

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

Display content on click of navigation menu in angularjs

My html page contain two sections. Left side I have navigation(code is below) and right side is to display contents for respective navigation menu.
On click of each navigation menu, particular section should be rendered on my content part.
I have done it using ng-show/ng-hide by setting flag in my js file. But since I am setting flags for each sections and show/hide , my js code file looks very odd. I know this is not the correct way to do it.
I am new to angularjs. Kindly help me to achieve this efficiently.
HTML code: (only navigation part)
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<div class="collapse" id="Login">
<ul class="nav nav-pills nav-stacked">
<li><a class="glyphicon glyphicon-log-in" href="#" ng-click="LoginScreen()">Login</a></li>
<li><a class="glyphicon glyphicon-user" href="#" ng-click="RegisterScreen()">Register</a></li>
</ul>
</div>
<li>About</li>
<div class="collapse" id="Contact">
<ul class="nav nav-pills nav-stacked">
<li><a class="glyphicon glyphicon-save" href="#" ng-click="LoadUserDetailsScreen()">LoadUserDetails</a></li>
<li><a class="glyphicon glyphicon-phone-alt" href="#">Contact</a></li>
</ul>
</div>
</ul>
</div>
JS code:
var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {
$scope.FlagHomeScreen = true;
$scope.LoadData=false;
$scope.showtable=false;
$scope.showstatus=false;
$scope.FlagLoginScreen = false;
$scope.RegisterScreenFlag= false;
$scope.menuitems =[10,20,30];
$scope.LoginScreen = function(){
$scope.FlagLoginScreen = true;
$scope.FlagHomeScreen =false;
$scope.LoadData=false;
$scope.RegisterScreenFlag=false;
};
$scope.LoadUserDetailsScreen =function(){
$scope.LoadData=true;
$scope.FlagLoginScreen = false;
$scope.FlagHomeScreen =false;
$scope.RegisterScreenFlag=false;
};
$scope.RegisterScreen=function(){
$scope.RegisterScreenFlag=true;
$scope.LoadData=false;
$scope.FlagLoginScreen = false;
$scope.FlagHomeScreen =false;
};
});

You can handle your navigation in your app using ui-router. For your case you need a main template which includes your navigation bar and in each state of your app you want to show a different view.
Here is a fiddle which shows you how you can use ui-router to handle your views. For clarity I only implemented login and user details in the example below. You can add remaining parts yourself, it would be a good practice for you.
Define your states as such:
var myApp = angular.module('myApp', ['ui.router'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('home', {
url: "/",
template: '<div ui-view=""/>' // templates of child states will fill components with ui-view attribute
})
.state('home.userDetails', {
url: "userDetails",
template: '<div>user details</div>',
controller: "UserDetailsCtrl"
})
.state('home.login', {
url: "login",
//templateUrl: "path/to/login.html" // instead of giving inline templates as below, you can include your template into a html file, and use it in your state by templateUrl property
template: '<div>user login</div>',
controller: "LoginCtrl"
})
}])
And you can navigate within your states using ui-sref instead of using ng-show and ng-click.
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<div class="collapse" id="Login">
<ul class="nav nav-pills nav-stacked">
<li><a class="glyphicon glyphicon-log-in" ui-sref="home.login">Login</a></li>
<li><a class="glyphicon glyphicon-user" href="#" ng-click="RegisterScreen()">Register</a></li>
</ul>
</div>
<li>About</li>
<div class="collapse" id="Contact">
<ul class="nav nav-pills nav-stacked">
<li><a class="glyphicon glyphicon-save" ui-sref="home.userDetails">LoadUserDetails</a></li>
<li><a class="glyphicon glyphicon-phone-alt" href="#">Contact</a></li>
</ul>
</div>
</ul>
</div>
<div ui-view=""/>
Don't forget to check documentation of ui-router:
http://angular-ui.github.io/ui-router/site/#/api
JSFiddle:
http://jsfiddle.net/7tzXh/48/