Angularjs Default routes in html5Mode - angularjs

In my multi languages angular app, I want the default to be English
This is my routes
$urlRouterProvider.otherwise("/en");
//
// Now set up the states
$stateProvider
.state('app', {
abstract: true,
url: '/{lang:(?:he|en)}',
template: '<ui-view/>'
}).state('app.home', {
url: '',
templateUrl: "Assets/app/templates/home.html",
controller: 'homeController'
})
The $urlRouterProvider.otherwise worked as expected, and if i enter to my domain
http://example.com
the URL changed to http://example.com/#/en
My problem is that i change the routes to html5Mode (for seo)
$locationProvider.html5Mode(true);
In the html5Mode when i enter to my domain http://example.com, the URL doesn't change to http://example.com/en as expected.
In short how can i add default routing in html5 mode?
Thanks

Related

angular-ui-router always appends app to url

The ui-router in our angular application always appends "#app" to the URLs in our app, which clearly is not desired behaviour. This also has the side-effect, that when you use the browser navigation (back and forward), you'll need two clicks to actually switch the page.
AngularJS version: 1.2.29
ui-router version: 0.2.10
The browser history looks like so:
http://localhost:8080/app/#/modulename
http://localhost:8080/app/#/modulename#app <- unnecessary step
http://localhost:8080/app/#/anothermodule
http://localhost:8080/app/#/anothermodule#app <-unnecessary step
... and so on.
We already tried switching to ui-router's html5mode, but this just omits the first hash-sign in the URL and doesn't have any effect on anything else.
This is our stateProvider
$stateProvider
.state('app', {
abstract: true,
url: '/',
// parent: true,
templateUrl: CONFIG.baseUrl + '/js/modules/Core/View/app.html',
})
.state('access.404', {
url: '/404',
templateUrl: 'tpl/page_404.html'
});

How to use php pages in templateurl in stateprovider of angularjs

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?

angular ui-router for dynamic page url

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.

AngularJS Default Home Page Routing Url

I'm using AngularJS for my front end web framework and was wondering how I can change the routing of my states so that when i go to my website, it would say (for example) abc.com rather than abc.com/home. I am using StateProvider to switch between views and this as default home url
state('home', {
url: '/home',
templateUrl: 'pages/home.html',
}).
$urlRouterProvider.otherwise('/home');
I have this in my index.html
<div ui-view></div>
I want to keep my home page content in a separate file from index.html, yet always not show that url so I would not see "/home" at all whenever I use the website. How can I do this?
state('home', {
url: '/',
templateUrl: 'pages/home.html',
})
$urlRouterProvider.otherwise('/');
You need to change the URL in the route definition to / instead of /home.

Angular hashbangs ui-router - home state

I'm using ui-router in Angularjs and I have the following routes (as part of my app.js file):
...
$urlRouterProvider.otherwise('/dashboard');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/home.html',
data: { public: true }
})
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
data: { login: true }
})
...
I have decided to keep the # in my routes because ui-router doesn't work too well with the html5 setting for routing without the hash.
Question: When I navigate to localhost:8080/ I would expect my home state to kick in but it goes to /dashboard (the otherwise route). I can only access the root of my site with localhost:8080/#/ - is this expected behaviour?
Not the answer for the question, but you might want to take a look at http://angular-route-segment.com for this case, as it works on top of built-in ngRoute module which plays well with html5 mode as well.

Resources