I am having a problem with AngularJS (more like the routing) and any version of IE. It comes to the point where Chrome, Firefox and Safari work fine, without a pinch of problems. But when I start to work with IE ... everything goes wrong.
Normally when I navigate to the URL of localhost, it start with "localhost:52201" and changes to "localhost:55201/#/ExpenseOverview" which is indeed the first 'page/view' that is loaded, according to my AngularApp (code below)
var angularApp = angular.module('AngularApp', ['ngRoute']);
angularApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/ExpenseOverview', {
controller: 'ExpenseOverviewController',
templateUrl: 'Angular/Views/ExpenseOverview.aspx'
})
.when('/AddExpense/', {
controller: 'AddExpenseController',
templateUrl: 'Angular/Views/AddExpense.aspx'
})
.when("/AddExpense/:update", {
controller: 'UpdateExpenseController',
templateUrl: 'Angular/Views/AddExpense.aspx'
})
.when('/ApproveExpense', {
controller: 'ExpenseOverviewController',
templateUrl: 'Angular/Views/ExpenseOverview.aspx'
})
.when('/TypeGrid', {
controller: 'TypeGridController',
templateUrl: 'Angular/Views/TypeGrid.aspx'
})
.when('/TypeGrid/:updated', {
controller: 'TypeGridController',
templateUrl: 'Angular/Views/TypeGrid.aspx'
})
.when('/AddType', {
controller: 'AddTypeController',
templateUrl: 'Angular/Views/AddType.aspx'
})
.when('/AddType/:update', {
controller: 'UpdateTypeController',
templateUrl: 'Angular/Views/AddType.aspx'
})
.when('/ProjectGrid', {
controller: 'ProjectGridController',
templateUrl: 'Angular/Views/ProjectGrid.aspx'
})
.when('/ProjectGrid/:updated', {
controller: 'ProjectGridController',
templateUrl: 'Angular/Views/ProjectGrid.aspx'
})
.when('/AddProject', {
controller: 'AddProjectController',
templateUrl: 'Angular/Views/AddProject.aspx'
})
.when('/AddProject/:update', {
controller: 'UpdateProjectController',
templateUrl: 'Angular/Views/AddProject.aspx'
})
.when('/Organogram', {
controller: 'OrganogramController',
templateUrl: 'Angular/Views/Organogram.aspx'
})
.otherwise({ redirectTo: '/ExpenseOverview' });
}]);
Just to point this out, I know I am working with .aspx-files instead of static .html-files, but this doesn't matter right now, because it's of no concern to this problem.
As I stated before, this problem only occurs when using IE. It doesn't matter what version I am using, from IE8 to IE11, none of those are doing the routing and showing views.
I have tried multiple solutions, such as adding certain -tags to the head, adding an id="ng-app" to my -tag and so on, from which none of them resulted in a view.
Something is unexplainable to me is that when I debug my project with Visual Studio and Internet Explorer, everything works fine, like there was never any problem at all. After I published my website and put it online .. well, it's quite clear what that result is (otherwise I wouldn't be posting this).
I seriously need help with this issue. I need to be able to deploy my website to both PC, iOS, Android and Windows Surface. Every platform-browser but IE works and I cannot find a plausible solution for this.
So I thought someone out there knew the cause, might know a solution or maybe a workaround/fix for me?
Thanks in advance!
Related
I'm building my portfolio as a front-end dev and it's still under developmentt. To test it out I used FTP to upload the files to my justhost domain which is a success. Now, say my site is www.johndoe.com (okay fine, my actual site is 'hassanefall.com' to make this easier to understand :)).
(I'm using angularjs for the routes) I want to go to a specific route/page: www.hassanefall.com/about. The about page works when i navigate through clicking the links.
But, when I type in the url the exact url path, there's a 404 error page.
I have '/work', '/contact', etc. and whenever I type in the url 'www.hassanefall.com/contact' directly without navigating to it, a 404 page occurs. It's as if the file for each page/route doesn't exist.Help?
Here's the code.
Note: I removed the hash from the url using base '/' and $relocationProvider. If there's an answer to this it's greatly appreciated.
var app = angular.module('mySite', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.when('/projects', {
controller: 'HomeController',
templateUrl: 'views/projects.html'
})
.when('/service', {
controller: 'HomeController',
templateUrl: 'views/service.html'
})
.when('/about', {
controller: 'HomeController',
templateUrl: 'views/about.html'
})
.when('/contact', {
controller: 'ContactController',
templateUrl: 'views/contact.html'
})
.when('/portfolio/:id', {
controller: 'ItemController',
templateUrl: 'views/item.html'
})
.otherwise({redirectTo: '/'});
$locationProvider.html5Mode(true);
});
If you need more code sample please let me know. :)
Your server should support HTML5 mode. What is happening here is that the server is looking for your client side route ('contact', for example), and does not find it. That's why you have 404 not found error.
Another solution is to go back to hash mode..
I am developing an application that is supposed to be a single-page application.
The tools I am using are AngularJS, NodeJS, ExpressJS and Jade for templating.
So far I've been working with a page that has a ng-view directive on it, and I can change its content to display the page I want, while maintaining the side menu.
Now I've come to a point where I need to create a login/create account page (that I am calling 'intro', for now), and this one should use all the screen space, removing the menu as well.
How can I achieve this? My route file looks as follows:
var akaAcademicManagerApp = angular.module('akaAcademicManagerApp', ['ngRoute', 'akaAcademicControllers']);
akaAcademicManagerApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/dashboard', {
templateUrl: 'partials/dashboard',
controller: 'DashboardController'
}).
when('/profile', {
templateUrl: 'partials/profile',
controller: 'ProfileController'
}).
when('/intro', {
templateUrl: 'partials/introPage',
controller: 'IntroController'
}).
otherwise({
redirectTo: '/dashboard'
});
}]);
angular.module('akaAcademicControllers', []);
I think this can help you (yet, i don't think it's the optimal solution but it works)
in your index.html,after your body tag put this:
<div ng-include="accessToApplication()"></div>
Now in your controller:
$scope.loggedIn = false;// true when the user is logged in
$scope.accessToApplication = function () {
if (!$scope.loggedIn) {
return "partials/introPage.html";
}
else {
return "path to the page containing the ng-view";
}
};
I advice you to take a look at ui-router and multiple named views (https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views)
I'm trying to debug the above code which I feel like this is very useful >.<
I can't even find what is wrong in my code and don't really know where to start since Angularjs still very new to me.
I'm trying to localize Angularjs app. I know this is missing a lot of context in order to get a help, but I'm trying to see what information that I should give that would help on this debugging.
I've gone through any indexOf in angularjs file and I can see few things is undefined but don't know if that would be helpful.
So I've traced the problem here and this is what I have figured is the problem, but still counldn't figure out why...
config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider.when('/:locale?/:username/badges', {
templateUrl: '_partials/badges.html',
controller: 'badges'
})
.when('/:username/badges', {
templateUrl: '_partials/badges.html',
controller: 'badges'
})
.when('/:username/teaching-resources', {
templateUrl: '_partials/teaching-resources.html',
controller: 'teachingResources'
})
.when('/:username/makes', {
templateUrl: '_partials/makes.html',
controller: 'makes'
})
.when('/:username/likes', {
templateUrl: '_partials/likes.html',
controller: 'likes'
})
.when('/:username/events', {
templateUrl: '_partials/events.html',
controller: 'events'
})
.when('/:username', {
templateUrl: '_partials/badges.html',
controller: 'badges'
});
$routeProvider.otherwise({
redirectTo: '/error/404'
});
The URL that I'm visiting for default page is:
This will fail and throw the error.
http://localhost:1969/en-US/user/someUserName
This will work fine
http://localhost:1969/user/someUserName
UPDATE
I figured out! This is the problem:
$locationProvider.html5Mode(true);
But why!?
I had the same error. In order to use html5Mode you need to make sure to set the <base href="" /> tag to the correct URL in your header. Check out the $location service docs for details.
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'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}}