I am trying to modify the url of my angularjs app . Initially my urls were http:localhost:8080/a/web/app/index.html#/ and http:localhost:8080/a/web/app/index.html#/next
when I inserted the following code to my app.js
var App =angular.module('App', [
'ngCookies',
'ngResource',
'ngRoute',
])
.config(function ($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/a/web/app/views/main.html',
controller: 'ctrl_main'
})
.when('/next', {
templateUrl: '/a/web/app/views/next.html',
controller: 'ctrl_next'
});
$locationProvider.html5Mode(true);
});
My new urls became http:localhost:8080 and
http:localhost:8080/next .
My problem is when I tried to reload the page at http:localhost:8080/next , 404 Not Found error is coming
That's expected with html5 mode. The browser, if you ask it to reload, will send a request to the URL it has in its location bar.
So you need to configure the server to actually send back the index.html page for all the bookmarkable URLs you use in the angular application. The whole page will reload, the angular app will restart, the $route service will restart, and will invoke the controller and display the partial configured for the URL.
I know the answer is a bit outdated, but in my case adding <base> attribute to index.html helped, for example:
<base href="/a/web/app/">
Related
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)
I'm using $stateProvider to handle my routes in Angular 1 and I'm confused as to why my routes have an /# before they all start. I wouldn't mind but when I test those routes in Postman the routes return a 404 error. I'd like to find out why /# that gets added for my routes and get rid of it so I can connect my front end to my backend in node. I'm kind of new to using angular with node this so I'm not sure if I'm explaining my problem correctly.
Here's my code
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/main");
$stateProvider
.state("main", { url: "/main", templateUrl: "templates/main/main.view.html", controller: "MainCtrl" })
.state("map", { url: "/map", templateUrl: "templates/map/map.view.html", controller: "MapCtrl" })
});
These are what my routes look like
http://localhost:8080/#/main
http://localhost:8080/#/map
but I want them to look like
http://localhost:8080/main
http://localhost:8080/map
To get rid of #/ you would have to set $locationProvider.html5Mode(true); in one of your config files.
angular.module('app', []).config(function ($locationProvider) {
$locationProvider.html5Mode(true);
});
For more information on html5 mode vs hashbang mode, have a look at the official angular documentation
Keep one thing in mind though, in html5 mode, your app might not be able to handle page refreshes properly without some server side url re-routing. More information in one of the stack overflow posts here: Reloading the page gives wrong GET request with AngularJS HTML5 mode
Man, just follow advises here and it's gonna be alright. Removing the fragment identifier from AngularJS urls (# symbol).
And one more usefull link https://docs.angularjs.org/guide/$location.
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 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 been looking through multiple tutorials and other stack overflow posts with no success for my app.js $routeProvider. Here is github link to project https://github.com/StudentJoeyJMStudios/PetPinterest.git
Here is my code for app.js
var app = angular.module('se165PetPinterestWebApp', [
'ngAnimate',
'ngCookies',
'ngRoute'
]);
app.config(['$routeProvider', function($routeProvider){
$routeProvider.when('/select',
{
templateUrl: '/views/categorySelection.html',
controller: 'CatSelCtrl'
}).
otherwise(
{
redirectTo: '/'
});
}]);
When I want to navigate to new page I know to injuect $location and manipulate the path using the $location dependency but it does not navigate to new page. Navigating pages this way does it reload js files such as my service file? Please help thank you in advance.
Did you remember to include the ng-view directive in your index.html?
ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.
https://docs.angularjs.org/api/ngRoute/directive/ngView