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
Related
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.
Can we do something like this?
GuitarApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
<!-- no controller here -->
}).
when('/details/:guitarID', {
templateUrl: 'partials/details.html',
controller: 'DetailsController'
}).
otherwise({
redirectTo: '/list'
});
}]);
Beacause the controller that needed there is already added in tag of HTML, beacause other portion of HTML also want to make of that controller.
Specifying the controller in $routeProvider is completely optional. Just be sure your HTML specifies it. And be sure that you don't have it in both places!
As comments mentioned, refer to best practices on what is 'best' to do.
My /home template doesn't have an associated controller (it's blank). Anyway to skip loading the controller and just load the view? I'm using AngularAMD to lazy load so it's an additional call just to get a blank controller file.
app.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl 'home/home.html',
controller: 'HomeController' //is empty because page is just static text
})
.when('/login', {
templateUrl: 'login/login.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/home'
});
});
Nvm, found that you can leave controller: '' blank and it works. It was just throwing an error in my case because I forgot to remove the ng-controller="HomeController" tag from the template/view. Once I removed that, the error was no longer being thrown (in console).
I am an amateur with angular. I am using route provider to load separate html pages and controllers. This works fine when I know what pages the site has and I can define them.
app.config(function($routeProvider) {
$routeProvider
.when("/page1", {
templateUrl: "../page1.html",
controller: "Page1Ctrl"
})
.when("/page2", {
templateUrl: "../page2.html",
controller: "Page2Ctrl"
})
.when("/page3", {
templateUrl: "../page3.html",
controller: "Page3Ctrl"
})
.otherwise({
redirectTo: "/page1"
});
});
However, in future, more pages may be added and I want to code a way for angular to take this into accout. Something like;
app.config(function($routeProvider) {
(..figure out n...)
$routeProvider
.when("/page"+n, {
templateUrl: "../page"+n+".html",
controller: "Page"+n+"Ctrl"
})
.otherwise({
redirectTo: "/page1"
});
});
I cannot figure out how to return a var listing the current page so I can remove '/page' to manipulate the int as n.
I tried console logging $routeProvider but .when simply returns a function. I don't think injecting $scope is wise because obviously a var is passed somewhere using $routeProvider alone.
If you use colon (:) in the route, Angular will parse that and populate the $routeParams with it, then, in your templateUrl, instead of a string, you can use a function which returns the template url. Just inject the $routeParams in the templateUrl's function and build the url you need.
$routeProvider
.when( '/page/:pageNumber', {
templateUrl: function ($routeParams) {
return 'page_' + $routeParams.pageNumber + '.html'
}
})
.otherwise( { redirectTo: '/page/1' } );
Here is a working fiddle.
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.