I am facing a number of troubles related to AngularJs routing. I have already tried to find answers online but I still am not very clear with the solutions provided.
First of all, here is my routing block:
var myApp = angular.module('myApp', ["ngRoute", "ngAnimate"]);
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {
templateUrl: "../view/home.html",
controller: "slideShowController",
})
.when("/business&consumer", {
templateUrl: "../view/govnservices.html",
controller: "productController",
})
.when("/about", {
templateUrl: "../view/about.html",
controller: "pagController",
})
.when("/project", {
templateUrl: "../view/projects.html",
controller: "projController",
})
.when("/service", {
templateUrl: "../view/services.html",
controller: "servController",
})
.otherwise({
redirectTo: '/',
})
});
And this is how I am passing the reference to my links:
Home
Another link:
name: "About Us",
templateUrl: "/about",
Now everywhere it is specified as:
Home
But on using '#' my links are not working (still don't know why.)
Again on not using '#' all my links are working but if I try to reload my page then it gives a 404 error:page not found.
Someone please help me out with this and please mention in comment if any part is not clear. Also please mention any good source to learn routing.
Your question is not entirely clear where you state: "Again on not using '#' all my links are working but if I try to reload my page then it gives a 404 error:page not found."
So are you using the # or not? Since we are talking html5mode I will assume not for now (Because you have to not use it in that mode)...
So I assume the symptom your seeing is that you
Navigate to "http://wheremyappishosted/" This loads your app and
everything is fine...
Now you click "About", This changes your
location to "http://wheremyappishosted/about" and again everything
works just fine.
Now you hit Refresh in your browser and suddenly
you get a 404
Sounds about right? If so... The problem is your server and not the AngularJS routing...
This is what happens from the servers perspective:
A request for "http://wheremyappishosted/" is received, the server responds
with the main page for the app. Everything is fine...
AngularJS handles the route change, the server does not receive any requests
for "http://wheremyappishosted/about" It DOES however receive a request for
the template "../view/about.html" which it can find and responds with.
Everything is fine...
A request for "http://wheremyappishosted/about" is received, but the server
does not know what to respond for that so it gives a 404...
The solution is that you need your to deliver your main page as a fallback route... You may wan't to have certain filters in place so that a unknown route under the parent route "api" may still fail with a 404 etc...
But the essence of it is that the server doesn't know what to respond with for "http://wheremyappishosted/about", so you need to configure it so it knows that.
Related
I am new on AngularJS. I am working on a project from a Udemy course.
When I add this code on my app.js:
weatherApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'pages/home.htm',
controller: 'homeController'
})
.when('/forecast', {
templateUrl: 'pages/forecast.htm',
controller: 'forecastController'
})
});
i get this error on the browser console:
Error: [$compile:tpload]
Even if I download the code from the course link i get the same error. Any ideas why happen this?
Your browser is hindering your home.htm from running scripts that makes ajax call to another origin when opened via file path. There are countless resources explaining the same-origin policy.
If you serve your home.htm file with e.g. http-server you can navigate to the default url and port: 0.0.0.0:8080/home.htm. Note that you might also have to add the --cors flag found in the docs.
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 am pulling my hair out trying to get this to work. It works just fine by itself but once the Angular code is loaded in Wordpress, Angular seems to always think I'm at http://example.com/ when I am at any other url (e.g. http://example.com/login). I have a feeling it has something to do with the .htaccess, but am not certain. Below is just a piece of the Angular code, everything loads perfectly fine, it's just the routing that is messed up.
var app = angular.module('app', ['ngRoute']).config(function($routeProvider){
$routeProvider.when('/login', {
templateUrl: wpurl + '/my/app/assets/login.htm',
controller: 'LoginController'
});
$routeProvider.when('/', {
templateUrl: wpurl + '/my/app/assets/home.htm',
controller: 'HomeController'
});
$routeProvider.otherwise({ redirectTo: '/login'});
});
If I visit /login the view for / will always be displayed. Also for whatever reason, the login view IS displayed only when visiting example.com/login/#/login, and am also redirected to that url when it's supposed to only redirect to /login. Any ideas??
Edit: Also should mention this is being loaded via plugin
I've been trying all day to get the AngularUI Router working with 1.2.0-rc.3, but to no avail. I'm pretty sure it's a bug, as a lot of things have been changed in rc3, but maybe someone has found a workaround for it.
This is what I'm trying to do:
In my app.config()
var login = {
url : '/login',
name : 'login',
templateUrl: 'views/login.html',
controller : 'LoginCtrl'
};
var main = {
url : '/',
name : 'main',
templateUrl: 'views/main.html',
controller : 'MainCtrl'
};
var reportsOverview = {
url : '/reports',
name : 'main.reports',
controller : 'ReportsCtrl',
templateUrl: 'views/main.reports.html'
};
$stateProvider.state(login);
$stateProvider.state(main);
$stateProvider.state(reportsOverview);
When I go to /login, my template gets displayed as expected. When I go to / or /reports however, I see nothing. I've got a <div ui-view></div> in both my index.html and views/main.html file, so that's not the issue.
Anyone out there experiencing the same issue, or what am I doing wrong?
It's hard without being able to see the custom templates, but some things I noticed that you are going to /reports. Urls are additive, so, in your case because the main url is / and your reports url is /reports the actual url you would have to go to is //reports not /reports. Try making your reports url reports and then /reports should work.
I would try to use ui-sref directive to create links on your web page so that you can see what urls the routing is generating for each state and check that it is what you expect.
It would be really helpful if you could include a plunkr that demonstrates the problem you are having.
I have been beating my head against the wall trying to figure out why angularJS routing won't work in phonegap for me. I have all the files setup correctly and i don't receive any errors. I'm trying to change the url using the $location.url service directly from angular. So when you tap on a div the controller will have $location.url("profile") for example and nothing will happen. I tried the solution found in this stackoverflow but that's not working for me. Am I doing something wrong, or is there a better way to be approaching this? Following is the routing I have setup
var app = angular.module("App", ["hmTouchevents"])
.config(function($routeProvider) {
$routeProvider
.when("/index.html", {
templateUrl: "/views/login.html",
controller: "loginCtlr"
})
.when("/landing", {
templateUrl: "/views/landing.html",
controller: "landingCtlr"
})
.when("/single-view/:id", {
templateUrl: "/views/single-view.html",
controller: "singleViewCtlr"
})
.when("/restaurant", {
templateUrl: "/views/restaurant-info.html",
controller: "restaurantCtlr"
})
.when("/profile/:id", {
templateUrl: "/views/profile.html",
controller: "profileCtlr"
})
.when("/lists/:list", {
templateUrl: "/views/lists.html",
controller: "listsCtlr"
})
.when("/follow/:type", {
templateUrl: "/views/follow.html",
controller: "followCtlr"
});
});
A sample controller would be:
app.controller("listsCtlr", ["$scope", "$location", function($scope, $location){
$scope.goTo("profile");
}]);
As always any help is much appreciated.
I had a problem similar to this tonight. The core issue here is that PhoneGap doesn't have a web server built in. If you're developing locally, you probably are using a web server, so you can do something like: http://localhost/#/profile and the routing will work.
However, PhoneGap loads your code with a file:// URL, not http://. If you do $location.url("profile") you're replacing the entire URL with just file://profile, which doesn't exist. Same thing if you use a link like this: My Profile
The solution is to somehow get your links to point to the right place. If you're using $location.url() you can prefix it with your file path: $location.url( window.location + "#/profile" )
If you're just making a link, you should be able to get away with taking off the leading slash to make it a relative URL: My Profile becomes My Profile
Had the exact same issue... I was able to fix this easily by adding the following code to the head of my index.html file.
<base href="/android_asset/www/" />
Hope this helps.
in your controller try...
$location.path('/profile');
After much tinkering, here's what worked for me!
If you can use $location.path() within the controller, it should work as expected, but if you need to use href-style links, you can build the links off the angular "base" page (e.g. main.html):
Link To Profile