I am using AngularUI Router to navigate content on my website. I have some webpages that show the header/footer navigation and some that do not. I want to be able to detect what my current page is and insert the HTML for the header/footer if needed.
Here is my current router
angular.module('app', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider',
function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
})
.state('about', {
url: '/about',
templateUrl: 'partials/about.html',
controller: 'aboutCtrl'
})
.state('contact', {
url: '/contact',
templateUrl: 'partials/contact.html',
controller: 'contactCtrl'
})
.state('create', {
url: '/create',
templateUrl: 'partials/create.html',
controller: 'createCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'partials/login.html',
controller: 'loginCtrl'
})
}]);
For the html I have this
<html ng-app="app">
<body>
<!-- *********** HEADER ************* -->
<div ng-include=""></div>
<!-- ********** CONTENT *********** -->
<div ui-view></div>
<!-- **************** FOOTER ****************** -->
<div ng-include="'partials/standard_footer.html'"></div>
</body
</html>
For the webpages create and login I do not want to show the header and footer, but I am not sure how to do that.
I want to do something like this,
<div ng-if="!login && !create" ng-include="'standard_header.html'"></div>
How can I achieve this?
You can expose $state on the $rootScope and that will make it accessible in your webpage.
You can then simply check for state.current.name != 'login'
Like below:
Exposing the current state name with ui router
Edit:
Working Plunker of what i meant: https://plnkr.co/edit/JDpCo3fTePobuX9Qoxjn
You're almost there. Just add a flag in the params of the appropriate states:
.state('create', {
url: '/create',
templateUrl: 'partials/create.html',
controller: 'createCtrl',
params: {
hideHeaderAndFooter: true
}
})
.state('login', {
url: '/login',
templateUrl: 'partials/login.html',
controller: 'loginCtrl',
params: {
hideHeaderAndFooter: true
}
})
And then inject the $stateParams service in your controllers. Every property of the params object will be exposed as a property of the object this service returns:
loginCtrl.$inject = ['$scope', '$stateParams']
function loginCtrl($scope, $stateParams) {
$scope.hideHeaderAndFooter = $stateParams.hideHeaderAndFooter
}
Then you can use ng-if just the way you meant to use it:
<div ng-if="!hideHeaderAndFooter" ng-include="'standard_header.html'"></div>
Related
I'm trying to create a page form, using ui-router module. i've created states in my config file. however when opening account/trade it only shows <div ui-view></div>. Anything i'm missing?
config
var app = angular.module("KryptoApp", ["ngRoute", "ui.router", "ngCookies", "ngAnimate"]);
// app.config(['$qProvider', function ($qProvider) {
// $qProvider.errorOnUnhandledRejections(false);
// }]);
app.config(function ($stateProvider, $routeProvider) {
$routeProvider
.when("/", {
templateUrl: "/static/templates/index.html",
controller: "IndexController"
})
.when("/register", {
templateUrl: "/static/templates/register.html",
controller: "RegisterController"
})
.when("/Login", {
templateUrl: "/static/templates/login.html",
controller: "LoginController"
})
.when("/account/trade", {
templateUrl: "/static/templates/trade.html",
controller: "TradeController"
});
$stateProvider
.state('trade', {
url: '/account/trade',
templateUrl: "/static/templates/trade.html",
controller: "TradeController"
})
.state('trade.coin', {
url: 'account/trade/coin',
templateUrl: "/static/templates/trade_coin.html",
controller: "TradeController"
});
$routeProvider.otherwise('/');
});
app.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
});
app.config(['$urlRouterProvider',function($urlRouterProvider){
$urlRouterProvider.otherwise('/');
}]);
/static/templates/trade.html
<div ui-view>
/static/templates/trade_coin.html
test
im not sure ngRouter and uiRouter can coexists without harms. Im might be that ngRoute catch the browser location and then dont render your view. And has you dont have ng-view directive, the ngRouter is not able to display the content.
Could you just try to migrate all your $routeProvider.when(.. stuff to $stateProver.state(.. and then stop injecting ngRoute to your application ?
As you are using ui-router you need to configure your routs as below as per ui-router documentation :
var app = angular.module("KryptoApp", ["ngRoute", "ui.router", "ngCookies", "ngAnimate"]);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: "/static/templates/index.html",
controller: "IndexController"
})
.state('trade', {
url: '/account/trade',
templateUrl: "/static/templates/trade.html",
controller: "TradeController"
})
.state('register', {
url: '/register',
templateUrl: "/static/templates/register.html",
controller: "RegisterController"
})
.state('login', {
url: '/login',
templateUrl: "/static/templates/login.html",
controller: "LoginController"
})
.state('trade.coin', {
url: 'account/trade/coin',
templateUrl: "/static/templates/trade_coin.html",
controller: "TradeController"
});
$urlRouterProvider.otherwise('/');
});
app.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
});
Index.html
<base href="/" />
RouteConfig
angular.module('DFApp').config(function ($routeProvider, $httpProvider,$locationProvider) {
$routeProvider.when("/Home", {
templateUrl: "../Views/ListofTopicsDiscussed.html",
controller: "ListofTopicsDiscussedController"
})
.when("/ShowParticularTopic", {
templateUrl: "ShowParticularTopic.html",
controller: "ShowParticularTopicController"
})
.when("/Topics/:TopicID", {
templateUrl: "../Views/ShowParticularTopic.html",
controller: "ListofTopicsDiscussedController"
})
.otherwise({ redirectTo: "/Home" });
$locationProvider.html5Mode(true);
});
From Home to Topic I navigate using this link
{{topic.TopicName}}
Also I have tried adding the $loction.path in my Controllers which didnt help me. Please help me with a solution for this.
I have 3 type of user: Trainer, sportsmen, fan.
Each 1 do login on same page. But after login i want to show diffrent dashboard depends on user role
Rignt now I try do domething like
.state('trainerDashboard', {
templateUrl: '/App/ControlPanel/views/templates/trainerDashboard.html',
abstract: true,
})
state('login', {
url: '/login',
templateUrl: '/App/ControlPanel/views/dashboard/dashboard.html',
parent: 'trainerDashboard',
controller: 'DashboardCtrl',
controllerAs: 'vm',
data: {
pageTitle: 'Login_Title',
login: true,
defaultState: 'users'
},
resolve: stateResolve
})
but i dont know how to set different parent here
Any Idea ??
Thank you
In your controller what you can define nested states like this
.state('dashboard', {
templateUrl: "/App/ControlPanel/views/templates/dashboard.html"
controller: ** controllerName ** //your controller name
})
.state('dashboard.trainer', {
url: "/trainer",
templateUrl: "/App/ControlPanel/views/templates/trainer.html"
}
.state('dashboard.sportsman', {
url: "/sportsman",
templateUrl: "/App/ControlPanel/views/templates/sportsman.html"
}
.state('dashboard.fan', {
url: "/fan",
templateUrl: "/App/ControlPanel/views/templates/fan.html"
}
And in your controller file you can use $state.go() function provided by Angular UI router to redirect the user to a state on the basis of the user type for example:
if(userType == 'trainer'){
$state.go(dashboard.trainer)
}
else if(userType == 'sportsman'){
$state.go(dashboard.sportsman)
}
else if(userType == 'fan'){
$state.go(dashboard.fan)
}
And in your dashboard.html file you will have to bind a div with ui-view like this
<div ui-view></div>
Hope it helps
Cheers
Just starting Ionic, I used the following command with the IOS simulator:
ionic start myApp tabs
All of this is working fine, but now I want to have a login page (no tabs down the bottom, no header on the top), and after the user logs in here, they can then access the tabs.
I'm currently having trouble implementing this login page. This is what I've got:
$stateProvider.state('login', {
url: '/login',
views: {
'login': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
}).state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
}).state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
}).state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
}).state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
}).state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
Notice the first part - .state('login', but for some reason, that will not work with the following line of code:
$urlRouterProvider.otherwise('/login');
It works for any other URL I try (e.g. /tabs/dash), but I can't seem to get /login working.
You need to set routing for login page as following:
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
Here is the codepen example.
I have the following config and controllers
.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'page-home.html',
controller: 'homeController',
controllerAs: 'hctrl'
})
.when('/about', {
templateUrl: 'page-about.html',
controller: 'aboutController',
controllerAs: 'actrl'
})
.when('/contact', {
templateUrl: 'page-contact.html',
controller: 'contactController',
controllerAs: 'cctrl'
});
})
.controller('homeController', function(){
this.pageClass = 'page-home'
})
.controller('aboutController', function(){
this.pageClass = 'page-about'
})
.controller('contactController', function(){
this.pageClass = 'page-contact'
});
My problem comes when I use in in the index.html.
<div class="page {{pageClass}}" ng-view></div>
Since I'm not using $scope, just writing {{pageClass}} won't work. How can I get around this using the controller as syntax?
Edit
I got a couple of good answers. I also discovered an alternate way to do this if you want to name your controllerAs values with different names: hctrl, actor and ctrl (like my code above):
You could do this in the html:
<div class="page {{hctrl.pageClass || actrl.pageClass || cctrl.pageClass}}" ng-view></div>
A good approach towards this problem is by setting the pageClass as a configuration in the routes definition and then create a directive that gets these definitions to be applied as whatever you want them to be (of course within the scope where the directive is applied to).
DEMO
Javascript
Define your route configuration with data key-value object.
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'page-home.html',
controller: 'homeController',
controllerAs: 'hctrl',
data: {
pageClass: 'page-home'
}
})
.when('/about', {
templateUrl: 'page-about.html',
controller: 'aboutController',
controllerAs: 'actrl',
data: {
pageClass: 'page-about'
}
})
.when('/contact', {
templateUrl: 'page-contact.html',
controller: 'contactController',
controllerAs: 'cctrl',
data: {
pageClass: 'page-contact'
}
});
})
Create a directive that sets these data with the directive's controller.
.directive('routeData', function() {
return {
controller: 'RouteDataController',
controllerAs: 'RouteData',
bindToController: true
}
})
.controller('RouteDataController', function($rootScope, $route) {
var self = this;
$rootScope.$on('$routeChangeSuccess', setCurrentRouteData);
setCurrentRouteData();
function setCurrentRouteData() {
angular.extend(self, $route.current.$$route.data || {});
}
})
In your index.html apply the directive itself and access the directive's controller to get the data values.
<div ng-view route-data class="page {{ RouteData.pageClass }}"></div>
Specify the controller as name
<div class="page {{hctrl.pageClass}}" ng-view></div>
Whatever you wrote in the controllerAs value need to be prepended to the variable, like {{actrl.pageClass}}