I need a sidebar in an Angular app. The sidebar should be present in every views but one, the login view (and probably others, like signup).
At the moment, the sidebar its a view, included in index.html:
<div ng-include src="'assets/partials/sidebar.html'"></div>
What is the best way to do it?
(I'm using ui-router.)
It looks like you need ngRoute or UIRouter.
These will allow you to define view behavior for a given URL in your app.
For example, if you wanted to define routes (using ngRoute) for '/login' and '/dashboard', it might look like this:
angular.module('ngRouteExample', ['ngRoute'])
.controller('MainController', function($scope) {
// Do stuff...
})
.controller('DashboardController', function($scope, $routeParams) {
// Do Stuff...
})
.controller('LoginController', function($scope, $routeParams) {
// Do Stuff...
})
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/dashboard', {
templateUrl: 'dashboard.html',
controller: 'DashboardController',
})
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
});
And in your index.html:
<div ng-view></div>
Then, you can create a separate directive like:
<sidebar></sidebar>
And include it in dashboard.html but not in login.html
EDIT
If your layout will allow, you could include the sidebar a single time in index.html and render or not render it with ng-if based on a scope variable that you set by checking $routeParams.
In that case, your 'mainController' would look like this:
.controller('MainController', function($scope, $route, $routeParams, $location) {
$scope.showSidebar = function(){
if($routeParams.paramName == 'login'){
return false;
}else{
return true;
}
};
})
Then in index.html
<sidebar ng-if="showSidebar()"></sidebar>
So I guess you want to avoid having to include the sidebar in every view you make?
Maybe something like this?
In your route file, you can create an extra parameter like this:
$stateProvider
.state('login', {
url: '/login',
templateUrl: '/App/tpl/login.html',
hideSideBar: true
})
Which you can then access in your controller/directive like this:
$state.current.hideSideBar;
That way you can include the sidebar in your main layout and hide it when set to true like this:
<div id="sidebar" data-ng-hide="controller.hideSideBar">
.... your sidebar
</div>
(this is all written from memory so it may not work straight out of the box, but it should get you started)
Related
I'm currently working on a MEAN stack project and am trying to get a specific template to display on a specific url.
Currently if users goto www.myurl/catalog, it loads the catalog.html template, as it would with any /catalog?catagory=productType url.
I would like it so that when users go to /catalog?category=specificProductType that it loads the catalogSpecific.html template. Currently, the catalog.html template supersedes the catalogSpecific.html template. I can't find much about this specific issue so any help would be appreciated.
Currently my routes look like this:
app/front/app.js
angular.module('app', ['ngRoute',
'app.LandingModule.controller',
'app.CatalogModule.controller',
'app.ProductModule.controller',
'app.HeaderModule.directives',
'app.FooterModule.directives'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'html/landing.html',
controller: 'LandingController'
})
.when('/catalog', {
templateUrl: 'html/catalog.html',
controller: 'CatalogController'
})
.when('/catalog?category=specificProductType', {
templateUrl: 'html/catalogSpecific.html',
controller: 'CatalogController'
})
.otherwise({
redirectTo: '/'
});
}]);
EDIT: Seems I was wrong about this not being possible with the default router. As Hadi describes in their comment, you can replace "templateUrl" with a function that returns a template url given the current route.
To my knowledge you cannot route the way that you want to with the built-in angular router.
As far as I can see you have two options to go with from here:
1: Learn to use the ui-router library (found here: https://github.com/angular-ui/ui-router)
2: Send all routes from /catolog to a controller/page that manually looks at your route-params and re-routes you based off of that manually. (see https://docs.angularjs.org/api/ngRoute/service/$routeParams)
Try use templateUrl function like to this. I have not tested.
templateUrl: function($location){
if($location.category)
return 'html/catalogSpecific.html';
else
return 'html/catalog.html';
},
Demo
I was able to figure this out following Hadi's example:
.when('/catalog', {
templateUrl: function($location){
if($location.category == "specificProductType") {
return 'html/catalogSpecific.html';
} else {
return 'html/catalog.html';
}
},
controller: 'CatalogController'
})
I am working on a new portfolio site and want to use AngularJS to display my work and pure css to format layout etc.
I found a useful tutorial that outlined how to structure your app for future scaling and have set up a file tree like so:
so each component is a basically a mini MVC. I have set up my routes in app.routes.js and organised app.module.js as below:
app.module.js:
angular.module('app', ['ngRoute', 'appControllers', 'appResources']);
angular.module('appControllers', ['ngRoute']);
angular.module('appResources', ['ngResource']);
app.route.js:
angular.module('app')
.config(['$routeProvider', function ($routeProvider) {
'use strict';
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'app/components/home/home-view.html',
controller : 'HomeCtrl'
})
// route for the about page
.when('/about', {
templateUrl : 'app/components/about/about-view.html',
controller : 'AboutCtrl'
})
// route for the contact page
.when('/contact', {
templateUrl : 'app/components/contact/contact-view.html',
controller : 'ContactCtrl'
});
}]);
so this is my set up, for now, I just need to see that each controller for the routes are working and then I will begin adding in my content, but I have hit a hurdle straight away as the controllers for each view are showing as undefined.
Here is an example of a controller, they are all the same at the moment, but with a different message:
angular.module('appControllers')
.controller('AboutCtrl', ['$scope', '$http', function ($scope, $http) {
'use strict';
$scope.message = 'This will be the about page';
}]);
the html is correct and there are no typos, so I am scratching my head as to why this is showing up as an error.
Is this something to do with the way I have my modules set up?
Any assistance would be greatly appreciated.
Many thanks in advance.
This error is telling you that your HomeCtrl is undefined. You will need to include a <script src="app/components/home/HomeController.js"></script> in your index.html file to include each of your controllers with this type of app configuration.
If you want to avoid this, you can scaffold your app something like this.
(function () {
"use strict";
angular.module('appControllers')
.controller('HomeCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.message = 'This will be the home page';
}])
.controller('AboutCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.message = 'This will be the about page';
}]);
})();
There is no single "best" way to do something. It is all relative to the needs of your app and preference.
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>