I've set up ui-router states like so:
$stateProvider
.state("login", {
url: "/Login",
templateUrl: "login.html",
controller: "LoginController"
})
.state("createBooking",
{
url: "/CreateBooking",
templateUrl: "createBooking.html",
controller: "CreateBookingController"
})
.state("calendarView", {
url: "/ViewBookings",
templateUrl: "calendarView.html",
controller: "CalendarController"
});
which works fine when running on the localhost (e.g. //localhost:[port]/Login)
However, when I push to the dev server under a virtual directory 'SiteName' (e.g. //dev.server.com/SiteName/Login) then the virtual directory part of the path is stripped out (e.g. //dev.server.com/Login)
It also affects all of my services, as it's looking at //server/serviceName instead of //server/directory/serviceName
When I push the site to staging/production, I'll be using different paths again.
How can I set up ui-router to properly handle my various paths?
So it turned out that I needed to remove the html5mode.
$locationProvider.html5Mode(true);
it now works with the urls showing as //dev.server.com/SiteName/index#/Login
Related
I used the stateprovider with an html page.
$stateProvider
.state('about', {
url: '/about',
templateUrl: 'pages/about.html
});
But i changed the about file to about.php and also in the code below.
$stateProvider
.state('about', {
url: '/about',
templateUrl: 'pages/about.php
});
It still seems to link to about.html somehow, because if I delete the about.html and keep about.php it is not working
Im wondering how I can use the .php file extention in the stateprovider.
EDIT:
Okay so this does work on my personal hosting space but not on external hosting on one.com. Any idea how to fix this?
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 have an angular app where I am using ui-router module. I am storing a "page" in database with URL and content. I also have some other states/URLs that have their own template. For example:
$stateProvider
.state('landing', {
url: '/',
templateUrl: 'landing-page.html'
})
.state('admin', {
url: '/admin',
templateUrl: 'admin.html'
})
.state('user', {
url: '/user',
templateUrl: 'user.html'
})
I want to define a state for the pages using something like
.state('page',{
url: '??',
templateUrl: 'page.html'
})
What should be in the url above if my page is dynamically stored in database with a URL/slug and content. How can I add the URL/slug here ? If I try this below:
.state('page', {
url: '/{path:.*}',
templateUrl: 'page.html'
})
Then it routes every page including the other states to the same template. I can always prefix the URL with something like /page but I don't want to do that. I want to be able to load the page as :
www.mysite.com/page-1
www.mysite.com/whatever-url
etc
Never mind. I figured this out. The trick was more about using regular expression. Here is my solution
.state('page', {
url: '/{path:(?!admin|user)[a-z0-9\-]+}',
templateUrl: 'page.html'
})
This will ignore routes starting with /admin and /user which we want first. Then, it will check if the url has at least 1 character.
I'm using angularjs ui-router with this stateProvider:
.state("admin", {
abstract:true,
url: "/admin",
templateUrl: "/app/template/adminabstract.html",
controller: "AdminAbstractController"
})
.state("admin.view1", {
url: "/view1",
templateUrl: "/app/template/adminview1.html",
controller: "AdminView1Controller"
}).state("admin.view2", {
url: "/view2",
templateUrl: "/app/template/adminview2.html",
controller: "AdminView2Controller"
})
Here is the current localhost link:
http://localhost:52058/index.html#/admin/view2
It works just fine in localhost, however when I publish to the server it no longer works. Here is what the link looks like on the server:
http://specific.com/appname/otheridentifier/index.html#/admin/view2
For my app to work when it is published I think I need to change my ui-router config or state provider so my localhost is
http://localhost:52058/index.html#/appname/otheridentifier/admin/view2
Am I on the right track? What do I need to do to make this work?
Since your website doesn't look like its in the root of the site you cant do
templateUrl: "/app/template/adminview1.html"
the / is saying look at the root of this website so it looks at
http://specific.org/app/template
you would want to change your template address to
templateUrl: "/appname/otheridentifier/app/template/adminview1.html"
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