I am working on a web application with Angular. I have created a header that is included in the index.html, so it is fixed to every page and the content of the page is injected through a ui-view. My question is: if I want to only show this header after the user has passed the signup and login pages, what should I do?
I have added a variable to my router as shown below, but I am not sure how to access the router's variable from the index.html, as it is not attached to a controller (since it is fixed content across all pages). I intended to simply throw an ng-hide="hideHeader" in the index.html.
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'app/views/login/login.html',
controller: 'loginController',
controllerAs: 'vm',
hideHeader: true
})
.state('signup', {
url: '/signup',
templateUrl: 'app/views/signup/signup.html',
controller: 'signupController',
controllerAs: 'vm',
hideHeader: true
})
.state('landing', {
url: '/landing',
templateUrl: 'app/views/landing/landing.html',
controller: 'landingController',
controllerAs: 'vm',
hideHeader: false
})
.state('account-management', {
url: '/account-management',
templateUrl: 'app/views/account-management/account-management.html',
controller: 'accountManagementController',
controllerAs: 'vm'
hideHeader: false
});
});
How can I access this hideHeader value from the index.html? Is there a way to set a global scope variable and get the value from there?
Here's a different approach: Create a service specifically for authentication (login/logout) and authentication status. Then just call that service in your header. Given that the header is dependent on your authentication, then it makes sense to abstract that away. Your login/signup controllers will interact with this service.
Your routes can now also call this service to see if they should allow the user to view them based on login status.
Related
I'm facing a distrubing issue with my website. I'm using angular and typescript for development, the problem is : When a user logs in successfully, i'll redirect him to another page like " dashboard" , or "parentDashboard".
If i put a debugger on controller's constructor on parentDashboard or dashboard i see that the breakpoint is hit 2 times. I'm using $location.path('url') to redirect him.
This bug occurs only if i redirect him from login page. If i reload , for example dashboard page, that breakpoint is hit once.
This is the router:
.state('login', {
url: '/login',
templateUrl: '/app/login/login.partial.html',
controller: 'LoginController',
controllerAs: 'vm',
ncyBreadcrumb: {
label: 'Login'
},
.state('dashboard', {
url: '/dashboard',
templateUrl: '/app/dashboard/dashboard.partial.html',
controller: 'DashboardController',
controllerAs: 'vm',
}) //etc.....
NOTE: I don't have data-ng-controller tag in none of the pages. I found that will be a problem for multiple loads.
I don't know how to figure this.
If other sourcecode needed, i'll edit my question. Thanks
function initRouter($locationProvider: angular.ILocationProvider,
$urlRouterProvider: angular.ui.IUrlRouterProvider,
$stateProvider: angular.ui.IStateProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/');
$stateProvider
Please pay attention on trailing slash using $location.path('url').
$location.path('dashboard/')
may explain such behaviour.
I tried to migrate my Angular app from using ngRoute to uiRoute. Everything works fine except the controllers. They simple don't load like they did with ngRoute and I don't get why. As I see it from uiRoute it should work like with ngRoute but it doesn't. There is no exception thrown. I also don't find any example for a similar configuration like mine although it's very simple. I home somebody can tell me where my controller is hiding.
http://plnkr.co/edit/VGyi3AxgslgpvwBCTkXI?p=preview
So as for ngRoute the controller should be accessible through 'homepage' but it looks like it's just empty :(
;(function(angular) {
'use strict';
angular
.module('MainRouter', ['ui.router'])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('home', {
url: '',
views: {
"mainView": {
templateUrl: 'home.html'
}
},
controller: 'HomepageCtrl',
controllerAs: 'homepage'
});
}]);
})(angular);
When you use views option inside the state definition, then ui-router engine doesn't look for templateUrl & controller defined in state level, basically you need to provide controller & templateUrl value from the namedView definition only. In your case you should add controller in mainView definition object.
Code
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('home', {
url: '',
views: {
"mainView": {
templateUrl: 'home.html',
controller: 'HomepageCtrl',
controllerAs: 'homepage'
}
},
});
}]);
Demo Plunkr
I created a project using Yeoman (angular-fullstack). And now I would like to know how the change/set the main view to login.html. So normally when you start the application you first get the main view where you can chose to login or register. What I want is when the application start the page starts direct on the login.html
in your app.js file located at client\app\app.js, in the angular config add the following:
$stateProvider
.run(function ($state) {
$state.go('login');
});
So it should look like:
.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
$urlRouterProvider
.otherwise('/');
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('authInterceptor');
$stateProvider
.run(function ($state) {
$state.go('login');
});
})
I realize this has been out here for a while and you likely already have a good solution, but I was recently looking at this myself and see a couple options.
One, inside app.js you could add the following code snippet under $urlRouterProvider:
.when('/', '/login')
Making your full method be something like:
.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
$urlRouterProvider
.when('/', '/login')
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('authInterceptor');
})
This would force anyone going to your base page url directly to login, unless they provide the full route to another page. However, if you intend to still use the main.html, you will then need to go into client/app/main/main.js and change the default route to:
.state('main', {
url: '/main',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl'
});
So main is reachable by appending /main to the url.
Which brings me to option 2: Go into the main.js file and switch it's url to '/main' and go into login.js and switch it's url to '/'. Then anyone navigating to your base page automatically goes to the login screen but the url is viewed as just your domain without any sub page.
So client/app/main/main.js becomes:
.state('main', {
url: '/main',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl'
});
And client/app/account/account.js now contains:
.state('login', {
url: '/',
templateUrl: 'app/account/login/login.html',
controller: 'LoginCtrl'
})
My app.js file looks like so:
angular.module('airline', ['ngRoute', 'airlineServices', 'ngCookies'])
.config(airlineRouter);
function airlineRouter($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'partials/destinations.html',
controller: 'DestinationsCtrl'
})
.when('/airports/:airportCode', {
templateUrl: 'partials/airport.html',
controller: 'AirportCtrl'
})
.when('/airports/:airport1/:airport2', {
templateUrl: 'partials/two_airports.html',
controller: 'TwoAirportsCtrl'
})
.when('/flights', {
templateUrl: 'partials/flights.html',
controller: 'FlightsCtrl'
})
.when('/reservations', {
templateUrl: 'partials/reservations.html',
controller: 'ReservationsCtrl'
})
.otherwise({
redirectTo: '/'
});
};
Now I simply wish that if the user is logged in, which I can easily try by sending a token from cookies to the server and getting a response, I wish to load a view and a controller, but if the user is not logged in, I just wish to load the login view and the login controller? How can configure the '/' route so that it loads different views and controllers?
The views are going to load dynamically, so you do not need to worry about them. The controller is part of your setup, so again, you do not need to worry about them.
What you want to do is to display a view based on whether the user is authenticated or not.
When the user authenticates you want to setup a property somewhere, possibly in the $rootScope and then you can show different views, a code similar to below:
<div data-ng-if="application.isAuthenticated()">
<div>
I am logged in
</div>
</div>
<div data-ng-if="!application.isAuthenticated()">
hello anon, please login.
<button class="btn btn-primary" ng-click="application.login()">Login</button>
</div>
so I want to load a templateUrl or, invoke $stateProvider on an action other than user input, like onEnter or onload, or just right away at the beginning of the app, but I can't seem to figure it out. Basically I have a simple nav, when clicked they load a partial which shows below the nav etc. I want to show an inital partial as soon as the app is invoked or loaded. below is a sample of my routing:
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('page1', {
url: "/page1",
templateUrl: "partials/pag1.html"
})
.state('page1.stuff', {
url: "/page1stuff",
templateUrl: "partials/page1.stuff.html",
controller: someController
})
.state('page2', {
url: "/page2",
templateUrl: "partials/page2.html"
})
any help would be greatly appreciated.
If I understand you correctly you just need a default state
.state('home', {
url: '',
templateUrl: 'partials/home.html'
}