I'm trying to get rid of the hashtag that appears in my ui-router URLs. (http://localhost:3000/email doesn't work but http://localhost:3000/#email works. After scouring SO, I haven't found a case that works for me. I'm running locally for now, so I assume I don't need any "Server configuration" and I included "" in my index.html.
(function(angular) {
'use strict';
angular.module('myApp', ['ui.router'])
.controller('MainController', function($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
})
.config([
['$stateProvider', '$locationProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider, $locationProvider, $provide) {
$urlRouterProvider.otherwise('/email');
// PAGES
$stateProvider
.state('email', {
url: '/email',
templateUrl: '../pages/email.html',
controller: 'EmailController'
})
.state('about', {
url: '/about',
templateUrl: '../pages/about.html',
controller: 'AboutController'
})
// ... the rest...
$locationProvider
.html5Mode(true); // enable html5Mode for pushstate ('#'-less URLs DOESN'T WORK)
.hashPrefix('!');
$provide.decorator('$sniffer', function($delegate) {
$delegate.history = false;
return $delegate;
});
}]);
You can either do this in your run block:
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
And your url's will be changed from domain.com/#foo to domain.com/foo (this requires no explicit base).
...or do this in your run block:
$locationProvider.html5Mode(true);
...and then add this to your html <head>:
<base href="/">
This solution provides the same outcome as the first, except that now there is a specified base.
Perhaps try this code? I think it may be down to one of these reasons.
Config dependencies weren't set correctly (out of order)
That .hasPrefix(!) was put in after a semi-colon.
Also need to assign a base location in your <head> tag using <base href='/'> (or maybe '/email' ?)
angular.module('myApp', ['ui.router'])
.controller('MainController', function ($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
})
.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $provide) {
$urlRouterProvider.otherwise('/email');
// PAGES
$stateProvider
.state('email', {
url: '/email',
templateUrl: '../pages/email.html',
controller: 'EmailController'
})
.state('about', {
url: '/about',
templateUrl: '../pages/about.html',
controller: 'AboutController'
});
$locationProvider.html5Mode(true).hashPrefix('!');
$provide.decorator('$sniffer', function ($delegate) {
$delegate.history = false;
return $delegate;
});
});
Apologies, I can't get the code sample to behave.
Did you set base in HTML-file same as follow:
<html>
<head>
<base href="/">
</head>
</html>
and you should remove .hashPrefix('!'); at config, so this code will same here:
$stateProvider
.state('email', {
url: '/email',
templateUrl: '../pages/email.html',
controller: 'EmailController'
})
.state('about', {
url: '/about',
templateUrl: '../pages/about.html',
controller: 'AboutController'
})
// ... the rest...
$locationProvider
.html5Mode(true); // enable html5Mode for pushstate ('#'-less URLs DOESN'T WORK)
$provide.decorator('$sniffer', function($delegate) {
$delegate.history = false;
return $delegate;
});
Your app config will look like this
app.config(function ($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {
templateUrl: 'url',
controller : 'mainController'
})
});
Use tag in your page head
<base href="abc.com/"/>
This may create problem with following href, will not load the page properly
About Us
To overcome this use target="_self" in anchor tag as follow
About Us
Related
I have a angular application in wamp in a subfolder.
When i go to http://myapp.dev/angular/myapp i'm getting the 404 view instead of the home view.
What did i miss here?
thanks,
runConfig.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider', '$provide'];
function runConfig($stateProvider, $urlRouterProvider, $locationProvider, $provide) {
$stateProvider
.state('home', {
url: '/',
controller: 'HomeController',
controllerAs: 'vm',
templateUrl: 'components/home/homeView.html'
})
.state('404', {
templateUrl: 'tpl/404.html'
});
$urlRouterProvider.otherwise(function ($injector, $location) {
var $state = $injector.get('$state');
$state.go('404');
return $location.path();
});
$locationProvider.html5Mode(true);
I have a problem with the function $ locationProvider.html5Mode (true), this is the setting:
var app = angular.module("app", [
"ngRoute",
"ngAnimate"
]);
// ROUTE CONFIG
app.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){
$routeProvider.
when("/archive", {
templateUrl: "archive.php",
controller: "archiveCtrl",
animate: "slide-left"
}).
when("/single", {
templateUrl: "single.php",
controller: "singleCtrl",
animate: "slide-left"
}).
otherwise({
redirectTo: "/archive"
});
$locationProvider.html5Mode(true);
});
In the head tag:
<head>
<base href="/">
</head>
The root of the site is
site.com/main.php
Where main.php contains the div ng-view
Any idea why it does not work?
here is a working example I created on JSFiddle, I removed the templateUrl and use template instead, but it shouldn't matter in this case(you are asking how does html5mode and base work)
html
<div ng-controller="mainCtrl">
single
archive
<div ng-view></div>
</div>
Javascript
var app = angular.module("myApp", [
"ngRoute"
])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when("/archive", {
template: "<p>archive</p>"
})
.when("/single", {
template: "<p>single</p>"
})
.otherwise({
redirectTo: "/archive"
});
$locationProvider.html5Mode(true);
}])
.controller("mainCtrl", function mainCtrl($scope, $location) {
$scope.$location = $location;
});
JSFiddle
I created a login page for authentication. Based on the result of authentication, it redirects to different pages.
//controller.js
app.controller("LoginCtrl", ['$scope', '$location', 'loginFactory', function($scope, $location, loginFactory){
$scope.authenticate = function() {
loginFactory.login($scope.username, $scope.password)
.then(function(response) {
$location.path('/home');
}, function errorCallBack(response) {
console.log("Failed auth");
$location.path('/login');
});
}
}]);
The app is defined in the following config.js together with routing.
//config.js
var app = angular.module('ristoreApp', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
.when('/', {
redirectTo: '/home'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.when('/home', {
templateUrl: 'views/home.html',
})
.otherwise({
redirectTo: '/login'
});
});
The structure of files:
root/
js/ -- config.js
-- authentication/ -- controller.js
views/ -- home.html
-- login.html
When I submit the login form, instead of redirecting to "http://127.0.0.1:8081/views/login", it redirects to "http://127.0.0.1:8081/views/login#/login". Plus "http://127.0.0.1:8081/login" returns 404.
I start node.js under root. From the "network" tab in Chrome, it shows "config.js" is loaded. Why doesn't the routing work?
If you do not want to use the # in angular routing, you need to enable Html5 mode.
var app = angular.module('ristoreApp', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
.when('/', {
redirectTo: '/home'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.when('/home', {
templateUrl: 'views/home.html',
})
.otherwise({
redirectTo: '/login'
});
$locationProvider.html5Mode(true);
});
if that is not working, you may have to set your base on the pages by putting this in the head section.
<base href="/">
I'm experiencing a weird issue with $urlRouterProvider.
In theory I should be able to see the 'here' message log every time the url changes, but I can only see that when the url typed is not in the 'state' list.
Can you telle me what's wrong with this code and why $urlRouterProvider.rule is not executed every url change?
This is my code for the stateProviderConfig:
angular.module('stateProviderConfig', [])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise( function($injector) {
var $state = $injector.get('$state');
$state.go('app.dashboard');
});
$urlRouterProvider.rule(function ($injector, $location) {
console.log('here');
});
$stateProvider
.state('app', {
abstract: true,
url: '/app',
templateUrl: 'views/tmpl/app.html',
})
.state('app.404', {
url: '/404',
controller: 'Err404Controller',
templateUrl: 'views/tmpl/404.html'
...
...
}]);
I've been struggling with using ng-view for my subview of my application. I've followed multiple tutorials and have even checked the routeProvider and locationProvider attributes to ensure that they were pointing to the correct path.
index.html
<html ng-app="elephantApp">
...
<div id="view" ng-view>{{$scope.message}}</div>
...
</html>
application.js
/*
Main AngularJS for Elephant Blog App
*/
var elephantApp = angular.module("elephantApp", ["ngRoute", "ui.bootstrap"]);
elephantApp.config(function ($routeProvider, $locationProvider){
$routeProvider
// Home
.when('/', {
templateUrl: "app/partials/home.html",
controller: "ElephantController"
})
.when('/about', {
templateUrl: 'partials/about.html',
controller: 'PageCtrl'
}) ;
$locationProvider
.html5Mode(true);
});
elephantApp.controller("ElephantController", function($scope, $route, $routeParams, $location){
$scope.contentClass = 'content-home';
$scope.message = {message: "Hi"};
});
elephantApp.controller("PageCtrl", function($scope, $route, $routeParams, $location){
$scope.contentClass = 'content';
$scope.model = {message: "Hey!"};
});
/*
function ElephantController($scope, $route, $routeParams, $location){
$scope.contentClass = 'content-home';
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
$scope.model = {message: "Hey"};
}
*/
So I have no idea what's going on at all.
I have even tried to do code like:
// Pages
.when("/about", {templateUrl: "partials/about.html", controller: "PageCtrl"})
.when("/faq", {templateUrl: "partials/faq.html", controller: "PageCtrl"})
.when("/contact", {templateUrl: "partials/contact.html", controller: "PageCtrl"})
// Blog
.when("/blog", {templateUrl: "partials/blog.html", controller: "BlogCtrl"})
.when("/blog/post", {templateUrl: "partials/blog_item.html", controller: "BlogCtrl"})
// else 404
.otherwise("/404", {
templateUrl: "partials/404.html",
controller: "PageCtrl"
});
I would like to use the above code as it is what I mainly want to do. Though it isn't working. The ng-includes work but not my ng-views. Am I missing something?
Thanks.
By default, a route in angular is the hash in the URI path after #, for example http://app/#/about. By setting $locationProvider.html5Mode to true how you done, we can write without # http://app/about, but need that server always returning index.html. For this purposes you can use, for example, Express server: http://www.seankenny.me/blog/2013/08/05/angularjs-in-html5-mode-with-expressjs/