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('}]}');
});
Related
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 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>
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
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}}
I'm kind of stuck on how to route my angular app to a new controller after login. I have a simple app, that uses 'loginservice'... after logging in, it then routes to /home which has a different template from the index.html(login page).
I want to use /home as the route that displays the partial views of my flightforms controllers. What is the best way to configure my routes so that after login, /home is the default and the routes are called into that particular templates view. Seems easy but I keep getting the /login page when i click on a link which is suppose to pass the partial view into the default.html template:
var app= angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'partials/login.html',
controller: 'loginCtrl'
});
$routeProvider.when('/home', {
templateUrl: 'partials/default.html',
controller: 'defaultCtrl'
});
}]);
flightforms.config(['$routeProvider', function($routeProvider){
//sub pages
$routeProvider.when('/home', {
templateUrl: 'partials/default.html',
controller: 'defaultCtrl'
});
$routeProvider.when('/status', {
templateUrl: 'partials/subpages/home.html',
controller: 'statusCtrl'
});
$routeProvider.when('/observer-ao', {
templateUrl: 'partials/subpages/aobsrv.html',
controller: 'obsvaoCtrl'
});
$routeProvider.when('/dispatch', {
templateUrl: 'partials/subpages/disp.html',
controller: 'dispatchCtrl'
});
$routeProvider.when('/fieldmgr', {
templateUrl: 'partials/subpages/fieldopmgr.html',
controller: 'fieldmgrCtrl'
});
$routeProvider.when('/obs-backoffice', {
templateUrl: 'partials/subpages/obsbkoff.html',
controller: 'obsbkoffCtrl'
});
$routeProvider.when('/add-user', {
templateUrl: 'partials/subpages/users.html',
controller: 'userCtrl'
});
$routeProvider.otherwise({
redirectTo: '/status'
});
}]);
app.run(function($rootScope, $location, loginService) {
var routespermission=['/home']; //route that require login
$rootScope.$on('$routeChangeStart', function(){
if( routespermission.indexOf($location.path()) !=-1)
{
var connected=loginService.islogged();
connected.then(function(msg) {
if(!msg.data) $location.path('/login');
});
}
});
});
and my controllers are simple. Here's a sample of what they look like:
var flightformsControllers = angular.module('flightformsController', []);
flightforms.controller('fieldmgrCtrl', ['$scope','$http','loginService',
function($scope,loginService) {
$scope.txt='You are logged in';
$scope.logout=function(){
loginService.logout();
}
}]);
Any ideas on how to get my partials to display in the /home default.html template would be appreciated.
1) Move all the routing into the main app.config, and remove the duplicate route for /home.
2) change this line
var flightformsControllers = angular.module('flightformsController', []);
to
var flightforms = angular.module('flightforms', []);
3) change the app definition line to inject the flightforms module:
var app= angular.module('myApp', ['ngRoute', 'flightforms']);
That should get ya close.
For one of your comments, its a good idea to have an interecptor which catches any 401 un-authenticated errors from the server. This way, if a user's session expires before a route change, they will still have to login again to start a new session. Something like this in app.config should do it.
$provide.factory('logoutOn401', ['$q', '$injector', function ($q, $injector) {
return {
'responseError': function(response) {
if (response.status === 401) {
$location.path('/login')
return $q.reject();
} else {
return $q.reject(response);
}
}
};
}]);
$httpProvider.interceptors.push('logoutOn401');