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
Related
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.
My spa is actually just a normal wordpress page using a custom template.
The page slug is /singlepageapp/ so my base: is <base href="/singlepageapp/">
Using the $routeProvider I can click around my views no problem, but if I try hit the url cold http://mysite/singlepageapp/singleview I get a 404 due to wordpress not routing these pages via the spa page.
Do I need a special htaccess rewrite rule or how can I get pretty urls in my spa page with out the 404's
My
$routeProvider.
when('/', {
templateUrl: '/wp-content/themes/mytheme/templates/map.html',
controller: 'VPListCtrl'
}).
when('/:slug', {
templateUrl: '/wp-content/themes/mytheme/templates/detail.html',
controller: 'VPDetailCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
I think I have a working solution with a wordpress rewrite rule
function custom_rewrite_to_spa() {
$singlepageapp_page_id = 11730;
add_rewrite_rule( '^singlepageapp\/(.*)\/?', "index.php?page_id={$singlepageapp_page_id}", 'top' );
}
add_action('init', 'custom_rewrite_to_spa');
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.
My goal is to use angular to route pages so that I don't have to reload the whole page (like on https://www.inboxapp.com/).
My (abridged) sinatra:
get '/' do
haml :index
end
get '/show' do
haml :show
end
get '/search/:id' do
# make http request and return data
end
and my angular:
app.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/', {
templateUrl: '/',
controller: 'MainController'
}).
when('/search/:showId', {
templateUrl: '/show',
controller: 'ShowController'
}).
otherwise({
redirectTo: '/'
});
}]);
Again, the goal is to have / direct the user to /show without reloading the whole page (just changing the content in the middle). It's probably simple, but I'm quite new with angular (and front-end, in general), so any help is super appreciated. Thanks!
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(#).