I managed to remove the hash # from my urls by setting locationProvider.html5Mode to true, but another issue arose. Nothing displays, and on my console it gives me a 404 error.
I am well aware that this question has been asked several times, but I have tried all those solutions without success. Kindly assist.
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'home.html',
//controller:'homecontroller'
})
.when('/home', {
templateUrl: 'home.html',
//controller:'homecontroller'
})
.when('/best-prices-buy-phones-in-kenya', {
templateUrl: 'pages/buy-phones.html',
//controller:'aboutcontroller'
})
.when('/best-prices-buy-phones-in-kenya2', {
templateUrl: 'pages/buy-phones-htc.html',
//controller:'servicecontroller'
})
.when('/contact_us', {
templateUrl: 'contact-page.html',
//controller:'contactcontroller'
});
}]);
In Index.html, you no longer need '#' as ' $locationProvider.html5Mode(true);' takes care of this. so the href on your links should simply be just a '/' plus the page you require, e.g.
<a href='/home'>
or
<a href='/best-prices-buy-phones-in-kenya'>
Related
Project works fine locally.
However after deploying it to an AWS Ubuntu instance, the routing does not seem to be working.
The home page of, www.lewisengelart.com/#/ loads with a bang as, www.lewisengelart.com/#!/
and if you try a link, the browser attempts to load
www.lewisengelart.com/#!/#%2Fabout rather than
www.lewisengelart.com/#/about.
Once again, this project works fine locally, I cannot figure out what is tripping it up on the ubuntu instance.
Has anyone encountered this problem before?
Here is app.js, the route config
var app = angular.module("App", ['ngRoute', 'ngAnimate']);
app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider){
$httpProvider.interceptors.push(
function($q, $location) {
return {
'responseError':function(rejection){
if (rejection.status == 401){
$location.url('/letmein');
}
return $q.reject(rejection);
}
};
});
$routeProvider
.when('/',{
templateUrl: 'partials/dashboard.html'
})
.when('/text',{
templateUrl: 'partials/text.html',
controller: 'textCtrl'
})
.when('/magnet',{
templateUrl: 'partials/magnet.html',
// controller: 'magnetCtrl'
})
.when('/gauge',{
templateUrl: 'partials/gauge.html',
// controller: 'gaugeCtrl'
})
.when('/animation',{
templateUrl: 'partials/animation.html',
controller: 'animationCtrl as ACtrl'
})
.when('/about',{
templateUrl: 'partials/about.html',
})
.when('/contact',{
templateUrl: 'partials/Contact.html',
})
.when('/letmein',{
templateUrl: 'partials/loginReg.html',
controller: 'adminCtrl'
})
.when('/add',{
templateUrl: 'partials/add.html',
controller: 'workCtrl'
})
.otherwise({
redirectTo: '/'
});
}])
And the home page partial with links
<div class="indexHeader col-md-3">
<h1>Lewis Engel</h1>
<div class="worksBox">
<a ng-href="/#/about"><span class="colorFive">About</span></a>
<span class="colorSix">Contact</span>
<span class="colorOne">Emergent Possibilities</span>
<span class="colorTwo">Emergence over Time</span>
<span class="colorThree">Magnetic Attractions</span>
<span class="colorFour">Meaningless Measures</span>
</div>
Per angular documentation.
docs.angularjs.org/guide/migration#commit-aa077e8.
Have to add
$locationProvider
and
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
to override a new protocol in the updated version of Angular.
For some reason my ngRoute dosent work properly? I dont know but it dosent show any error on the console either. Here is my Cloud9 File. And here is my script.js:
var app = angular.module('ChattApp', ["firebase", "ngRoute"])
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'HtmlFiles/login.html',
controller: 'LoginController'
})
.when('/Register', {
templateUrl: 'HtmlFiles/registration.html',
controller: 'RegistrationController'
})
.otherwise({
redirectTo: '/'
});
});
app.factory("Auth", ["$firebaseAuth",
function($firebaseAuth) {
var ref = new Firebase("https://uniquecoders.firebaseio.com/");
return $firebaseAuth(ref);
}
]);
It looks like you're not injecting the $routeProvider into the config function.
Take a look at the tutorial for the $routeProvider here or take not of the screenshot below.
Yo everyone.
I searched how to remove the hash(#) from the routing (source: AngularJS routing without the hash '#') but I encountered a problem.
I'll explain.
$locationProvider.html5Mode(true);
$routeProvider
.when('/test', {
controller: TestCtrl,
templateUrl: 'test.html'
})
.when ('/test/:idPage', {
controller: PageCtrl,
templateUrl: 'page.html'
})
.otherwise({ redirectTo: '/test' });
For the first redirection
- I've got something like : www.my-website.com/test
all is working fine.
For the second :
- www.my-website.com/test/hello
and here, there is a prob, when I put more than one " / " in the route, no page is loaded and I've got two
Failed to load resource: the server responded with a status of 404
(Not Found)
in my console.
One called : www.my-website.com/test/page.html and the other : www.my-website.com/test/hello
Hope someone can help me. Thanks in advance.
Angular 1.4.x requires that 'ngRoute' be included in the module to use $routeProvider and $locationProvider so include it as a <script...>:
angular-router (see here).
I am assuming you see something like:
To include it in your module:
var app = angular.module('someModule', ['ngRoute']);
And the controller needs to be in quotes controller: 'someCtrl' like:
$locationProvider.html5Mode(true);
$routeProvider
.when('/test', {
controller: 'TestCtrl',
templateUrl: 'test.html'
})
.when ('/test/:idPage', {
controller: 'PageCtrl',
templateUrl: 'page.html'
})
.otherwise({ redirectTo: '/test' });
Here is an example that I put together: http://plnkr.co/edit/wyFNoh?p=preview
var app = angular.module('plunker', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/hello/:idHere', {
templateUrl: 'resolveView.html',
controller: 'helloCtrl',
resolve: {
exclamVal: function(){
return '!!!!!!!!!!'
}
}
})
.when('/default', {
templateUrl: 'default.html',
controller: 'defaultCtrl'
})
.when('/test', {
controller: 'testCtrl',
templateUrl: 'test.html'
})
.otherwise({ redirectTo: '/default' });
$locationProvider.html5Mode(true);
}]);
app.controller('MainCtrl', function($scope, $location, $routeParams) {
});
app.controller('testCtrl', function($scope, $routeParams) {
console.log('hi')
});
app.controller('defaultCtrl', function($scope, $routeParams) {
console.log('Inside defaultCtrl')
});
app.controller('helloCtrl', function($scope, exclamVal, $routeParams) {
$scope.exclamVal = exclamVal;
$scope.myVar = $routeParams.idHere;
});
I am trying to use html5Mode for urls in AngularJS.
This code runs fine:
.config(["$routeProvider", "$locationProvider",
function($routeProvider, $locationProvider){
$routeProvider.when("/editor", {
templateUrl: "pages/editor/index.html"
})
.when("/docs", {
templateUrl: "pages/docs/index.html"
}).otherwise({
templateUrl: "pages/home/index.html"
});
}
]);
But this code gives me the error url is undefined
.config(["$routeProvider", "$locationProvider",
function($routeProvider, $locationProvider){
$routeProvider.when("/editor", {
templateUrl: "pages/editor/index.html"
})
.when("/docs", {
templateUrl: "pages/docs/index.html"
}).otherwise({
templateUrl: "pages/home/index.html"
});
$locationProvider.html5Mode(true);
}
]);
Could the issue be that I have instead of
What could be the source of this?
I just had the same problem and I just figured out how to solve this. Well my errors were:
I hadn't injected "$locationProvider" I was trying to call the "html5Mode" without referencing the "$locationProvider" at the begining of the function, now I have this:
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when("/", {
templateUrl: "Views/home/home.html",
controller: "HomeController"
})
.otherwise({ redirectTo: '/'});
$locationProvider.html5Mode(true);}]);
I had the wrong, I had: " href="/" "
but I'm running all the app with a local server with Wampp so the base path for my project is "/NAME_OF_THE_PROJECT/" like this:
<base href="/SEQUOIA/">
With this two corrections I solved all the errors, as I see, you have your base without the last '/', maybe your app is searching "www.localhost.com/staticCONTENT" instead of ".../static/CONTENT".
Ah! I almost forget, I have my .htaccess just the same as shown here and here
I have the following code in my app.js:
var myApp = angular.module('myApp', ['ngRoute'])
myApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/products', {
templateUrl: '/angularjs/public/angular/views/product.html'
}).
otherwise({
templateUrl: '/angularjs/public/angular/views/home.html'
});
$locationProvider.html5Mode(true);
}]);
When I go to home at http://localhost/angularjs/public, the .otherwise kicks in correctly.
If I go to http://localhost/angularjs/public/products, nothing happens, or more precisely, I believe .otherwise is invoked again, since is displayed the home.html view. Also no error is throwed in batarang's console.
What could be the problem?
you need to add "public" to product slug in your route
when('public/products', {
templateUrl: '/angularjs/public/angular/views/product.html'
}).