No angular view loads when there's just a # in the URL - javascript

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

angular 404 does not work with otherwise templateUrl nor redirectTo

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'
});
});

Angular $routeProvider to handle different URLs differently

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?

How correct change route controller?

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

Route AngularJS app without changing URI

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?

Angular.JS: cannot set default route when no hash

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'
});

Categories