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('');
}]);
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 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>
"angular 1.6.1", "angular-ui-router 0.3.1", All ui views changed/worked correctly but i'm getting the following error in my console window, i don't know why.
My HTML code is
<!DOCTYPE html>
<html lang="en" data-ng-app="manoj">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link rel="stylesheet" href="assets/style/angular-material.css">
<link rel="stylesheet" href="assets/style/materialdesignicons.min.css">
<link rel="stylesheet" href="assets/style/style.css">
</head>
<body>
<div ui-view class="main-body"></div>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<!--Angular Library-->
<script src="angular/angular.min.js"></script>
<script src="angular/angular-ui-router.min.js"></script>
<script src="angular/angular-animate.min.js"></script>
<script src="angular/angular-aria.min.js"></script>
<script src="angular/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="assets/js/angular-material.min.js"></script>
<!--App Scripts-->
<script src="app/app.js"></script>
<script src="app/dashboard/dashboard.js"></script>
<script src="app/login/login.js"></script>
</body>
</html>
app.js file
angular.module('manoj', ['ui.router','ngMaterial'])
.config(function ($mdThemingProvider, $locationProvider, $stateProvider, $urlRouterProvider) {
$mdThemingProvider.disableTheming();
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise('/a/dashboard');
$stateProvider
.state('login',{
url:'/login',
templateUrl:'app/login/index.html',
controller: 'loginCtrl'
})
.state('a',{
url:'/a',
templateUrl:'app/app.html'
})
.state('a.dashboard',{
url: '/dashboard',
templateUrl: 'app/dashboard/dashboard.html',
controller:'dashboardCtrl'
});
}).run(function ($rootScope, $state, $stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});
Please somebody help me...
You need to update ui-router, try with "angular-ui-router 1.0.3"
I'm using AngularJS 1.4.7 for a web application which works completely fine on the desktop site. However when I load the page on my phone using Chrome the webpage doesn't load any of the routing that should be taken care of by the ngRoute component.
The header.php
<?php ob_start(); ?>
<!DOCTYPE html>
<html lang="en-ca" ng-app="ledgerFeed">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Online Ledger</title>
<script src="/res/jQuery.js"></script>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="/bootstrap/css/bootstrap-theme.css" />
<script src="/bootstrap/js/bootstrap.min.js"></script>
<base href="/ledger/">
<script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="fetcher.js"></script>
<script src="accountController.js"></script>
<script src="entryController.js"></script>
</head>
<body>
The app.js
(function() {
var app = angular.module("ledgerFeed", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
// .when("/", {
// templateUrl: "accountlist.php",
// controller: "accountController"
// })
.when("/accounts", {
templateUrl: "accountlist.php",
controller: "accountController"
})
.when("/account/:accountID", {
templateUrl: "entrylist.php",
controller: "entryController"
})
.otherwise({ redirectTo: "/accounts" });
// $locationProvider.html5Mode(true);
});
})();
Does anyone know what I might be doing wrong ?
index.html:
<!doctype html>
<html ng-app ng-csp>
<head>
<meta charset="UTF-8">
<title>Presently</title>
<link rel="stylesheet" href="app/styles/angular-csp.css">
<!--<link rel="stylesheet" href="css/main.css">-->
<script src="assets/dependencies/angular/angular.min.js"></script>
<script src="assets/dependencies/angular-ui-router/release/angular-ui-router.js"></script>
<script src="main.js"></script>
<script src="app/states/home/home.controller.js"></script>
<script src="app/states/home/favs/fav.controller.js"></script>
</head>
<body>
hello {{'foo'.length}}
<div ui-view></div>
</body>
</html>
main.js:
console.log('main.js');
var myApp = angular.module('myApp', ['ui.router'])
.config(['$stateProvider', '$urlRouteProvider'
, function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('state1', {
url: "/",
template: "home"
});
}]);
console.log(myApp);
So the console logs show for main.js and the app but nothing is rendered in the view. I would expect to see the word 'home'
You had a typo ($urlRouteProvider instead of the $urlRouterProvider)
.config(['$stateProvider', '$urlRouteProvider'
, function($stateProvider, $urlRouterProvider) {
Which I fixed here in this working plunker
.config(['$stateProvider', '$urlRouterProvider'
, function($stateProvider, $urlRouterProvider) {
Check the Router in the $urlRouterProvider