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.
Related
Following is my code:
var app = angular
.module('moviesApp', ['ui.router'])
.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/SignIn');
$stateProvider
.state("SignIn", {
url: "/SignIn",
templateUrl: "Pages/SignIn.html"
})
.state("SignUp", {
url: "/SignUp",
templateUrl: "Pages/SignUp.html"
});
$locationProvider.html5Mode(true);
});
When I load the state - '/SignIn' it loads the contents of 'Pages/SignIn.html' in ui-view as expected. Similarly, when I load the other state - '/SignUp' it loads the contents of 'Pages/SignUp.html' in ui-view.
What is my requirement?
I want 'Pages/SignIn.html' or 'Pages/SignUp.html' to be loaded only through states in ui-view. They should not be loaded through direct URL navigation in browser.
In other words, when I type '/Pages/SignIn.html' directly in the browser's address bar, it should be redirected to the state '/SignIn'.
The contents of html files under 'Pages' folder should not get displayed over direct url navigation.
How can I achieve this? Please advise.
To prevent it from showing in the address bar use name instead of url
$stateProvider.state('default', {
url:'',
templateUrl: ctx + '/jsp/home/dashboard.jsp'
}).state({
name:'/test',
templateUrl: ctx + '/jsp/home/testview.jsp'
});
In the html page give as below
<a ui-sref="test">test view</a></li>
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?
OK, so I am an Angular.js newbie and I am working on creating some rudimentary routing. I have the following definition for my routing:
JBenchApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: 'JBenchCtrl'
}).
when('/calendar', {
templateUrl: 'partials/calendar.html',
controller: 'JBenchCtrl'
}).
otherwise({
redirectTo: '/dashboard'
});
}]);
When I load the page http://localhost:53465/default.html what I get is
http://localhost:53465/default.html#/dashboard
How can I make this show up as
http://localhost:53465/dashboard
The routes that you have defined are the text that appear after the hashbang in the URL - hashbang because you do not seemed to have set HTML5 mode to true.
Thus, when you load the page http://localhost:53465/default.html, AngularJS will attempt to load the route http://localhost:53465/default.html/#!/ where the route is / - the text that appears after the hashbang(#!).
Look at your routes. There is no route handler for /. Thus, the otherwise() function is executed which simply redirects to the route /dashboard. Thus, the final URL is http://localhost:53465/default.html/#!/dashboard
If you want to load the URL as http://localhost:53465/dashboard then simply provide the above URL as it is. You don't have to specify default.html as the route handler takes care of loading the relevant HTML file (based on the templateUrl property of the route handler object)
Rename default.html to index.html then you'll be able to navigate to http://localhost:53465/#/dashboard.
My angular application has multiple pages which users can visit and I would like to hide all other urls and only show users the base url. So imagine my base url is: www.example.com and I have other pages like About, Contact Us etc. Currently, when the user clicks on About, the url changes to www.example.com/about. Is it possible for angular not to add the "/about"? Is this possible using angular js? Also, I have been searching for solutions and have experimented with ui-router.js, is it also possible with this module?
If you are using ui-router, then you can define states without specifying urls like
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "state1.html",
controller: 'Controller3'
})
.state('state2', {
templateUrl: "state2.html",
controller: 'Controller2'
})
.state('state3', {
templateUrl: "state3.html",
controller: 'Controller3'
})
});
So by default the url will be /state1. And you can implement navigation by using ui-sref directive in your template like ui-sref="state2" or using $state service in your controller like $state.go('state2').
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.