I'm working on a web page that is using Angular, jQuery Mobile, and the jQuery Mobile Angular adapter by tigbro. I have everything up an running and it works great except for one issue and that is if at any point if you refresh the page using the browser's refresh button it will give a 404 error as if it doesn't understand the route anymore. I'm not sure where the issue might be since it gets a little confusing with the two frameworks and the adapter working together and I'm new to all of these technologies.
IE happens to be the only browser this doesn't happen in and the difference seems to be in the url. Here is what it looks like when you browse to a page in IE:
http://site.com/SalesManagement/SalesManagementIndex.aspx#!/ViewNotes/4
Here is what it looks like when you browse to the same page in another browser like Chrome:
http://site.com/SalesManagement/ViewNotes/4
If you go to the first url in Chrome it will load the page and then rewrite the url to the 2nd one.
Below is my routing configuration:
var SalesManagementApp = angular.module('SalesManagementApp', [])
SalesManagementApp.config(['$routeProvider', '$compileProvider', function ($routeProvider, $compileProvider) {
$routeProvider
.when('/Search', { templateUrl: 'Views/GrowerSearchView.aspx' })
.when('/SearchResults', { templateUrl: 'Views/GrowerResultsView.aspx' })
.when('/ViewNotes/:growerIndexKey', { templateUrl: 'Views/NotesHistoryView.aspx' })
.when('/EditNote/:growerIndexKey/:noteIndexKey', { templateUrl: 'Views/UpsertNoteView.aspx' })
.when('/AddNote/:growerIndexKey', { templateUrl: 'Views/UpsertNoteView.aspx' })
.when('/', { templateUrl: 'Views/GrowerSearchView.aspx' })
.otherwise({ templateUrl: 'Views/GrowerSearchView.aspx' });
} ]);
I've read some about html5 mode verse hashbang mode but setting html5 mode to off or on in the configuration just made my routing not work at all. Any help would be much appreciated.
I figured this out thanks to a similar question on the github site for the adapter: https://github.com/opitzconsulting/jquery-mobile-angular-adapter/issues/163
The fix for this is to disable html5Mode in angular and prefix your links with the # character. This makes your urls a little uglier as you are no longer using the html5 history API but in my case that doesn't matter. Optionally you can specify a hash prefix (by default it seems to be !) but I set mine to empty string. I couldn't find any documentation telling me why this is useful but its important to know what the prefix is so you can properly set your links.
Below is my updated routing configuration. Notice I now inject the $locationProvider.
var SalesManagementApp = angular.module('SalesManagementApp', [])
SalesManagementApp.config(['$routeProvider', '$compileProvider', '$locationProvider', function ($routeProvider, $compileProvider, $locationProvider) {
$locationProvider.html5Mode(false).hashPrefix("");
$routeProvider
.when('/Search', { templateUrl: 'Views/GrowerSearchView.aspx' })
.when('/SearchResults', { templateUrl: 'Views/GrowerResultsView.aspx' })
.when('/ViewNotes/:growerIndexKey', { templateUrl: 'Views/NotesHistoryView.aspx' })
.when('/EditNote/:growerIndexKey/:noteIndexKey', { templateUrl: 'Views/UpsertNoteView.aspx' })
.when('/AddNote/:growerIndexKey', { templateUrl: 'Views/UpsertNoteView.aspx' })
.when('/', { templateUrl: 'Views/GrowerSearchView.aspx' })
.otherwise({ templateUrl: 'Views/GrowerSearchView.aspx' }); // jQuery Mobile seems to ignore the / and just use .otherwise.
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
if (!localStorage.SessionInfo)
window.location = '/Login.aspx';
} ]);
My links now look like: #/ViewNotes/{{growerIndexKey}}
Related
For some reason, I can't seem to route to the add screen. What am I doing wrong? Here's my app.js
var moviesApp = angular.module('moviesApp', ['ngRoute']);
moviesApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/home.html',
controller: 'MoviesController'
})
.when('/add', {
templateUrl: 'partials/add.html',
controller: 'MoviesController'
})
.when('/edit', {
templateUrl: 'partials/edit.html',
controller: 'MoviesController'
});
});
Here's the anchor tag:
Add Movie
Which is contained within my home.html template which is a part of index.html.
The app doesn't crash...it just doesn't do anything.
Any thoughts on what I'm doing wrong?
It may be because of the change in the default hash-prefix in angularjs version 1.6. What you have written works in the given context: Proof
You can confirm this is the case by changing:
Add Movie
to:
Add Movie
If it works look at for possible solutions at:
AngularJS: ngRoute Not Working
If you want to make i behave as you expect (version 1.5) you could choose soultion 3 from the link:
3. Go back to old behaviour from 1.5 - set hash prefix manually
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
set up a route start event to help debug the problem
.run(function ($rootScope) {
$rootScope.$on('$routeChangeStart', function (event, next, current) {
console.log(event);
console.log(current);
console.log(next);
console.log('$routeChangeStart: ' + next.originalPath)
});
});
just add this to the end of your route config
Just as a side note I would use a state provider over a route provider. State providers let you define a hierarchy. It's a little harder to work with but much more flexible.
I try to combine angularjs with fullpage.js on the index.page. Also, there are still some pages just rendered normally by route.
Here is my route in app.js
app.config(['$routeProvider', '$httpProvider', '$locationProvider', function($routeProvider, $httpProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
// Below are all sections at index page
.when('/#index', {
controller: 'WelcomeCtrl',
templateUrl: 'views/welcome/index.html'
})
.when('/#products', {
})
.when('/#learn', {
})
.when('/#help', {
})
.when('/#contact', {
})
// Other pages not using fullpage.js
.when('/cases', {
controller: 'CasesCtrl',
templateUrl: 'views/welcome/cases/index.html'
})
.when('/users', {
controller: 'UsersCtrl',
templateUrl: 'views/users/login.html'
})
.otherwise({
redirectTo: '/'
});
});
However, when I scroll the sections at the index, each calls my first routes rule, then renders the index page though the section is been correctly scrolled to.
Besides, the route rules with hash tags seems not working when setting the html5Mode true, I got urls become http://xxx/%23products, how to resolve this problem?
Thanks.
OK, I solved it by some hack.
First, I set the flag 'lockAnchors' to be 'true' in fullpage.js.
Second, I set a controller to the navbar directive, which provides a $scope.scrollTo(anchor), then after click and call scrollTo(anchor), I use ngSilent to silently change the url.
Finally, I check which page where I click the navbar.
If not the index page with fullpage.js, I use $location.path("/") to back to the index, then silently add the anchor to the url, with using fullpage.js method to scroll to the anchor(after a timeout about 1200~1500).
This link does not work in all browsers in my angularjs onepage app.
homepage
Depending on the browser the url becomes different. In some browser the url ends with a trailing "/#" and others with "/#/" e.g. "http://localhost/#" and "http://localhost/#/". This means that in non IE browsers request ending with /# fails to load ViewA
This is my route provider:
mainApp.config(["$routeProvider",
function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "Views/ViewA.html"
})
.when("/home", {
templateUrl: "Views/ViewB.html"
})
.otherwise({
redirectTo: "/"
});
}]);
Is there a way to make the browsers behave the same? A library to reference?
My only references er:
angular.js
angular-route.js
I suggest you to take a look at the answer to a similar question here
It basically depends on the angular routing mode you want to use:
Hashbang Mode;
HTML5 Mode;
Hashbang in HTML5 Mode
I'd say your anchor should be:
homepage
Adding a locationProvider with html5mode set to true, seems to solve my issues
mainApp.config(["$locationProvider", "$routeProvider",
function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {
templateUrl: "Views/ViewA.html"
})
.when("/home", {
templateUrl: "Views/ViewB.html"
})
.otherwise({
redirectTo: "/"
});
}]);
I'm not clear why this isn't functioning. The rest of my code - sans the URL Param-based routing is working fine, I've tested that all. However, when I tried to include a URL argument in my url (base.url/route/:param) the '.otherwise' element of my routeProvider is firing instead of the appropriate controller designated in the routeProvider.
Here's the relevant bits of code:
module.config
app.config(function($routeProvider){
//http://docs.angularjs.org/tutorial/step_07
$routeProvider
.when('/home',
{
templateUrl: 'app/partials/home.html',
controller: 'HomeController'
})
.when('/implementation-reference/:ref-scope',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
.when('/projects',
{
templateUrl: 'app/partials/project_list_tpl.html',
controller: 'Projects'
})
.when ('/site-help',
{
templateUrl: 'app/partials/site-help.html'
})
.otherwise(
{
templateUrl: 'app/partials/404.html'
})
});
module.controller
app.controller('ImplReference', function($scope, $routeParams) {
alert('hi');
});
I get my 404 page when going to /implementation-reference/whatever.
Any ideas why I don't see the alert I put at the beginning of my controller, nor see any errors in the console?
As best as I can tell, the issue lay in use a dash in the param as defined in RouteProvider. I originally had:
.when('/implementation-reference/:ref-scope',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
when I changed it to this:
.when('/implementation-reference/:ref',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
...suddenly everything works fine.
I noticed this after adding a controller to the 'otherwise' that showed me the $route information. After drilling through it, I saw that the regex on the pre-defined route which had the param was only working on the part before the dash.
I've been mystified by this for hours, and can't imagine how this isn't documented more clearly somewhere. Perhaps this is some newbie mistake (I am new to this).
i got this problem with angular when I open the site in Chrome
_localhost/angular/_
the url changes to
_localhost/#_
however in firefox everything is as expected
I asume its caused by the routeProvider
var Angapp = angular.module('angApp', []).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'partials/main.html',
controller: mainCtrl
})
.when('/:catId', {
templateUrl: 'partials/category.html',
controller: categoryCtrl
})
.when('/detail/:detId', {
templateUrl: 'partials/detail.html',
controller: detailsCtrl
})
.otherwise({
redirectTo: '/'
});
}]);
I hope someone can help me with this and explain what is happening what did i miss.
thanks in advance.
EDIT:
when I add
.....
config(['$routeProvider','$locationProvider', function($routeProvider. $locationProvider){
.......
$locationProvider.html5Mode(true);
the routing breaks completely in Chrome and firefox
_localhost/angular/#%2Flink_
when i remove the "#%2F" and reload the page I get a 404 as return
when i hit backspace then the site loads correctly!
Please be sure that your browser supports HTML5. For browsers that don't support HTML5 history API AngularJS will automatically fall back to hasbang URLs so no way to "remove" the hash(#).