At the minute I'm currently using the $routeProvider to dynamically load sections of the page like so:
$routeProvider
.when('/', {
templateUrl: '/pages/home.html',
controller: 'mainController'
})
.when('/our-business', {
templateUrl: '/pages/our-business.html',
controller: 'businessController',
css: 'css/_business.css'
})
.when('/solutions', {
templateUrl: '/pages/solutions.html',
controller: 'solutionsController'
});
Currently, if I go directly to the index (localhost) and then select 'Our Business' from the navigation menu then Angular handles the location request and the page loads fine, with the URL changing to localhost/our-business. If I then reload, or open this URL directly I get a 404 error - presumably because Apache is trying to open our-business.html which doesn't exist. If I open localhost/#/our-business then the index is loaded and Angular then handles the request. The issue I've got is that this is designed to be a public facing website, so if a user were to copy and paste the URL or share it via email, they'll get a 404 error.
Is there any way to have Apache rewrite URLs to parse them via the index and AngularJS so that we can keep the non-hash style but still have functional URLs?
As said Kailash you can set the locationProvider to html5 mode
$locationProvider.html5Mode(true)
when you bootstrap your angular application.
Then you have to tell your Apache server to send the index.html (entry point of you single page app) for any requested url.
The angular router will then handle the proper route
Nope. Changing the url without the hash reloads the entire page.
The entire point of this $routeProvider is to build single-page app with multiple views.
Basically, having the # in the url is the only way to do that. Changes to a url's hash don't result in a page reload, and allow Angular to load the relevant views.
Related
I want to reload the page with different html page using angularjs $window, the documation says:
Page reload navigation
The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API, $window.location.href.
So I set the loaction to the page $window.location.href = '/transaction';
and the matching route on config block:
app.config(function($routeProvider) {
$routeProvider
.when('/transaction', {
templateUrl : 'JavaScript/directives/modelHTML/Transaction.html',
controller : 'endProcessModelController'
});
});
But instrad of Transaction.html page I get Error 404: SRVE0190E: File not found: /transaction with the route mydomain.com/UI/transaction.
BTW - templateUrl url's works fine in other place like UImodel so the problam is the navigation I think.
Set the location to the page $window.location.href = '#/transaction'; .
'#' indicating location the startpage which is normally index.html. so the link will be index.html#/transaction.Since its a single page app
i think in your config do
'/UI/transaction' instead of `/transaction`
and in the link do $window.location.href = '#/UI/transaction'
Is the mydomain.com/UI/transaction address correct (you use html5 mode)?
Does the problem occur when you try to enter directly into mydomain.com/UI/transaction?
If so, the problem is wrong server configuration (eg .htaccess file).
Try this
$location.path($window.location.origin +'/transaction');
And if you feel all the routes have something extra after the origin you can set a <base href="..."> for that and tell angular from where to take the rest amount of text for route purpose.
If you redirect the page with your_origin/transaction your browser will make a request to the server of /transaction, which the server will be not able to understand and 404 will come. But the route is client side (browser) routeing, so If you are routing to route /abc your javascript code is interpreting that, and invokes the corrosponding operations, (might be a different call to server for the html template or some data dependency, and then instantiating the controller and attach to view). So the moment you are trying to route your javascript code should be loaded.
Either you go for a ui-router where the route comes after # and this allow the browser to play after the text of (#) and not to reloading.
Or, make your server such a way, If a unidentified request comes you should return the base (index) page, so it will load all the scripts and that js will do the rest. (But obviously you will loose all the existing data in that state)
I'm new to angular. I create a blog for showing my profile.
In my website, I have several component and my app.module has a configuration for the routing, as shown:
app.config(function($locationProvider, $routeProvider){
$locationProvider.html5Mode({
enabled:true,
requireBase: false
})
$routeProvider.
when("/", {
template: "<research-overview></research-overview>"
}).
when("/research-interests", {
template: "<research-interests></research-interests>"
}).
otherwise({
redirectTo: "/"
})
});
Here is an example of my component:
angular.module('researchOverview', [])
.component('researchOverview', {
templateUrl: '/templates/research-overview.html',
});
I tried to locally run the server using python -m SimpleHttpServer
so that I can access my local website using browser to localhost:8000, When I click a link from my homepage, the page is correctly loaded. However, when I initially access my website using different urls (e.g. localhost:8000/testing) Angular route doesn't seem to work properly.
I get this error instead,
How do I set the router so that those urls can be redirected to my homepage?
Given you have enabled html5 mode I think you may need to set your server up so that regardless of the path it will return your index.html file.
For example, when your server receives a request for a resource at localhost:8000/testing it will return index.html.
From the AngularJS documentation:
Using this mode requires URL rewriting on server side, basically you
have to rewrite all your links to entry point of your application
(e.g. index.html). Requiring a tag is also important for this
case, as it allows Angular to differentiate between the part of the
url that is the application base and the path that should be handled
by the application.
Im using a the play framework to create a REST service and i want the front end written in Angularjs to make rest calls etc. I have set up a route provider like this:
angular.module("getAbscencePlans", ["getAbscencePlans.services"]).
config(function ($routeProvider) {
$routeProvider
.when('/plans/:companyId', {templateUrl: '/assets/views/plans.html', controller: StoryListController})
//.when('/plans/new', {templateUrl: '/assets/views/create.html', controller: StoryCreateController})
.when('/plans/plan/:planId', {templateUrl: '/assets/views/detail.html', controller: StoryDetailController});
});
my index page has the correct:
ng-app="getAbscencePlans"
in the html tag at the top. However when i go to http://mywebsite.com/plans/2 for example i get a Action not found error. In my routes file i have specified a static resource for the index page, but i presumed my routeProvider would do the rest. What am i doing wrong :(
Have you generated a a JavaScript router in Play? The Play router can generate JS code to handle routing from any JS client like Angular, Knockout etc and you can then select which routes to expose for JS clients.
To do this, follow the step-by-step instruction on Play's documentation here:
https://www.playframework.com/documentation/2.1.0/ScalaJavascriptRouting
I have a homepage link that loads /register html page. But when I change css on the /register page and want to see it I have to go back to my localhost and then click the link again so the page loads again with new css. This is painfully time-consuming, is there a way to link /register with the page/route? Or at least remove /register from URL (so that localhost is only url for the whole app) so when the user refreshes the homepage welcomes him?
Homepage link:
REGISTER
View gets loaded like this
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when("/register", {
templateUrl: "/register",
controller: "registerController"
})
.otherwise("/");
$locationProvider.html5Mode(true);
}]);
This is an angular mechanic and is explained more in a recent question that I answered AngularJS + UI-Router - Manually Type URLs in HTML5 Mode without HashBang
Easy work around: use localhost/#/register instead to get to the page.
Since you are using
$location.html5mode(true);
This issue is directly related to how the files are being served to the browser. Your angular app itself only has one access point and that is your index.html page. When you type into your browser localhost/register, it is looking for the register directory, not the actual angular route. Since you've enabled html5 mode, it removed the hash bangs, which looks nice, but that requires additional configuration to be able to access the views individually without them.
Additional: If you want to remove the route URLs altogether, you will need to use stateProvider instead of routeProvider
Related article regarding stateProvider: Angular ui-router: Can you change state without changing URL?
Set in you html
<head>
<base href="/yor base url">
</head>
What is the best practice of changing pages in rails by using angularjs such that there will be no refresh? (I will use fadein animation on the switched page).
In addition to that, If I want to keep database query logic within Angularjs, so is there a way to read Rails url argument (foo.com/:arg) for Angularjs?
If you're working with an existing Rails application which you want to convert to Angular, you'll likely not get to keep a lot of the templating/view code from Rails. Instead, start clean by keeping your server-side APIs and statically serve up your Angular application. If you're starting with a clean rails app, keep in mind that it will basically be Rails' job to provide a JSON/XML API and to statically serve up the Angular app.
To change views in Angular without reloading the page, you'll want to use $routeProvider in coordination with ng-view. Register each of the routes in your application with their corresponding view template:
angular.module('user-manager', [])
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html'
})
.when('/user/:id', {
templateUrl: 'views/user.html',
controller: 'UserCtrl'
})
.otherwise({
redirectTo: '/'
});
});
And then declare the ng-view somewhere in your main index.html:
<body ng-app="user-manager">
<!-- Main view -->
<div ng-view></div>
</body>
The ng-view will get replaced with the relevant template from your routes. For more details and a more complete example, see: http://docs.angularjs.org/api/ngRoute.$route