I want to active html5Mode in angularJS, but I don't know why it's not working. Is there anything wrong with my code?
angular
.module('myApp',[])
.config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
templateUrl: 'partials/home.html',
controller: HomeCtrl
});
$routeProvider.when('/tags/:tagId', {
templateUrl: 'partials/result.html',
controller: TagResultCtrl
});
//$routeProvider.otherwise({redirectTo: '/home', controller: HomeCtrl});
});
in html
<a href="tags/{{tag.id}}"><img data-ng-src="{{tag.imageUrl}}"></a>
This question is related to
angularjs
you could try:
<a href="#/controllerone">Controller One</a>||
<a href="#/controllerTwo">Controller Two</a>||
<a href="#/controllerThree">Controller Three</a>
<div>
<div ng-view=""></div>
</div>
Following is how one can configure $locationProvider using requireBase=false flag to avoid setting base href <head><base href="/"></head>:
var app = angular.module("hwapp", ['ngRoute']);
app.config(function($locationProvider){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
})
});
@Simple-Solution
I use a simple Python HTTP server. When in the directory of the Angular app in question (using a MBP with Mavericks 10.9 and Python 2.x) I simply run
python -m SimpleHTTPServer 8080
And that sets up the simple server on port 8080 letting you visit localhost:8080 on your browser to view the app in development.
Hope that helped!
AngularJS provides a simple and concise way to associate routes with controllers and templates using a $routeProvider object. While recently updating an application to the latest release (1.2 RC1 at the current time) I realized that $routeProvider isn’t available in the standard angular.js script any longer.
After reading through the change log I realized that routing is now a separate module (a great move I think) as well as animation and a few others. As a result, standard module definitions and config code like the following won’t work any longer if you’re moving to the 1.2 (or future) release:
var app = angular.module('customersApp', []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
controller: 'customersController',
templateUrl: '/app/views/customers.html'
});
});
How do you fix it?
Simply add angular-route.js in addition to angular.js to your page (grab a version of angular-route.js here – keep in mind it’s currently a release candidate version which will be updated) and change the module definition to look like the following:
var app = angular.module('customersApp', ['ngRoute']);
If you’re using animations you’ll need angular-animation.js and also need to reference the appropriate module:
var app = angular.module('customersApp', ['ngRoute', 'ngAnimate']);
Your Code can be as follows:
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/controllerone', {
controller: 'friendDetails',
templateUrl: 'controller3.html'
}, {
controller: 'friendsName',
templateUrl: 'controller3.html'
}
)
.when('/controllerTwo', {
controller: 'simpleControoller',
templateUrl: 'views.html'
})
.when('/controllerThree', {
controller: 'simpleControoller',
templateUrl: 'view2.html'
})
.otherwise({
redirectTo: '/'
});
});
Try this
If you are deploying your app into the root context (e.g. https://myapp.com/), set the base URL to /:
<head>
<base href="/">
...
</head>
Source: Stackoverflow.com