I have an SPA anularjs app with a few pages.
Router Provider is configured as follows:
$locationProvider.html5Mode(true);
var path = 'web/partials/views/';
$routeProvider
.when('/', {
templateUrl: path + 'home.html',
//controller: 'mainController'
})
.when('/benefits', {
templateUrl: path + 'benefits.html',
//controller: 'aboutController'
})
.when('/gallery', {
templateUrl: path + 'gallery.html',
//controller: 'contactController'
})
.when('/quote', {
templateUrl: path + 'quote.html',
//controller: 'contactController'
});
This works - think nav links on index.html work and the address bar gets the correct url (myapp.com/benefits, myapp.com/quote, etc.)
What doesn't work is going directly to myapp.com/quote or myapp.com/benefits or other pages. I get "resource does't exists" - which makes sense - resource really doesn't exist.
My question is what is the appropriate way to handle this i AngularJS?
Thanks!
There are error handlers (like $routeChangeError) which you could utilize to redirect to a default page, check this out:
angular route service
Related
I'm building my portfolio as a front-end dev and it's still under developmentt. To test it out I used FTP to upload the files to my justhost domain which is a success. Now, say my site is www.johndoe.com (okay fine, my actual site is 'hassanefall.com' to make this easier to understand :)).
(I'm using angularjs for the routes) I want to go to a specific route/page: www.hassanefall.com/about. The about page works when i navigate through clicking the links.
But, when I type in the url the exact url path, there's a 404 error page.
I have '/work', '/contact', etc. and whenever I type in the url 'www.hassanefall.com/contact' directly without navigating to it, a 404 page occurs. It's as if the file for each page/route doesn't exist.Help?
Here's the code.
Note: I removed the hash from the url using base '/' and $relocationProvider. If there's an answer to this it's greatly appreciated.
var app = angular.module('mySite', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.when('/projects', {
controller: 'HomeController',
templateUrl: 'views/projects.html'
})
.when('/service', {
controller: 'HomeController',
templateUrl: 'views/service.html'
})
.when('/about', {
controller: 'HomeController',
templateUrl: 'views/about.html'
})
.when('/contact', {
controller: 'ContactController',
templateUrl: 'views/contact.html'
})
.when('/portfolio/:id', {
controller: 'ItemController',
templateUrl: 'views/item.html'
})
.otherwise({redirectTo: '/'});
$locationProvider.html5Mode(true);
});
If you need more code sample please let me know. :)
Your server should support HTML5 mode. What is happening here is that the server is looking for your client side route ('contact', for example), and does not find it. That's why you have 404 not found error.
Another solution is to go back to hash mode..
I want to be able to have users goto www.myurl.com/#/login and be taken to the specified view. Same for if they are on a specific view, if they refresh I would want them to be taken to the same view again. However currently no matter what the extension it will always take you to the home page on start up. Is there likely to be an error in my code or does angular routing not behave like that?
fcApp.config(function ($routeProvider){
$routeProvider
.when('/',
{
templateUrl: 'html/frontPage.html'
})
.when('/login',
{
templateUrl: 'html/frontPage.html'
})
.when('/home',
{
templateUrl: 'html/home.html'
})
.otherwise({redirectTo: '/home'});
});
I'm working on a angular project that behaves fine on my localhost, but when the site is deployed to the live URL, angular is not adding a / before #.
So what i get is:
somesite.com/something#/myview
What i want is:
somesite.com/something/#/myview
I'm not sure what causes this - maybe my route?
$routeProvider
.when('/',
{
templateUrl: 'partials/questions.html',
controller: 'QuestionController'
})
.when('/familie',
{
templateUrl: 'partials/familie.html'
})
.when('/single',
{
templateUrl: 'partials/single.html'
})
.when('/complete',
{
templateUrl: 'partials/complete.html'
})
.when('/vinder',
{
templateUrl: 'partials/vinder.html',
controller: 'WinnerController'
})
.otherwise({ redirectTo: '/'});
This is default behavior. AngularJS uses tags (the '#') to prevent that the browsers actually navigates. This is because AngularJS are always single page applications. You only have control over the part that is after the '#', and not the part before it.
use href="#/single"
instead of href="/single" where you are invoking the path in your html file.
also use init as
app.run( function ( apiService ) {
apiService.init( '' );
} );
I'm working on a AngularJS + OnsenUI project, and I'm having problems with the navigation.
Let's say that I have a module:
angular
.module('app.home', ['ui.utils','ngRoute','ngAnimate'])
.controller('HomeCtrl', HomeCtrl)
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'path/to/home/template',
controller: 'HomeCtrl'
})
.when('/test1', {
templateUrl: 'path/to/template',
controller: 'TestOneCtrl'
})
.when('/test2', {
templateUrl: 'path/to/template',
controller: 'TestTwoCtrl'
})
.otherwise({
redirectTo: 'path/to/home/template'
});
});
In the HomeCtrl I'm supposed to (depending on the result of certain functions) navigate to either test1.html or test2.html. My problem is that I don't know how to link the routeProvider to the the ons.navigator.pushPage function.
This doesn't work:
var url = '/test1';
$scope.navigator.pushPage( url, { animation : 'slide' } );
This works:
var url = '/absolute/path/to/template';
$scope.navigator.pushPage( url, { animation : 'slide' } );
My question is what do I need to do so I don't have to write the absolute path to the template in the url variable? Apparently I'm missing out on something, but I can't figure out what.
Thanks in advance!
I think it's because the path used in $routeProvider is not the same type of that of pageUrl used in navigator.pushPage().
$routeProvider.when(path, route);
and
navigator.pushPage(pageUrl, option);
Path is like the pattern or string of your app url found in the browser address bar. For example, "http://localhost:8000/app/index.html#/test1". That's when you can refer to this in the routeProvider as "/test1". However, in the navigator.pushPage(), you will need to specify exact url to the page just like how you set ur templateUrl inside $routeProvider. In other words, pageUrl = route.
That's just from my understanding though.
I'm not clear why this isn't functioning. The rest of my code - sans the URL Param-based routing is working fine, I've tested that all. However, when I tried to include a URL argument in my url (base.url/route/:param) the '.otherwise' element of my routeProvider is firing instead of the appropriate controller designated in the routeProvider.
Here's the relevant bits of code:
module.config
app.config(function($routeProvider){
//http://docs.angularjs.org/tutorial/step_07
$routeProvider
.when('/home',
{
templateUrl: 'app/partials/home.html',
controller: 'HomeController'
})
.when('/implementation-reference/:ref-scope',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
.when('/projects',
{
templateUrl: 'app/partials/project_list_tpl.html',
controller: 'Projects'
})
.when ('/site-help',
{
templateUrl: 'app/partials/site-help.html'
})
.otherwise(
{
templateUrl: 'app/partials/404.html'
})
});
module.controller
app.controller('ImplReference', function($scope, $routeParams) {
alert('hi');
});
I get my 404 page when going to /implementation-reference/whatever.
Any ideas why I don't see the alert I put at the beginning of my controller, nor see any errors in the console?
As best as I can tell, the issue lay in use a dash in the param as defined in RouteProvider. I originally had:
.when('/implementation-reference/:ref-scope',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
when I changed it to this:
.when('/implementation-reference/:ref',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
...suddenly everything works fine.
I noticed this after adding a controller to the 'otherwise' that showed me the $route information. After drilling through it, I saw that the regex on the pre-defined route which had the param was only working on the part before the dash.
I've been mystified by this for hours, and can't imagine how this isn't documented more clearly somewhere. Perhaps this is some newbie mistake (I am new to this).