i have this code for my routes. Everything works fine with these links except one link... The link without anchor
myapp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '/library2/test1.html',
controller: 'libraryController'
}).
when('/home', {
templateUrl: '/library2/test0.html',
controller: 'libraryController'
}).
otherwise({
redirectTo: '/home'
});
}]);
Works fine: /user/7/library2/#/home
Works fine: /user/7/library2/#/else
Works fine: /user/7/library2/#
Works BAD: /user/7/library2/
Is there any way to fix it?
You might be missing the hashbang concept in angular, please give a read below
$location / switching between html5 and hashbang mode / link rewriting
Related
trying to set the default route when it fails but for some reason it does not work with my SPA.
here is the current code
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'templates/index.html',
controller: 'IndexCtrl'
})
.otherwise({
redirectTo: '/'
});
});
also tried to change otherwise to
.otherwise({
redirecTo: function(){
return '/'
}
});
on the other hand if I put template url within otherwise it works
.otherwise({
templateUrl: 'templates/index.html',
controller: 'IndexCtrl'
});
really don't understand why it behaves differently !?
I edited one of my ng-Route tests to essentially have the same setup as your when('/') and otherwise methods, but mine is working just fine:
https://codepen.io/tcraw/pen/vRpOXz
The only thing I can think of at this point is that perhaps your templateUrl is incorrect...
Do you have another view to test in the templates directory? (e.g. templates/otherView.html)
Reference
$routeProvider
I have a symfony application which works in a subdirectory:
www.example.com/subdirectory
At this point my application is routed client side with angularjs-framework:
app.config(["$routeProvider", function($routeProvider) {
$routeProvider.
when('/', {
redirectTo: '/homepage'
}).
when('/homepage', {
templateUrl: 'index1.html',
controller: 'HomepageCtrl'
}).
when('/contact', {
templateUrl: 'index2.html',
controller: 'ContactCtrl'
}).
otherwise({
redirectTo: '/homepage'
});
}]);
When the site is loaded:
www.example.com/subdirectory
it automatically changes to:
www.example.com/subdirectory#/homepage
But it should be
www.example.com/subdirectory/#homepage
Anybody could help me to get this working?
Thanks and greetings!
For changing the base URL of your application you could use <base href="/subdirectory/"> inside your head tag of page.
But as per your $routeProvider setting the remaining part of URL seems OK to me. If you really wanted to change it then you need to replace
/homepage
with
homepage
in config phase of angular.
So I'm playing around with learning angular and trying to make a project issue tracker, only I'm having problems with ngRoute and routing.
What I'd ideally like is a system whereby (say) issuetrack.com/projectX returns a view of all the issues for projectX, and issuetrack.com/projectX/XYZ returns a view of the specific issue with the related ID (XYZ).
I've setup my config as such:
tracker.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'static/partials/index_partial.html',
}).
when('/dashboard', {
templateUrl: 'static/partials/dashboard.html',
controller: 'DashboardController'
}).
when('/404', {
templateUrl: 'static/partials/fourOHNOfour.html',
}).
when('/:project', {
templateUrl: 'static/partials/project.html',
controller: 'ProjectController'
}).
when('/:project/:issue', {
templateUrl: 'static/partials/issue.html',
controller: 'IssueController'
}).
otherwise({
redirectTo: '/404'
});
$locationProvider.html5Mode(true);
}]);
But every time I visit (say) localhost:8080/example/1 the page just hangs and becomes unresponsive. localhost:8080/example works completely fine though.
Is what I've done the right way to go about it, or is there another way my googling hasn't been able to find?
Thanks!
Fixed! After several hours...
All you need is:
<base href="/" />
In the head of the index page where the ng-view is.
Hopefully I can explain this properly. On the Angular tutorial, you can use partials doing this:
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
We've all done it and it works great, but for the first time I'm using a different login.html page that doesn't have anything in common with the rest of the pages. Is there a way I can use ngRoute to setup the controller and just load the entire login.html page instead of pointing it at a partial?
using ng-view and
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '/partials/home',
controller: 'homePage'
}).
otherwise({redirectTo: '/login'});
}]);
everything works fine, except the URL, which shows /#/ before each address. How do you get rid of it?
inject $locationProvider and set html5mode to true
http://docs.angularjs.org/guide/dev_guide.services.$location
myApp.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: '/partials/home',
controller: 'homePage'
}).
otherwise({redirectTo: '/login'});
$locationProvider.html5Mode(true); // <-- Here comes the magic
}]);
remember though that you will need to set upp the backend to redirect all links to index.html