How can I perform a matchmedia for page routing below. That is I would like load a different templateURL for home if it is a tablet?
app.config(['$routeProvider',function($routeProvider) {
//configure the routes
$routeProvider
.when('/',{
// route for the home page
templateUrl:'partials/login/login.html',
controller:'loginCtrl'
})
.when('/home',{
// route for the home page
templateUrl:'partials/home/home.html',
controller:'mainCtrl'
})
.otherwise({
//when all else fails
templateUrl:'partials/login/login.html',
controller:'loginCtrl'
});
}]);
You could simply achieve this by adding function while generation templateUrl,
before returning templateUrl to check navigator string and browser.
Code
$routeProvider
.when('/', {
// route for the home page
templateUrl: function() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
return 'partials/mobile/login/login.html'; //mobile template
} else {
return 'partials/login/login.html';
}
},
controller: 'loginCtrl'
})
Related
I am trying to redirect the url using the $routeprovider
$routeProvider.when('/', {
templateUrl : 'scripts/login/login.tpl.html',
controller : 'LoginCtrl'
});
$routeProvider. when('/sample', {
templateUrl: 'sample.html'
});
$routeProvider.otherwise({
redirectTo : '404.html'
});
Below is the url which loads the application
http://localhost:8080/orion-web/app/
when I try to append the word 'sample' to the url
ie
http://localhost:8080/orion-web/app/sample
I get 404 error , This is not the 404.html from the $routeprovider. It's tomcats 404 resource not found page
Do you have a base url set for your page?
It should be <base href="/orion-web/app/"> within the header section of your index.html
In the second $routeprovider.when try removing /
$routeProvider. when('sample', {
templateUrl: 'sample.html'
});
$routeProvider
.when('/', {
templateUrl : 'scripts/login/login.tpl.html',
controller : 'LoginCtrl'
})
. when('/sample', {
templateUrl: 'sample.html'
})
.otherwise({
templateUrl: '404.html'
});
Use this code
I am using http-server package to run my angular js project. My directory structure is below:-
angulardemo/app/public/controller
angulardemo/app/public/app.js
angulardemo/app/public/index.html
angulardemo/app/public/view
ang my app.js file is
var app = angular.module('angulardemo', ['ngRoute', 'ngCookies'])
.constant('API_URL', 'http://127.0.0.1:8001')
.config(function ($routeProvider, $locationProvider, $httpProvider) {
$httpProvider.defaults.headers.common = {'Content-Type' : 'application/json'};
$httpProvider.defaults.headers.post = {};
$httpProvider.defaults.headers.put = {};
$httpProvider.defaults.headers.patch = {};
/**
*
* Checks for url access
*/
resolver = function (access){
return {
load: function($q, AuthService, $location){
if(access){
return true
}else{
if(AuthService.checkLogin()){
return true;
}
else{
$location.path("/login");
}
}
}
}
}
$routeProvider
.when('/', {
templateUrl : "/view/home.html",
controller : 'PagesController'
})
.when('/home', {
templateUrl : "/view/home.html",
controller : 'PagesController'
})
.when('/about', {
templateUrl : "/view/about.html",
controller : 'PagesController'
})
.when('/team', {
templateUrl : "/view/team.html",
controller : 'PagesController'
})
.when('/work', {
templateUrl : "/view/work.html",
controller : 'PagesController'
})
.when('/price', {
templateUrl : "/view/price.html",
controller : 'PagesController'
})
.when('/users/:user_type', {
templateUrl : "/view/developers.html",
controller : 'UsersController'
})
.when('/user/show/:id', {
templateUrl : "/view/user.details.html",
controller : 'UsersController'
})
.when('/contact', {
templateUrl : "/view/contact.html",
controller : 'PagesController'
})
.when('/register', {
controller: 'AuthController',
templateUrl: '/view/auth/register.html',
resolve:{
loggedIn: function(AuthService, $location){
if(!AuthService.checkLogin())
return true;
else
$location.path("/home");
}
}
})
.when('/login', {
controller: 'AuthController',
templateUrl: '/view/auth/login.html',
resolve:{
loggedIn: function(AuthService, $location){
if(!AuthService.checkLogin())
return true;
else
$location.path("/home");
}
}
})
.when('/dashboard', {
controller: 'DashboardController',
templateUrl: '/view/dashboard/index.html',
pageTitle: 'dashboard',
resolve:resolver(false)
})
.when('/users_personal/:id', {
controller: 'UsersController',
templateUrl: '/view/users/personal.html',
pageTitle: 'personal_details',
resolve:resolver(false)
})
.when('/users_edu/:id', {
controller: 'UsersController',
templateUrl: '/view/users/edu.html',
pageTitle: 'edu_details',
resolve:resolver(false)
})
.when('/users_contact/:id', {
controller: 'UsersController',
templateUrl: '/view/users/contact.html',
pageTitle: 'contact_details',
resolve:resolver(false)
})
.when('/users_other/:id', {
controller: 'UsersController',
templateUrl: '/view/users/other.html',
pageTitle: 'other',
resolve:resolver(false)
})
.when('/logout', {
resolve : {
logout: function ($routeParams, $location, $http, API_URL){
$http.get(API_URL + "/api/auth/logout").success(function (response) {
if(response === "OK"){
localStorage.removeItem('auth');
$location.path('/login').replace();
}
})
}
}
})
.otherwise({
redirectTo: '/',
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
}).hashPrefix('*');
}).run(['$http', '$cookies', function($http, $cookies) {
$http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
}]);
when I am running project using "http-server" with in the app directory command I got url as http://127.0.0.1:8080
http://192.168.10.137:8080
all the pages are working fine but when I am refreshing the page I am getting This 127.0.0.1 page can’t be found
No web page was found for the web address: http://127.0.0.1:8080/team
HTTP ERROR 404
So can anyone please tell that what wrong thing is here. and provide the solution.
See the directory structure in git hub:-
https://github.com/sanjaysamant/angulardemo/tree/local/app
Angular js files are in the public directory
Thanks
Please see terminal screen shot:
Whenever you are on a sub-URL such as /team and you refresh the page, the Node-Server looks for a HTML-File that is in the folder team on your server, which is not what you want. You need the server to redirect all those URL's to your index.html so that it loads the Angular Application, which can then properly initialize the correct page.
You can try the following in your server.js file:
//routes
app.use('/api/auth', require('./controllers/auth/auth.controller'));
app.use('/api/users', require('./controllers/users/users.controller'));
app.use('/api/user/', require('./controllers/users/users.controller'));
// Redirect unmatched routes (All specific routes such as /api/* need to be before this call)
app.use(redirectUnmatched);
function redirectUnmatched(req, res) {
res.redirect("/");
}
What #Chnoch suggested is correct, however I want to give you a different approach.
app.get('*', function(req, res)
{
res.send('/path/to/index.html');
});
Because all requests for a page will be a GET requests, you don't need to specify POST, and with this approach it will preserve the current URL you are on (eg. if you were on http://127.0.0.1:8080/team you will refresh and still be on /team), wheras #Chnoch's approach will always redirect you back to http://127.0.0.1:8080/.
What this will do is for any request that can't be resolved by the Node server, it will just render plain index page that can then be handled by Angular's ngRoute to display templates (you can also use templating engines like EJS or Pug with this, just replace the res.send with the rendering function).
Just make sure that the above code is after ALL other routes you want to be resolved by the Node server (eg. your API etc.) so it doesn't interfere with routes after it, since this is a catch all route.
Right now when i hit below URL ,
angularproj.localhost.com
it will open login page and above url will be changed to
angularproj.localhost.com/#/login . This is the admin login
Now as per my project requirement , i will have multiple customers and all those will have their logins.
So i need create seperate URLs for them.
Say first customer is C1.So my url will be angularproj.localhost.com/c1.
And when i hit angularproj.localhost.com/c1 in browser it should open c1 customer login page.
I have tried below but no luck.
$stateProvider
.state('/:customer', {
url: "/",
templateUrl: "app/views/login/Customer/login.html",
data: { pageTitle: 'Example view' }
})
Trying this way. It should work.
var app = angular.module('tutorialWebApp', [
' ngRoute'
]);
/**
* Configure the Routes
*/
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
// Home
.when("/", {templateUrl: "partials/home.html", controller: "PageCtrl"})
// Pages
.when("/about", {templateUrl: "partials/about.html", controller: "PageCtrl"})
// else 404
.otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"});
}]);
You can use Dynamic templateUrl in your router
example:
.state('login', {
url: '/{customerID}',
views: {
'menu': {
templateUrl:
function (stateParams){
return '/partials/login' + stateParams.customerID+ '.html';
}
}
}
})
In my angular app i have two links
signup
signin
When i click on signup link, the url in address bar becomes localhost/signup.
if i click the same link again, the url in address bar becomes localhost/signup/#signup
I could n't find any solution.
Can anyone help me please.
Route config:
app.config(['$locationProvider', function ($locationProvider) {
$locationProvider.html5Mode(true);
}]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/home/views/home.html',
controller: 'HomeController'
})
.when('/signup', {
templateUrl: 'app/signup/views/signup.html',
controller: 'SignUpController'
})
.otherwise({
redirectTo: '/'
});
}]);
You do not need the hashtag for routing. Jus use href="signup.
Im using angularJS to set where i want the page to go after i login, but if i only have this
function routeProviderFunction($routeProvider){
$routeProvider.when('/default',{
templateUrl: 'HTML/login.html',
controller: funct2
});
$routeProvider.otherwise({
redirectTo: '/default'
});
}
My route provider works in the above code, but after i turn it into this
function routeProviderFunction($routeProvider){
$routeProvider.when('/default',{
templateUrl: 'HTML/login.html',
controller: funct2
});
$routeProvider.when('/adminMenu/:username', {
templateUrl: 'HTML/adminMenu.html',
controller: adminMenu
});
$routeProvider.otherwise({
redirectTo: '/default'
});
}
My route provider ceases to work at all. Any ideas
try to do like this:
$routeProvider
.when('/default', {
templateUrl: 'HTML/login.html',
controller : 'funct2'
}).when('/adminMenu/:username', {
templateUrl: 'HTML/adminMenu.html',
controller : 'adminMenu'
}).otherwise({
redirectTo : '/default'
});
Does the controller adminMenu exist in the global namespace? Press F12 and check the error console. Angular has quite decent error messages. Also worth noting that 'when' is chainable so you should be doing something like this route.when().when().otherwise();
After looking #fabuloso answer, it clicked to me what I needed to fix my problem.
I had
pageApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'content/home.html',
controller : 'homeController'
})
// route for the directions page
.when('/directions', {
templateUrl : 'content/directions.html',
controller : 'directionsController'
})
// route for the giftCards page
.when('/giftCards', {
templateUrl : 'content/giftCards.html',
controller : 'giftCardsController'
});
// route for the giftCards page
.when('/contactUs', {
templateUrl : 'content/contactUs.html',
controller : 'contactUsController'
});
});
when adding the last "contactUs" part, I noticed I had a semicolon after the giftCards route, which blows up everything.