I have a navigation tool that always returns the URL like this when I'm in my angular app.
http://example.com/pagename#
instead of
http://example.com/pagename#/viewName
When the navigation is clicked, this results in my app not having any view loaded. Otherwise, my routes work fine.
With my default route provider, it doesn't know how to handle this. I don't know if this is something I'm supposed to account for or what.
How can I adjust my route provider (or something else) to know how to handle when there's a # symbol in the URL without a path?
Here's a snippet of my route provider.
myApp.config(["$routeProvider",
function ($routeProvider) {
$routeProvider
.when("/itemUpdate", {
templateUrl: "/path/update.html",
controller: "itemUpdateController"
})
.when("/about", {
templateUrl: "/path/about.html",
controller: "aboutController"
})
.when("/items", {
templateUrl: "/path/items.html",
controller: "itemsController"
})
.when("/items/:itemId", {
templateUrl: "/path/item.html",
controller: "itemController"
})
.otherwise({
redirectTo: "/about"
});
}]);
Related
trying to add a simple 404.html template but for some reason it does not get rendered. in my app.routes.js I tried the following
$routeProvider.when('/', {
templateUrl: '/templates/index.html',
controller: 'IndexCtrl'
}).otherwise({
templateUrl: '/templates/404.html'
})
I also tried to use redirectTo as below but it does not work
.otherwise({
redirectTo: '/templates/404.html'
})
when I try to type something like http://localhost:5000/aaaaaaaaaaaaa in console I see 404 response but template is not rendered. do I need to adjust controller ?
You can create an specific route for 404 with an specific view /templates/404.html.
Than, in the otherwise() method call, you can redirect to that route /404:
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'templates/index.html',
controller: 'IndexCtrl'
})
.when('/404', {
templateUrl: 'templates/404.html'
})
.otherwise({
redirectTo: '/404'
});
});
In angular, is there a method to load different views & controllers when the routes are basically the same, but the actual string in the route is different?
In terms of routing, if the top level route parameter is being already used, is there way to load different View & Controller based on the different route parameter?
Below is what I was trying:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "app/components/0_home/homeView.html",
controller: "HomeController"
}) // Home
.when("/about", {
templateUrl: "app/components/1_about/aboutView.html",
controller: "AboutController"
}) // About
/*(...Bunch of other .whens)*/
//Project
.when("/project/:projectId", {
templateUrl: "app/components_project/0_home/homeView.html",
controller: "ProjectHomeController"
})
.when("/project/:projectId/HOME", {
templateUrl: "app/components_project/0_home/homeView.html",
controller: "ProjectHomeController"
})
.when("/project/:projectId/FLOORPLAN", {
templateUrl: "app/components_project/1_floorplans/floorplanView.html",
controller: "FloorplanController"
}) // Floorplan
.when("/404", {
templateUrl: "app/components/404.html"
}) // else 404
.otherwise({
redirectTo: '/404'
});
}
]);
I wanted to load
app/components_project/0_home/homeView.html
when routeProvider is
/project/:projectId/HOME
and load
app/components_project/1_floorplans/floorplanView.html
when routeProvider is
/project/:projectId/FLOORPLAN
Or is there any better way to handle this kind of situation?
I have simple table page (with controller) and init method like ng-controller="messageGridCtrl" ng-init="init()" and create page with different controller.
Create page has back link like Back to list, when I click route changed and init method invoked, but request don't work (don't recieve to server).
If I just reload (via f5) all works fine.
I'm new to angularjs.
From the angular-route-segment documentation,
$routeSegmentProvider.
when('/section1', 's1.home').
when('/section1/prefs', 's1.prefs').
when('/section1/:id', 's1.itemInfo.overview').
when('/section1/:id/edit', 's1.itemInfo.edit').
when('/section2', 's2').
segment('s1', {
templateUrl: 'templates/section1.html',
controller: MainCtrl}).
within().
segment('home', {
templateUrl: 'templates/section1/home.html'}).
segment('itemInfo', {
templateUrl: 'templates/section1/item.html',
controller: Section1ItemCtrl,
dependencies: ['id']}).
within().
segment('overview', {
templateUrl: 'templates/section1/item/overview.html'}).
segment('edit', {
templateUrl: 'templates/section1/item/edit.html'}).
up().
segment('prefs', {
templateUrl: 'templates/section1/prefs.html'}).
up().
segment('s2', {
templateUrl: 'templates/section2.html',
controller: MainCtrl});
It might help you
http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router
I am trying to create an Angular API which should be able to be integrated on any webpage. I have a frontApp using AngularJS and a backend which uses Laravel 4.
The problem is that my routing look like this at the moment :
angular.module('FrontApp').config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.when('/register', {
templateUrl: 'views/register.html',
controller: 'RegisterCtrl'
})
.when('/members', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/apinotfound', {
templateUrl: 'views/api.html'
})
.otherwise({
redirectTo: '/login'
});
}]);
But since my App will be integrated on a webpage whose URI can not changed, I can not use this routing system. I was wondering if a trick would be possible, to keep those routes in a variable maybe, and then route my App without changing the URI of the page?
The problem is:
I cannot reach home page when url is www.some.com but can when it's www.some.com/#! or www.some.com/#!/
I was define default web app route:
$routeProvider.when('', {templateUrl: pathToIncs + 'home.html', controller: 'homeController'});
$routeProvider.when('/', {templateUrl: pathToIncs + 'home.html', controller: 'homeController'});
Added otherwise option:
$routeProvider.otherwise({redirectTo: '/404'});
And turn of html5 mode
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
As i said befor - it works when I'm came by ulr like www.some.com/#! but not when www.some.com. In this case .otherwise option will be called.
In any other case routing works well. In the my app I got an urls like a www.some.com/#!/login, www.some.com/#!/signup
P.S. Server side works on php5+nginx
P.P.S. I'm use Angular 1.2.0 with ngRoute module
Try setting the < base > tag.
<head>
<base href="/">
</head>
Have a route defined for home
.when('/home', {
templateUrl: pathToIncs + 'home.html',
controller: 'homeController'
})
using redirectTo on the "/"
.when('/', {
redirectTo: '/home'
})
along with the .otherwise
.otherwise({
redirectTo: '/home'
});