i'm trying to use ngRoute to config my routes on my app but for some reason, it still not working. i've searched a lot and seems my code is ok. i'm gonna show how i'm doing it:
my a.href:
<a href="#/bancodedados">
my config route:
academico.config(function($routeProvider){
var home = {
controller : "home",
templateUrl : "js/plugins/angular/views/home.html"
}
var bancodedados = {
controller : "bancodedados",
templateUrl : "js/plugins/angular/views/bancodedados.html"
}
$routeProvider
.when("/", home)
.when("/bancodedados", bancodedados);
});
but for some reason the app redirect me to http://localhost/joli/#!/#%2Fbancodedados
and still on the same views.
This is often because of upgrading angular to version 1.6 which changes the default hash prefix to ! whereas it used to be '' (the empty string). You can read more on this here and here.
Potential Fix 1: Change your links to use #! (hashbang) as follows:
<a href="#!/bancodedados">
Potential Fix 2: reset the hash prefix back to the empty string by injecting $locationProvider into your config block and then setting the hash prefix as follows:
academico.config(function($routeProvider, $locationProvider){
$locationProvider.hashPrefix('');
// The rest of your config block...
});
Related
I'm using Angular on Django with Apache. And I have an app like the following:
(function(){
'use strict';
angular
// AngularJS modules define applications
.module('app', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "/static/app/foo/templates/main.html"
})
.when("/red", {
templateUrl : "/static/app/foo/templates/red.html"
});
});
function foo() { }
})();
I'm serving my site on: http://localhost/ok/
When I make a GET to http://localhost/ok/ or to http://localhost/ok, all it's fine and the URL is transformed respectively to http://localhost/ok/#!/ or to http://localhost/ok#!/.
In main.html I have a link to the red "anchor" Go to Red. It points to http://localhost/ok/#red but when I click it, red.html is not returned, and I read in the address bar http://localhost/ok/#!/#red or http://localhost/ok#!/#red (depending on the URL pattern of the first call).
I do not understand where the problem is. How can I fix?
Try this:
Go to Red
Learning some Angular - and I'm stuck on routing
Here is my angular config
var meanApp = angular.module('carz', ['ngRoute']);
meanApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'mainCtrl'
})
.when('/red', {
templateUrl: 'red.html',
controller: 'redCtrl'
});
});
Here is are my links
Home
Red
When I load up my node app I am directed to
http://localhost:8080/#!/
And I get my angular controller working as expected within the ng-view tags
But I cannot switch from one controller to the other using the links above.
If I select the red tag my URL adds an extra # becoming
http://localhost:8080/#!/#red
Note if I manually change to
http://localhost:8080/#!/red
My controller changes and it works so why am I getting the extra #
Thanks for any help
Since AngularJS 1.6 there is a breaking change in routing:
The hash-prefix for $location hash-bang URLs has changed from the empty string "" to the bang "!".
(See https://github.com/angular/angular.js/blob/master/CHANGELOG.md)
Solution:
either start using #! Instead of #
OR set up $locationProvider to accept just using #, like this:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
I have installed my Angular App in a location like this:
http://example.com/my-app
My App routing is like this:
var myApp = angular.module('myApp', ['ngRoute','ngAnimate', 'ui.bootstrap', 'angularFileUpload']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/templates', {
controller: 'TemplatesController',
templateUrl: '/components/com_myApp/myApp/views/templates/template-list.html'
})
.when('/apps', {
controller: 'AppController',
templateUrl: '/components/com_myApp/myApp/views/apps/app-list.html'
})
.otherwise({
redirectTo: '/templates'
});
}]);
Now what happens is, when I go to http://example.com/my-app, the url instead of showing http://example.com/my-app#/templates it is showing as http://example.com/templates
It seems the otherwise condition is basically removing the base directory my-app# from the url. I have been scratching my head over this and after reading I also tried adding base url to head tag and tried changing the myApp.config to this:
myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
....
}
But although the routing seems to work when using $locationProvider like the above, the base url is still not showing the way I want it. The url is showing like this http://example.com/templates without my-app in the url path. I dont want Angular to remove the base path from the URL and I want the urls to show like this http://example.com/my-app/..xyz...
Why is Angular doing this?
This is happening because you've instructed Angular to not use hashbang URLs by specifying $locationProvider.html5Mode(true). Remove or otherwise comment out that code snippet and if you specified <base href="/"> in your root template file, remove or comment out that also and just use ngRoute without those.
I have to build an app for an existing website, but unfortunately the website (outside of my control) detects the user device and redirects to a mobile version.
I am trying to reuse the same js file but different html files.
So I have:
index.html for desktop
mobile.html for mobile
both call init.js where I want to handle my logic, my problem is that for some reason the routing is not working as I expected and I cannot figure out why.
Desktop:
I go to example.com
get redirect to example.com/#/steps/age/0
Refresh the page and it stays in example.com/#/steps/age/0
This works as expected
Mobile:
I go to example.com/mobile.html
get redirect to example.com/mobile.html#/steps/age/0
Refresh the page and instead of staying in the same url, it goes to example.com/steps/age/0#/steps/age/0
This does not work as expected (expected to stay in the same url once refreshing as in the step number 2)
Code below:
angular
.module('profileToolApp', ["ngRoute", "ngResource", "ngSanitize"])
.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/steps/:steps*', {
templateUrl : 'profile-app.html',
controller : 'example'
})
.otherwise({
redirectTo: '/steps/age/0'
});
})
.controller('example', function($scope, $routeParams, $resource, $location){
console.log("example controller");
});
Can anyone please advise?
Thanks.
Angular is examining the entire path to see where it should route to. So when you have example.com/mobile.html#/steps/age/0 There is no matching route, so it substitutes the route for you, in place of mobile.html so you get /steps/age/0#/steps/age/0 from your otherwise. The fundamental problem is that angular has no sense of what mobile.html means, and takes it as a parameter.
One solution is to use routes to separate your pages.
$routeProvider
.when('/', {
templateUrl : 'desktop.html', //was 'index.html pre edit
controller : 'example'
})
.when('/mobile/', {
templateUrl : 'mobile.html',
controller : 'example'
})
.when('/steps/:steps*', {
templateUrl : 'profile-app.html',
controller : 'example'
})
.when('/mobile/steps/:steps*', {
templateUrl : 'mobile-profile-app.html',
controller : 'example'
})
.otherwise({
redirectTo: '/'
});
})
Controllers may vary as needed.
Alternatives to this are to have mobile.html use its own angular App and routing, which may be beneficial since you won't run into desktop directives leaking into mobile. You can inject all of your directives and controllers into it, but still have a nice separation of index and mobile. You can take that a step further and have a redirect to m.example.com, but that's a different topic.
EDIT I made a mistake. Having templateUrl be index.html is a bit wrong. index.html should contain your ng-app and your ng-view directives, possibly a controller. Any common html should reside there. desktop.html and mobile.html should contain the specific HTML for those platforms.
As an afterthought, Within those you could have a directive called profile that does all of your profile work, and with a bit of ng-switch you can have that appear if steps is defined in the scope, and use:
$routeProvider
.when('/steps?/:steps?', {
templateUrl : 'desktop.html', //was 'index.html pre edit
controller : 'example'
})
.when('/mobile/steps?/:steps?', {
templateUrl : 'mobile.html',
controller : 'example'
})
But now I'm rambling, I'm not 100% sure that will work tbh. END EDIT
I have the following config for routes:
app.config( function ($routeProvider, $locationProvider, $httpProvider) {
// Routes
$routeProvider.when('/admin', {
templateUrl : '/app/partials/dashboard.html',
controller : 'DashboardCtrl'
});
$routeProvider.when('/admin/settings', {
templateUrl : '/app/partials/settings.html',
controller : 'SettingsCtrl'
});
$routeProvider.when('/404', {
templateUrl : '/app/partials/404.html',
});
$routeProvider.otherwise({redirectTo: '/404'});
$locationProvider.html5Mode(true);
});
Everything is working except, when I'm on /admin/settings and reload the page, it redirects to 404. I tried removing the html5Mode, it works. However, I really want to use html5Mode. What am I missing? Please help me.
Oh, btw, I'm using AngularJS 1.1.5.
I had a very similar error and solved it by inserting <base href='my_app_base_url'></base> into my index.html page, in the head. The idea came from this GitHub issue (https://github.com/angular/angular.js/issues/2774) and this other one (https://github.com/angular/angular.js/issues/2868), as well as the one I mentioned in my comment.
try $location.path('/404').replace();