I am using UI-Router for routes/states in my app and URLs were having "#" so to remove this , I used $locationProvider like -
function configState($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
Added ngRoute in module dependency and added <base href="/" > in my index.html.
Problem -
If I am using it as a normal app like in same tab and navigates to other state, it works BUT whenever I pasted the URL in another tab and hit enter its throwing Cannot GET /app_views/contacts URL is like - http://localhost:9000/app_views/contacts
Though with hash in URL it works in both way manner.
You are likely getting this error because your server is not configured correctly. In other words when you manually enter /app_views/contacts it will make a request to the server for that page. For this to work properly you need configure your server to route all traffic to your index.html page in order for Angular to properly take over and display the correct view.
Here is a related post Reloading the page gives wrong GET request with AngularJS HTML5 mode
Related
my singlepage angularjs application can be accessed through the root address of my webserver like.
localhost:8080/
When I chose to go for example to the home-state the application is supposed change the url in the browsers addessfield to localhost:8080/#/home where the first part (localhost:8080/) points to my angular application and the second part (#/home) points to the home-states url.
But instead of doing what it's supposed to do my angular-application changes the url in the browsers addressfield to localhost:8080/home which on reload obviously creates a 404.
Can any of you tell me what I am doing wrong or at least give me a hint on where to look?
disable the html5 mode from the config. add/change the following line in the config
$locationProvider.html5Mode(false);
This will add the # to your url.
You just have to say you don't use the HTML 5 mode with the $locationProvider. In your config file:
myApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(false);
}]);
JSFiddle demo
I am using angularjs routing in my web app, and I have included the $locationProvider and the base tag in HTML head which is <base href="/webapp/"> in order to remove the hash symbol in the URL, it works fine when I redirect using anchor tags e.g. Home but gives a 404 error when I redirect using javascript e.g. window.location.href = '/webapp/home';. Tried everything but so far nothing, any help will be highly appreciated. Thank you in advance.
Try : Home
When you are using angular(JavaScript) routing; JavaScript routing start after # keyword in URL, other wise browser think this is the server side routing trigger; or page will get refresh.
USE : Home
$locationProvider will remove the # after redirecting to the the view.
I just finished coding a new web project using AngularJS and Bootstrap. The development took place using Brackets, an editing tool that launches Chrome for testing while functioning as the web server.
So far, everything works as required both when Brackets is used as the server as well as when the whole project is deployed within a Tomcat installation, and this as long as the browser being used is Chrome and the machine is a Windows 10 computer.
Now, I started testing the project using different browsers and devices (e.g tablets, mobiles, etc.) and, oops! I am getting crashes all the time.
It would appear that the first (and perhaps central) issue is coming from the way I implemented and use Angular's routing services (or, at least, this is what is suggested by several posts I found). Two things are happening (depending on the browser and the action triggered) pointing in that direction:
I received many times the error infdig, meaning that there is an infinite reload loop somewhere,
When the user successfully logs into the the system, an object containing the user's details is stored as a $rootScope object, and when a $window.location.href command is used to move to other page, all the user information previously stored disapears (strangely, this s not happening with Chrome, but it is with IE and Edge!).
Unfortunately, I was unable to fully understand what is the proper way of using the routing services.
The structure of the project is:
[MyApp] -- This is the folder containing the whole project under TOMCAT's "webapps" folder
index.html
index.js -- Contails the controller related ot the index.html page
[pages] -- Sub-folder hosting all the pages of the project except for the `index.html`
page1.html
page2.html
:
:
[js] -- Sub-folder hosting the controllers of each and every sub-page
page1.js -- Sub-page controller
page2.js -- Sub-page controller
:
:
Transition to the sub-pages (e.g. page1.html, etc.) takes place using the command $window.location.href = "#page1.html";, and the routing service is defined:
$routeProvider
:
:
.when('page1.html', {
templateUrl: '#/pages/page1.html',
controller: 'Page1Controller'
}
.when('page2.html', {
templateUrl: '#/pages/page2.html',
controller: 'Page2Controller'
}
:
:
Based on some posts related to how to define routing, I also tried:
.when('page1.html', {
templateUrl: 'pages/page1.html',
controller: 'Page1Controller'
}
and
.when('page1.html', {
templateUrl: '/pages/page1.html',
controller: 'Page1Controller'
}
getting errors in both cases (e.g. page not found).
Additionally, it is not clear to me what is the impact of including the statement $locationProvider.html5Mode(true); (when including this, I got an injection error).
How can I properly use this Angular routing service, and how can I set HTML5 mode?
Routing params: the way I've done it and it works for me and its simple is using the same route function I showed before:
Then if you look at 'searchresult/:searchCriteria' :search criteria is already a parameter that I am putting in a JavaScript variable called sys (i.e at the beginning of my JavaScript I declare variable var sys = null;).
Then on the SearchResult Controller I put the value of sys inside a $scope variable let's say $scope.sys = sys;. This gives you the variable both in the scope and in JavaScript if you want to check the values in developer tools console and/or play with them.
To call the pafe http://url/#searchresult/myvalue
Just like before call $location.path("/searchresult/myvalue")
like this you can create a path with many arguments (i.e "/searchresult/myvalue1/myvalue2/myvalue3") and they all will be stored in the variable sys
PS: if you want to change your whole url use window.location.replace('new url') without any $. The difference between this routing and the Angular is that this will refresh the page while angular will only refresh your ng-view
Regarding the page not found issue make sure that templateUrl: 'pages/page2.html' has the same path as in the actual folders
- capital letters
- the s in "pages" is also present in the pages folder
Also make sure that the permission are ok such that your application is not getting denied access to the file. I don't know what OS you are using but make sure your application can access it
Regarding the loop error, to help I would need to see a bit more code, but if you open the application in Chrome and see the error in the developer tools it may give you a hint as of where your application is crashing. The other approach is to start commenting part of the application until you don't get the error to find the problematic line then analyze.
This is an example of a controller I use without problems:
I have AngularJS setup to use HTML5 routes and it works great on urls like website.com/foo but when I create routes for sub pages, eg: website.com/foo/bar it only shows the correct page when clicking a link to it on my site. If I type the url into my browser and attempt to directly access it I get a blank page section where the ng-view content should be loading.
app.when('/promotion/events', {
templateUrl: '/assets/tpl/promotion/events/home.html',
controller: PromotionEventsCtrl
});
It appears to be a bug in Angular 1.1.5 that is effecting URL parsing in HTML5 routes. Rolling back to 1.1.4 fixes the problem.
More information here: https://github.com/angular/angular.js/issues/2833
How does angular know to make a request for the template view that contains 'ng-view' element?
If I navigate in my application say directly to
http://localhost/Categories/List/accessories
. A request is still made to '/ or the index template' as this contains the 'ng-view' element needed to render all the views.
When I navigate from the index to /Categories/List/accessories no request is made for the index again.
Below is my basic routing which has been copied in part from the Angular MVC "CookBook" example on GitHub
angular.module('myApp', ['myApp.ctrl.list'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/Home/Splash',
});
$routeProvider.when('/Categories/List/:slug', {
templateUrl: '/Categories/List',
controller: 'listCtrl',
});
$routeProvider.otherwise({
redirectTo: '/'
});
}]);
With your routing configuration, I believe your example url is missing a pound sign (#), so it should look like:
http://localhost/#/Categories/List/accessories
The part after the # sign is the path intended to be resolved by AngularJS (ie. the routing configuration you have defined)
When you enter the above URL into the address bar of the browser, the browser automatically looks for index.html on localhost. Most browsers, if not all, are set to look for index.html when only the domain name is present in the URL.
What about the part after the # sign? You might ask. The path after the # sign does not get sent to the server, by definition, and thus the browser could care less of what that part is consisted of.
In the second scenario you mentioned, AngularJS does not request for index.html because it's been cached the first time it was loaded and that cached copy is used.
Is your locationProvider configured for HTML5?
$locationProvider.html5Mode(true);
See Using HTML5 pushstate on angular.js