hi there am using ngRoute of angularjs with htm5lMode via $locatioProvider but if navigate to localhost:3000/profile and get the indext page without the partial loading, if i navigate to localhost:3000/#/profile the url is change to http://localhost:3000/#!#%2Fprofile and still remain on the index page. thus it only works (loading the partial) when i navigate manually to localhost:3000/#!/profile. i want to avoid hashbang url. any idea please
.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$routeProvider.when('/profile', {
templateUrl: 'partials/pro.html',
controller: 'kontrola'
})
$locationProvider.html5Mode('true')
$locationProvider.hashPrefix('!')
}])`
You are supposed to pass a Boolean value to html5Mode. But you are passing a string.
$locationProvider.html5Mode('true')
this should be
$locationProvider.html5Mode(true)
Related
If I call $state.go('login') using Angular ui router, the suburl looks like this.
Is there a way to hide #!/login? It's first time to use angular ui router and I dont know even it's possible.
So I want to see only localhost:3000/
You can create a state without an url in ui-router, by simply not defining the url property when configuring your states.
Like this:
angular.module('app').config(function ($stateProvider) {
$stateProvider.state('login', {
component: 'loginComponent'
});
});
You wont be able to navigate directly to the login url. But you'll still be able to use ui-sref or $state.go('login') to navigate.
If you still want to be able to navigate directly to the login page, you can configure another login state in addition to the above, where you specify the url property.
angular.module('app').config(function ($stateProvider) {
$stateProvider.state('login', {
component: 'loginComponent'
}).state('loginDirect', {
url: '/login',
component: 'loginComponent'
});
});
Try this in your config file:
$locationProvider.hashPrefix('');
For e.g.
angular.module('myPageApp', ['ui.router'])
.config(function ($stateProvider, $locationProvider) {
$stateProvider
.state('app',{
url: '/app',
templateUrl: 'someView.html',
controller: 'appController'
})
...
$locationProvider.hashPrefix('');
});
In above code, you can omit # and ! signs but can't skip the routed state in the URL. You can get the URL as localhost:3000/login or you can set the route on '/' identifier.
If your application does not use HTML5 mode or is being run on browsers that do not support HTML5 mode, and you have not specified your own hash-prefix then client side URLs will now contain a ! prefix.
To make your HTML5 mode ON, try following code.
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix(''); // by default '!'
$locationProvider.html5Mode(true);
}]);
Also in your header section of HTML, add this Base ref type as below:
<head>
...
<base href="/">
</head>
For more information, kindly refer this code application here: https://github.com/TheAjinkya/Angular-UI-Router
Hope its helpful!
.state('check', {
url:'/check',
templateUrl: 'views/List.html',
controller: 'ListCtrl'
})
$state.go('check')
works but
location.href='/check'
doesn't. With this I get:
Cannot GET /check/
If I reload the page, then also it results in Cannot GET error but works only if redirected by $state.go
I basically want to be able to load the page when that URL is hit no matter if it was hit through code or reloaded through the browser. Browser reload seems to fail always.
How do I trigger a particular state when redirected to a url?
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
html5 mode is enabled so url should work fine.
Q: In which component did you define $locationProvider
A: Controller.
Short answer
The best practice is to define $stateProvider into module.config It will guarantee that states will be loaded before any module controller.
app.config(['$locationProvider', '$stateProvider', '$urlRouterProvider',
function($locationProvider, $stateProvider, $urlRouterProvider) {
// ...
}
In your case, you call URL before controller is loaded and therefore no state is defined. This is a reason why you got error Cannot GET /check/
See References
I trying to make an application that contains multiple views as template. The templates are under the js/app/pages/ folder. And I have 2 templates to show and route. My routing section is:
var app = angular.module("myApp", ['ngRoute', 'ngMaterial']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/Page', {
templateUrl: 'js/app/pages/Page.html',
controller: 'pageController',
reloadOnSearch: false
})
.when('/Settings', {
templateUrl: 'js/app/pages/Settings.html',
controller: 'settingsController',
reloadOnSearch: false
})
.when('/Admin', {
templateUrl: 'js/app/pages/Admin.html',
controller: 'adminController',
reloadOnSearch: false
})
.otherwise({
redirectTo: '/Page'
});
$locationProvider.html5Mode(true);
});
And my html file contains
<div id="menu"></div>
<div ng-view></div>
Menu div contains menu elements that route me between the pages. For example, when I run this site on browser, URL will be localhost/Page, and when I click the settings button URL change with localhost/Settings. But when I press the F5 button in my keyboard. Page gives me error The resource cannot be found..
I search on the internet "how to refresh routing page in angularjs" and find some solutions but I couldn't make them work for me. I tried $route.reload() and $routeUpdate() method but that does not work for me. Maybe I'm wrong in something.
If you are using Apache server this should work run this in terminal
sudo a2enmod rewrite && sudo service apache2 restart
works for me
Solved! I couldn't manage refresh with ngRoute. Then i convert it into ui-router. I declare the states by urls. And the refresh is working. Thanks for comments and answers. Maybe this will help someone.
Actually when you are pressing F5 from keyboard, it is hitting to your server for that page, not angular because you don't have any # sign between your URL. For angular, URL should be like as - localhost/#/Page
Use html5mode
A great article about it here
to init its very simple
.config(function($routeProvider, $locationProvider) {
// other routes here
$locationProvider.html5Mode(true);
});
When you "reload a page", you whole app will reinit again. That means if you are not on the main page, and the sub route you are at missing some data, you will likely get an error.
You should look into resolve attribute for routes, so for example,
.when('/Settings', {
templateUrl: 'js/app/pages/Settings.html',
controller: 'settingsController',
reloadOnSearch: false,
resolve: {
resourceone: function(){return whatsneeedtoberesolvehere;}
}
})
that way no matter where your app is reloaded, it will have the necessary data to boot the page
Just keep the # in URL, you don't have to put extra effort to manage reloads etc. you can think a "#" in URL represent a specific state in single page application.
Otherwise it can be managed by module rewriting, that map the url with hashed version URL internally for AngularJs app.
I have an Angulrjs application and in the app.js I have the following config like below:
.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
.otherwise({
redirectTo: '/'
});
I am using ng-route and in my app.js run function I call a backend API which redirects me to a login page and once I enter my credentials it calls back the UI on the following address
http://hostname.company.net/?token=24OzjW%2FKZVfkiV%2Bku22T0ag%3D%3D
Now the page is blank instead of routing to the /. I have mapped the / with MainController but the controller and view is not getting mapped. If I print the $location.path the value is /.
Even if I reload the screen, the page is blank. Only when I remove the ?token=... and hit refresh I am getting the screen.
If I change the url to anything else, then it is working fine. If the route is a valid url, then corresponding controllers/view is called else MainController/MainView is getting called.
My config entry for handling the / is like below:
$routeProvider
.when('/', {
templateUrl: 'app/main/main.html',
controller: 'MainCtrl',
resolve: {
message: function (authService) {
return authService.authenticateUser();
}
}
});
Please let me know where I am going wrong or how to proceed as I am completely clueless on this bug.
EDIT: Removed incorrect information to avoid any potential misleading.
Keeping this here for now due to comment thread.
I'm working on a Django app which makes heavy use of Angular in some pages, e.g. at domain.com/myAngularApp
Within the angular page I'm using Angular routing for navigating between different views/states within that page. However across the whole website there are navigation links which need to result in round trip requests to Django. However all the pages include the same compiled javascript file which includes the Angular route declarations.
So my question is: how to I get Angular to mange its own routes and get out of the way when the location is changed (primarily by clicking a link on the page) to a path that it hasn't explicitly been told to own, i.e. to different subdirectories off the domain.
My routing declaration looks something like:
myApp.config( function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/myAngularApp/', {
templateURL: 'template1.html'
});
$routeProvider.when('/myAngularApp/stuff', {
templateURL: 'template12.html'
});
$routeProvider.otherwise({redirectTo: <not sure what to do here...> });
})
I've tried something like:
$routeProvider.otherwise({redirectTo: function(a1,r,a3){ window.location.href = r }})
But this makes the page refresh endlessly on any non-matched route.
Leaving out the otherwise statement seems to make it impossible to leave a page with a non-matched route when accessed directly... don't really understand why?
It must be possible to do what I want no?
I think I may have found a solution. I'm doing a similar thing, a multi-page angular site that uses angular for some of it's pages. Here's what I'm doing
var app = angular.module('appname', ['ui.bootstrap', 'ui.autocomplete'])
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}])
.run(function($rootScope, $location) {
var redirected = false;
$rootScope.$on('$locationChangeStart', function(event, nextLocation, currentLocation) {
if(!redirected && $location.path() !== '/current-url') {
redirected = true;
event.preventDefault();
window.location = $location.path();
}
});
});
So what I have to work out next is how to pass in the current-url path. One way I'm thinking is to us ng-init to set that data in the view (I'm using express.js so I'd use Jade). Or possibly in the run function grab the initial path and test against that.
The event.preventDefault() is there to stop an extra item being added to the browsers history. Before I did that I had to hit back twice to get back to the angular page.
Note This hasn't been tested with IE8 yet. I'm going to do that now and see how it fairs.
Update Ok I just tested this in IE8 and I got stuck in a redirect loop. I've updated the code to have a simple variable to check if we've redirected. Seems to work. I'd love to know a prettier way.