角路由在不同的浏览器中表现得奇怪/不同

Question

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 (eg 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:

1. I received many times the error infdig , meaning that there is an infinite reload loop somewhere,

2. 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 (eg 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 (eg 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?

Answer 1

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:

Answer 2

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 (ie 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 (ie "/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