I have a gulp connect server running and want to remove hashbangs from the routeProvider I am using in my AngularJS project.
I have this in my app.js:
//Setting HTML5 Location Mode
companiesApp.config(['$locationProvider',
function ($locationProvider) {
$locationProvider.hashPrefix('!');
$locationProvider.html5Mode(true);
}
]);
I know that if I remove the hashPrefix it will work still with http://www.example.com/#example-uri but how do I get rid of that entirely. isn't html5Mode(true) supposed to do that?
Yes, $locationProvider.html5Mode(true); should do that.
But to be able to access pages directly from the browser, you should configure your server to redirect the request to the index page, then call the partial internally. Check this document on angular-ui documentation for how to configure the document to do so.
Try this if may be useful in your scenario
Add only has prefix like $locationProvider.hashPrefix('') to remove Bang prefix...
var app = angular.module('app', []);
app.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider)
{
$routeProvider.when('/', {
templateUrl: "app1.html",
controller: "App1Ctrl"
})
.when('/Program1', {
templateUrl: "app2.html",
controller: "App2Ctrl"
});
$locationProvider.hashPrefix("");
}
]);
first add $routeProvider in dependency and then add in last of hashPrefix is null
to remove tha bang prefix.
Related
I have found on stackoverflow a good example of how to create Tabs using AngularJS and Bootstrap, but I have a problem. The original code is using an old library of Angular (1.0.4) and if I switch to the current one (1.4.7) the script does not work anymore.
Here is the original code on Plunker
Here is the original Post
Here is what I've tried so far to change:
var app = angular.module('plunker', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/jobs', {
templateUrl: 'jobs-partial.html',
controller: JobsCtrl
})
.when('/invoices', {
templateUrl: 'invoices-partial.html',
controller: InvoicesCtrl
})
.when('/payments', {
templateUrl: 'payments-partial.html',
controller: PaymentsCtrl
})
.otherwise({
redirectTo: '/jobs'
});
});
Where is the problem?
As of AngularJS 1.2 and later:
ngRoute is now its own module
As of AngularJS 1.3 and later:
...$controller will no longer look for controllers on window. The old behavior of looking on window for controllers was originally intended for use in examples, demos, and toy apps. We found that allowing global controller functions encouraged poor practices, so we resolved to disable this behavior by default.
Therefore [1] adding ngRoute as a dependency to your module and [2] including the angular-route.js source file and [3] explicitly registering the controllers fixed it for me:
http://plnkr.co/edit/KJyFqf2vf74IidY26vxu?p=preview
[1]
var app = angular.module('plunker', ['ngRoute']);
[2]
<script src="http://code.angularjs.org/1.4.7/angular-route.js"></script>
[3]
app.controller('TabsCtrl', TabsCtrl);
app.controller('JobsCtrl', JobsCtrl);
app.controller('InvoicesCtrl', InvoicesCtrl);
app.controller('PaymentsCtrl', PaymentsCtrl);
Older versions of angular allowed for the use of global functions as controllers.
Support for that was dropped in version 1.3 and you need to register controllers as a module component.
Also ngRoute is a separate include now and must be injected as a module dependency
Here's an updated demo using angular 1.4.
Note that controllers are registered using:
angular.module('plunker')
.controller('TabsCtrl',TabsCtrl)
.controller('InvoicesCtrl',InvoicesCtrl)
.controller('PaymentsCtrl',PaymentsCtrl)
And in routing the controller is now string. Also ngRoute is included as module dependency
var app = angular.module('plunker', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/jobs', {templateUrl: 'jobs-partial.html', controller: 'JobsCtrl' }).
DEMO
I try set up client side route with Angular and Express 4.
I worked with guide ngView and without Express that's good, but when Express routing is enable ngRoute don't work. How can I setup Express that it work with ngRoute?
A little bit of code:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/category/:catgegoryName', {
templateUrl: 'category',
controller: 'categoryController',
controllerAs: 'category'
})
.when('/category/:catgegoryName/device/:deviceName', {
templateUrl: 'device',
controller: 'deviceController',
controllerAs: 'device'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}
]);
Since you configured HTML5 mode you don't need to replicated the same route structure on the Express side. Instead you need to make sure server always responds with landing page (usually index.html) where Angular app is configured and bootstraped.
So it will be that for say route /category/something server still responds with index.html. Then Angular will parse URL and understand that it need to inject template and controller corresponding to .when('/category/:catgegoryName', {...}) route.
I'm trying start developing angular apps with yeoman. It may sounds stupid, but I have a problem with creating routes using yo:angular route.
When I create new route using:
yo:angular route foo
yeoman creates:
app/scripts/controllers/foo.js (controller)
app/views/foo.html (view)
app/test/spec/controllers/foo.js (testing the controller)
in app.js it creates:
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/foo', {
templateUrl: 'views/foo.html',
controller: 'FooCtrl'
})
.otherwise({
redirectTo: '/'
});
});
so everything should work fine. Unfortunately the route doesn't work - when I try open
http://localhost:9000/foo
I get following error:
Cannot GET /foo
The idea of routes in yeoman looks pretty easy and I'm not sure where the problem is.
Did you enable HTML5 mode in your Angular application? If not, the URL would be:
http://localhost:9000/#/foo
And if you have enabled HTML5 mode in your Angular application, you have to make sure whatever server you're using has been configured to handle all routes as they were the root of the application.
I know you guys are going to say "It's duplicated" but it doesn't work for me.
I'm doing exactly the same thing and here's what happens.
This is my config code:
portfolioApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
controller: 'portfolioController',
templateUrl: 'partials/home.htm'
})
.otherwise({redirectTo: '/home'});
if(window.history && window.history.pushState){
$locationProvider.html5Mode(true);
}
});
The URL without the locationProvider and setting path to "/" instead of "/home" would be:
http://localhost:8080/portfolio/#/
Okey, i would like to remove the hashtag and the "portfolio" path so that way it would be:
http://localhost:8080/home
With the config i've posted, it does it (the first time i refresh). But what happens? happens that if I refresh the page again with the new path... i get a 404 Tomcat Error.
In the first refresh when i write localhost:8080/portfolio and the path gets converted into "/home", I get in the console an error saying that the "partials/home.htm" can't be found 404.
So either way, it can't read my partial, and then when I refresh everything is broken.
How can I solve this? what am I doing wrong?
Make sure your including these to scripts in the header of your HTML document Where you are implementing your module. The two provided below are for implementing the most current version of angular as well as the most current version of the angular route script:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-route.js"></script>
Make sure your injecting ngRoute into your module, here's an example of mine:
angular.module('controller', ['ngRoute','ngResource', 'ngCookies', 'ngSanitize'])
Here is an example of my config block, make sure you inject both routeProvider and locationProvider:
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: '../partials/member.php',
controller: 'Member',
access: 'member'
})
.when('/leaderboard', {
templateUrl: '../partials/leaderboard.html',
controller: 'Leaderboard',
access: 'member'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}])
If your doing all of this and it still doesn't work post a plunker of your code. Thanks.
Suppose, I have follwing code with AngularJs:
angular.module('somename', []).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/test/:userid', { controller: TestDataCtrl }).
when('/users/:userid', {controller: UserDataCtrl}).
otherwise({redirectTo: '/index.html'});
$location.path('/newValue')
});
But this fragment throws ReferenceError: $location is not defined from archivarius. Ok, no problem. I added third parameter $location to the function and got error -- Unknown provider: $location from archivarius.
So, how can I get instance of $location service?
In other words, I have some ugly url like:
http://localhost:7000/myservice/1?html=true#/index
and my routes above doesn't work, because it is supposed
that service url looks like
http://localhost:7000/myservice/#/index
or
http://localhost:7000/myservice/index
But because of my internal redirect logic of REST service I came up with
a little bit confusing url for AngularJs and I need to change it without page reload.
Thanks in advance.
Add the `$location' object to you config unanimous function:
config(function ($routeProvider, $locationProvider, $location)
Hope it helps