I got into a problem in routing that I can't remove # in the url. I have tried all the solutions like using $locationProvider by setting $locationProvider.html5Mode(true).href="/" is not working for me as its taking the directory wrong and all files are missing, so I have used href="./"
But an error keeps coming like Cannot read property 'html5Mode' of undefined
kindly provide me a solution.
Here's my snippet
var angularMFRP = angular.module('angularMFRP',['ngRoute','angularUtils.directives.dirPagination']);
angularMFRP.config(['$routeProvider','$locationProvider', function($routeProvider, $rootScope,$locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/partials/home.html',
controller: 'home'
})
.when('/restaurants', {
resolve: {
"check": function($location, $rootScope, $window) {
if (!$rootScope.navigates) {
$window.alert("please select City");
$location.path('/');
}
}
},
templateUrl: 'app/partials/restaurants.html',
controller: 'restaurant'
})
.otherwise({
redirectTo: '/'
});
if(window.history && window.history.pushState){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
}]);
<!DOCTYPE html>
<html lang="en" ng-app="angularMFRP">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title ng-bind="title"></title>
<base href="./">
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- include library script files here -->
<script src="assets/library/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script src="assets/library/bootstrap.js"></script>
<script src="assets/library/dirPagination.js"></script>
</head>
But an errors keeps showing like
Error: $injector:modulerr
Module Error
Failed to instantiate module angularMFRP due to:
TypeError: Cannot read property 'html5Mode' of undefined
Also I have used this statement alone too $locationProvider.html5Mode(true) as suggested in all sites,but its not working the error keep coming.Kindly suggest me some solution
Try this by replacing this line near, in your code :
angularMFRP.config(['$routeProvider','$rootScope','$locationProvider', function($routeProvider, $rootScope,$locationProvider) {
var angularMFRP = angular.module('angularMFRP', ['ngRoute', 'angularUtils.directives.dirPagination']);
angularMFRP.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/partials/home.html',
controller: 'home'
})
.when('/restaurants', {
resolve: {
"check": function($location, $rootScope, $window) {
if (!$rootScope.navigates) {
$window.alert("please select City");
$location.path('/');
}
}
},
templateUrl: 'app/partials/restaurants.html',
controller: 'restaurant'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
]);
Related
I have error like this Error : [$compile] tpload when i try to have clean url from here : https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag
Here is my code
JS:
.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', {redirectTo: '/datatables'});
$routeProvider.otherwise({redirectTo: '/page-404'});
$routeProvider.when('/documentation/index', {
templateUrl: 'documentation/index.html'
});
$routeProvider.when('/datatables', {
templateUrl: 'datatables.html'
});
$routeProvider.otherwise({
redirectTo: '/datatables'
});
}
]);
HTML :
<!DOCTYPE html>
<html ng-app="cleanUI">
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Template</title>
<!-- Angular Version Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<base href="/">
</head>
Have you any ideas?
Thanks for answers in advance!!!
Your js code have some issues. You have to correct it as this
.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$routeProvider.when('/documentation/index', {
templateUrl: 'documentation/index.html'
}).when('/datatables', {
templateUrl: 'datatables.html'
}).when('/page-404', {
templateUrl: 'page-404.html'
});
$routeProvider.otherwise('/page-404');
$locationProvider.html5Mode(true);
}
]);
I want to remove #! from url and I used
$locationProvider.html5Mode(true);
For this and it works but when I refreshes the page it can't be able to find the page and give error.
what should I do for this?
Index.html
<!DOCTYPE html>
<html dir="ltr" lang="en" ng-app="myapp">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<base href="/">
</head>
<body class="product-product-82 responsive full default layout_2">
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers/config.js"></script>
<script type="text/javascript" src="controllers/productCtrl.js"></script>
<script type="text/javascript" src="controllers/menuCtrl.js"></script>
<page-loader flag="isLoading"></page-loader>
<div ui-view="layout"></div>
</body>
</html>
config file for routing
var app = angular.module('myapp');
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('productpagelayout', {
abstract: true,
views: {
layout: {
templateUrl: 'template/layout/productpagelayout .html',
},
controller : 'productCtrl'
}
})
.state('landing', {
url: '/',
templateUrl: 'template/landing/mainpages.html',
controller: 'menuCtrl',
parent: 'productpagelayout',
})
.state('home', {
url: '/home',
templateUrl: 'template/landing/landing.html',
controller: 'menuCtrl',
parent: 'productpagelayout',
})
.state('category2',{
url: '/c/:name1/:name2',
templateUrl: 'template/product/productsgridpage.html',
controller: 'productCtrl',
parent: 'productpagelayout'
})
$locationProvider.html5Mode(true);
}])
app.js
var app = angular.module('myapp', ['ui.router',
'rzModule',
'ngCookies',
'ui.bootstrap',
'ngSanitize',
]);
You can try and use:
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
I am getting error in routing to about page. Home page is loading successfully. I am new to angular. Please help me to do it successfully.
here is the code link
enter code here Plunker Link
find code here
index.html
<!DOCTYPE html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body ng-app="demo">
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Js
// Code goes here
var app = angular.module("demo", ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'homeController'
}).
when('/about', {
templateUrl: 'partials/about.html',
controller: 'aboutController'
}).
otherwise({
redirectTo: 'partials/404.html'
});
}
]);
app.controller('mainController', function() {});
app.controller('homeController', function($scope, $http, $location){
$scope.login= function() {
$location.path("/home");
}
});
app.controller('aboutController', function($scope, $http) {
$scope.about= function() {
$location.path("/about");
}
});
Correct your references as <script src="main.js"></script> and create partial/home.html. It will work then.
Try to utilize browser developer tool (F12), it will you help to find actual error.
There are several issues with your plunker.
You don't have the partials created in your plunker version. You need to create the files partials/about.html and partials/home.html.
The css/main.css. You have created a style.css in the root folder, but referred css/main.css in index.html.
3.The path to main.js was wrong. The file is in the root folder and you referred it as js/main.js. Please refer it as <script src="main.js"></script>
You have to call the routes from the partials.
You have created the about method in aboutController. But, it should be in the home controller. About controller will only be instantiated when you route to the about.html page.
You have referred an URL '/home' which is not defined in the main.js.
Please find the following working plunker.
https://plnkr.co/edit/APKWvpuTfivua5CovRp7?p=preview
// Code goes here
var app = angular.module("demo", ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html',
controller: 'homeController'
}).
when('/about', {
templateUrl: 'about.html',
controller: 'aboutController'
}).
when('/login', {
templateUrl: 'login.html',
controller: 'loginController'
}).
otherwise({
redirectTo: 'partials/404.html'
});
}
]);
app.controller('homeController', function($scope, $http, $location){
$scope.login= function() {
$location.path("/login");
}
$scope.about= function() {
$location.path("/about");
}
});
app.controller('aboutController', function($scope, $http) {
$scope.backToHome = function() {
window.history.back();
}
});
app.controller('loginController', function($scope, $http) {
$scope.backToHome = function() {
window.history.back();
}
});
index.html:
<!DOCTYPE html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body ng-app="demo">
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script src="main.js"></script>
</body>
</html>
I've been looking at ways to remove the # from the URLS within AngularJS and found many solutions which pointed me in the direction to use what they had suggested now Inside my app.js I have the following:
var app = angular.module('mainApp', ['ngRoute', "oc.lazyLoad"]);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home',
{
templateUrl: '/Templates/Home/home.html',
})
.when('/About',
{
templateUrl: '/Templates/About/About.html'
})
.when('/home/:page_number',
{
templateUrl: '/Templates/Params/params.html',
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load('Templates/Params/paramsController.js');
}]
}
})
.otherwise('/home',
{
templateUrl: '/Templates/Home/home.html'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
Inside the head of my SiteMaster.Html I've placed
<base href="/">
Full breakdown:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/app.js"></script> <!-- Consists of Routing -->
<script src="Scripts/ocLazyLoad.js"></script>
<title>Angular Routing Tutorial</title>
<base href="/">
</head>
<body ng-app="mainApp">
<h1>sitemaster Template</h1>
<div ng-view></div>
</body>
</html>
Yet when I run this I get directed to /home when I manipulate the URL to be /About I get
HTTP Error 404.0 - Not Found
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
And the same for /home/SomeValue
Yet when I remove
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
And remove base href="/" from my SiteMaster.Html the routes work as expected?
Can someone explain to me why this behavior would be happening?
My homepage is not instantiated, It's not showing up?
index.html
<!DOCTYPE html>
<html ng-app="pollApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="/angular/app.js"></script>
<title>Poll</title>
</head>
<body>
<div>
<div ng-view></div>
</div>
</body>
</html>
Routes file:
(function () {
var pollApp = angular.module('pollApp');
pollApp.config([
'$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/angular/views/index.html',
controller: 'homeController',
controllerAs: 'homeCtrl'
})
.otherwise({
redirectTo: '/'
});
}
]);
})();
app.js
(function () {
angular.module('pollApp', ['ngRoute']);
})();
Folder structure:
What am I doing wrong?
--EDIT--
angular.js:68 Uncaught Error: [$injector:nomod] Module 'pollApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.3/$injector/nomod?p0=pollApp
You have forgotten to add a <script> element to load your routes.js file.
You also haven't defined any controller named 'homeController'.
I think you could try on your app.js having this
(function () {
angular.module('pollApp', ['ngRoute']);
})();
and in your route.js
(function () {
angular.module('pollApp');
.config([
'$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/angular/views/index.html',
controller: 'homeController',
controllerAs: 'homeCtrl'
})
.otherwise({
redirectTo: '/'
});
}
]);
});
Regards