I am using angular js routing using $routeProvider but when I reload the page I get error message like "Cannot GET /home". My code is as follows
.when("/", {
templateUrl: "views/login/login.html",
controller: "LoginController as loginCtrl"
})
.when("/home", {
templateUrl: "views/home/home_template.html",
controller: "HomeController as homeCtrl"
});
when I reload page from home then I get this error message . Also I want to keep this login outside routing so what practice should I follow
Try this
var app = angular.module('app', [
'ngRoute'
]);
window.routes =
{
'/': {
templateUrl: 'app/visitor/visitor.html',
anonymous: true
},
'/index': {
templateUrl: 'app/visitor/visitor.html',
caseInsensitiveMatch: true,
anonymous: true
},
'/lu/:mt?/:tab?/:id?': {
templateUrl: 'app/user/user.html',
caseInsensitiveMatch: true,
anonymous: false
}
};
app.config(function ($routeProvider, $locationProvider) {
for (var path in window.routes) {
$routeProvider.when(path, window.routes[path]);
}
$routeProvider.otherwise({redirectTo: '/'});
$locationProvider.html5Mode(true);
});
Related
I am using ng-route with html5 mode and http-server in npm. I have a main page with ng-view, and when i click on a link the view displays fine. But when i refresh only view display with out header. Below is
.config(['$routeProvider', function ($routeProvider) {
//console.log($routeProvider);
$routeProvider.
when('/app/gateways', {
templateUrl: '/app/gateways.html',
}).
when('/app/lights', {
templateUrl: '/app/lights.html',
}).
when('/app/control', {
templateUrl: '/app/assign-gateway-to-user.html',
})
//otherwise({
// redirectTo: '/app/index.html'
//});
}])
.config(['$locationProvider', function($locationProvider)
{
$locationProvider.html5Mode({
enabled: true,
requireBase: false,
});
}])
Change your code like this. You don't have to define config again to inject new providers. You can do that in a single step
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
//console.log($routeProvider);
$locationProvider.html5Mode({
enabled: true,
requireBase: false,
});
$routeProvider.
when('/app/gateways', {
templateUrl: '/app/gateways.html',
}).
when('/app/lights', {
templateUrl: '/app/lights.html',
}).
when('/app/control', {
templateUrl: '/app/assign-gateway-to-user.html',
})
//otherwise({
// redirectTo: '/app/index.html'
//});
}])
app.config(function ($routeProvider, $locationProvider) { $routeProvider.
when('/login', {
templateUrl: '/Login/_Login.aspx',
controller: 'LoginCtrl'
});
));
The LoginCtrl is in another JS File which is not loaded yet, So i will load that js so it work properly?
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'templates/main/main.html',
controller : 'mainController',
resolve: {
loadReqFiles: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([
'templates/main/main.css',
'js/controller/main.js',
'js/services/sessionService.js'
]);
}]
}
})
read this for more information...
LazyLoad
friends, can anybody help.
Angular 1.4.9 make links like this http://domain/#!/product,
but I need links like this http://domain/#!product with out slash.
Code:
var app = angular.module('myApp', [
'ngRoute'
])
.config([
'$routeProvider',
'$locationProvider',
function ($routeProvider, $locationProvider, ngMeta) {
'use strict';
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
controller: 'HomeCtrl',
templateUrl: 'views/home.html',
})
.when('/article/:slug', {
controller: 'ArticleCtrl',
templateUrl: 'views/article.html'
})
.when('/catalog/:category/:subcategory', {
controller: 'CatalogCtrl',
templateUrl: 'views/catalog.html'
})
.when('/product/:category/:subcategory/:product', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.when('/product/:category/:subcategory/:product/:texture', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.otherwise({
redirectTo: '/'
});
}
]);
I don't think this is a valid URL - http://domain/#!product
It should be http://domain/#!/product or http://domain/product,
To transform your URLs in desired way, it gives you some heads up -
https://docs.angularjs.org/guide/$location
I'm a newbie with AngularJS and I got a problem that I think that's it's can be configurable in my routeProvider.
I have this route
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', function ($routeProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
}
]);
the problem: When I just type http://localhost:53379 I'm redirected to http://localhost:53379/#/ . Where come from the /#/ ?
By default, AngularJS will route URLs with a hashtag.
For example:
http://domain.com/#/home
http://domain.com/#/about
You can very easy remove the hashtag from the URL by setting html5Mode to true in your config:
$locationProvider.html5Mode(true);
so in your code it will be:
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
}
]);
Just after that you have to make sure that your backed will redirect all requests to your home page if you are doing "Single Page App"
Angular adds it by default. I don't know it this is the main reason, but one reason is that the routing doesn't work in older versions of IE. I had this problem in one angularjs app that didn't work in IE9 because of this reason.
Anyways, to remove the hashtag simply add $locationProvider.html5Mode(true); after your routing-declarations.
You can read more about it here: http://scotch.io/quick-tips/js/angular/pretty-urls-in-angularjs-removing-the-hashtag
This /#/ is used to create a single page application. the # is used to prevent that the page is completely reloaded. Angular then catches the new URL and loads the correct controller and partials depending on your route configuration.
Since HTML5 it is possible to remove this behavior with $location.html5Mode(true).
Source:
AngularJS documentation
I have an AngularJS app that uses $routeProvider and a $stateProvider. I can get all my routes/states to work apart from /.
Here's my app.js file
var MailStash = angular.module("MailStash", ['ui.compat', 'ngResource', 'ngSanitize', 'ui.directives']).
config(function($stateProvider, $routeProvider, $urlRouterProvider) {
$routeProvider
.when('/', { controller: ListCtrl, templateUrl: '/js/partials/list.html' });
$stateProvider
.state('templates', {
url: '/templates',
abstract: true,
templateUrl: '/js/partials/list.html',
controller: ListCtrl,
})
.state('templates.list', {
// parent: 'templates',
url: '',
views: {
'main_content': {
templateUrl: '/js/partials/templates.new.html',
controller:CreateCtrl,
},
}
})
.state('templates.view', {
parent: 'templates',
url: '/{templateId}',
views: {
'main_content': {
templateUrl: '/js/partials/templates.view.html',
controller: ViewCtrl,
},
},
})
.state('templates.new', {
url: '/new',
views: {
'main_content': {
templateUrl: '/js/partials/templates.new.html',
controller: CreateCtrl,
},
},
})
.state('templates.edit', {
parent: 'templates',
url: '/edit/{templateId}',
views: {
'main_content': {
templateUrl: '/js/partials/templates.edit.html',
controller: EditCtrl,
},
},
})
}
)
.run(
[ '$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}]
);
...
Nothing happens when I go to / but when I go to /#templates the appropriate views and controllers kick in.
Can anyone see what is wrong with my $routeProvider and why going to / is not doing anything?
Why not simply use $urlRouterProvider and route to / ?
$urlRouterProvider.otherwise('/');
Then set a new state for /
$stateProvider.state({
name: 'home',
url: '/',
controller: 'HomeCtrl',
templateURL: 'home.html'
});
You can specify the default route like this
$routeProvider
.when('/templates', { controller: ListCtrl, templateUrl: '/js/partials/list.html' })
.otherwise({ redirectTo: '/templates' });
Hope this will help!
Otherwise is more useful to redirect to an error page, if the url is bad. But you can try to add <base href="/" /> to refer the base location in your index and add $locationProvider.html5Mode(true); after the declaration of routes in your config function to enabled, otherwise you need to add # to the url.
I hope this will help you.