I have a small angular app that uses this configuration:
.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider,$httpProvider) {
$routeProvider.
when('/', {templateUrl: 'home.html', controller: 'mainCtrl'}).
when('/report/fail', {templateUrl: 'fail.html', controller: 'mainCtrl'}).
when('/report/:url', {templateUrl: 'report.html', controller: 'reportGeneralCtrl'}).
when('/report/:id/:url', {templateUrl: 'report.html', controller: 'reportUserCtrl'}).
otherwise({redirectTo: '/'})
$locationProvider.html5Mode(true)
}]);
When I try to access some url directly, typing in the browser the url, angular add this string: "#.UqX3mNJN9Zo" to my url.
Why this happens?
Found out that this is caused by addThis script. probably this don't work well on angular.
Related
I have an AngularJS 1.0.7 web application. When I load my site in a browser I type www.domainname.com. The browser loads the page and immediately my browser url changes to www.domainname/home.
How can avoid this? I would like the browser shows www.domainname.com when I´m in index.html
UPDATE:
Please see my app.js:
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers'])
.config(['$routeProvider', '$httpProvider', '$locationProvider',function($routeProvider, $httpProvider, $locationProvider) {
// use the HTML5 History API
$locationProvider.html5Mode(true);
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common["X-Requested-With"];
$routeProvider.when('/about', {templateUrl: 'partials/about.html', controller: 'AboutCtrl'});
$routeProvider.when('/contact', {templateUrl: 'partials/contact.html', controller: 'HomeCtrl'});
// More routing
$routeProvider.when('/home', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'});
// More routing
$routeProvider.otherwise({redirectTo: '/home'});
}])
.config(function(AngularyticsProvider) {
AngularyticsProvider.setEventHandlers(['Console', 'GoogleUniversal']);
}).run(function(Angularytics) {
Angularytics.init();
});
It should work if you replaced:
$routeProvider.otherwise({redirectTo: '/home'});
by
$routeProvider.otherwise({redirectTo: '/'});
and added:
$routeProvider.when('/', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'});
NOTE: and as #isherwood rightly commented below:
$routeProvider.when('/home', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'});
can be removed altogether, to avoid having both '/' and '/home' pointing to the same route.
I have a small AngularJS website where I use one controller and a view. I wanted to remove the /# in the URL with $locationProvider.html5Mode(true), but here starts the problem.
My code:
[...]
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/',
{
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.otherwise({redirectTo: '/'});
}]);
When I do this I get the error that he can't find the home view on views/home.html (which is the correct path). When I delete the html5mode for removing the /# in the URL it all works just fine.
With this:
[...]
.config(['$routeProvider', function($routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/Project',
{
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.otherwise({redirectTo: '/Project'});
}]);
Summary: when I add the html5mode it gives me the error that he can't find the view. When I remove it it all works.
Anyone who has an idea what the problem could be?
I'm building an Angular app with RESTful CRUD actions. Almost everything is working except for the /users/new route ~ it displays the show view instead of new view specified in $routeProvider. However, '/new' does work. I'm not getting any feedback in the js console. Any ideas or examples I should read?
App.config [
'$routeProvider'
'$locationProvider'
($routeProvider, $locationProvider, config) ->
$routeProvider
.when('/',
templateUrl: '/partials/home.html'
).when('/users',
templateUrl: 'partials/users/index.html'
controller: 'UserIndexCtrl'
).when('/users/:id',
templateUrl: 'partials/users/show.html'
controller: 'UserShowCtrl'
).when('/users/:id/edit',
templateUrl: 'partials/users/edit.html'
controller: 'UserEditCtrl'
# why does following not work:
).when('/users/new',
templateUrl: 'partials/users/new.html'
controller: 'UserNewCtrl'
# but this does:
).when('/new',
templateUrl: 'partials/users/new.html'
controller: 'UserNewCtrl'
).otherwise(redirectTo: '/')
$locationProvider.html5Mode(true)
]
The $routeProvider try to test url pattern defined from TOP to BOTTOM.
So the URL pattern /users/new match /users/:id defined 3rd before /users/new defined 5th.
If you define /users/new before /users/:id, I expect that it would work properly.
The code should be like below.
App.config [
'$routeProvider'
'$locationProvider'
($routeProvider, $locationProvider, config) ->
$routeProvider
.when('/',
templateUrl: '/partials/home.html'
).when('/users',
templateUrl: 'partials/users/index.html'
controller: 'UserIndexCtrl'
# you should write it before '/users/:id'
).when('/users/new',
templateUrl: 'partials/users/new.html'
controller: 'UserNewCtrl'
).when('/users/:id',
templateUrl: 'partials/users/show.html'
controller: 'UserShowCtrl'
).when('/users/:id/edit',
templateUrl: 'partials/users/edit.html'
controller: 'UserEditCtrl'
).when('/new',
templateUrl: 'partials/users/new.html'
controller: 'UserNewCtrl'
).otherwise(redirectTo: '/')
$locationProvider.html5Mode(true)
]
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