Using ui-router with AngularJS application, It don't render the views correctly.
That's the app.js file implementation:
'use strict';
angular.module('myApp', [
'ngCookies',
'ui.router'
]);
angular.module('myApp').config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$httpProvider',
function($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider){
// Login Route
$stateProvider.state('login', {
url: '/login',
templateUrl: '/app/views/login.html',
controller: 'loginController'
});
$stateProvider.state('home', {
url: '/home',
templateUrl: '/app/views/home.html'
});
$urlRouterProvider.otherwise('/home');
$locationProvider.html5Mode(true);
}]);
And that's the index.html:
<!DOCTYPE html>
<html class="no-js" lang="en" data-ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./vendor/bootswatch/bootstrap.css" media="screen">
<link rel="stylesheet" href="./vendor/bootswatch/bootswatch.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/style.css">
<script src="./bower_components/angular/angular.min.js"></script>
<script src="./bower_components/angular-route/angular-route.min.js"></script>
<script src="./bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="./app/app.js"></script>
<script src="./app/modules/login/module.js"></script>
<script src="./app/modules/home/module.js"></script>
</head>
<body data-ng-cloak>
<div class="container" data-ui-view></div>
<script src="./vendor/jquery/jquery-1.10.2.min.js"></script>
<script src="./vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="./vendor/bootswatch/bootswatch.js"></script>
</body>
</html>
The problem is that when starting the app and passing to the browser this url (localhost:8000/login) or (localhost:8000/home), It responds with (Not Found)
The cause of this problem is that the URL don't contain the '#'.
Example:
[localhost:8000/#/home] --> works well
[localhost:8000/home] --> don't work at all and shows "Not Found"
The problem is with your .html5Mode(true). You need to update your .htaccess. It all depends on your application, but here is an example of what you can do. This has worked for many Apache users, so hopefully, it will work for you as well.
You also need to take care of the the known <base href> bug found here
<VirtualHost *:80>
ServerName my-app
DocumentRoot /path/to/app
<Directory /path/to/app>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</Directory>
</VirtualHost>
Source: This post.
Related
This question already has answers here:
AngularJS routing 404 error with HTML5 mode
(3 answers)
Closed 4 years ago.
I am new to AngularJS and ui-router. I want to remove hashtag(#) in my URL and having a problem achieving it.
What I already did are the ff but it only shows blank page and many errors:
Added $locationProvider.html5Mode(true); on my app config
Added <base href="/" /> inside my head tag
Please see below the screenshots and codes:
URL with hashtag:
Image - before
After apply the steps said above:
Image - after
Code:
var app = angular.module('app', ['ui.router']);
app.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', function($locationProvider, $stateProvider, $urlRouterProvider) {
$urlRouterProvider
.otherwise('/home');
$stateProvider
.state('home',{
url: '/home',
templateUrl: 'views/home.html'
})
.state('about', {
url:'/about',
templateUrl: 'views/about.html'
});
$locationProvider.html5Mode(true);
}]);
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="{{ favicon }}">
<title>JKG</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- angularjs -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.19/angular-ui-router.min.js"></script>
<!-- main links -->
<link rel="stylesheet" type="text/css" href="sass/main.css">
<script src="js/app.js"></script>
<script src="js/controller/mainController.js"></script>
<base href="/" />
</head>
<body>
<!--MAIN_CONTENT-->
<main ui-view></main>
</body>
</html>
Is there something that I have missed? Can someone please help me on this? Thank you in advance.
depending on the server you are using you may need to write the htacess rule for the application
I try remove # in url . It's working fine before i remove it . But when i remove , I get err in console cant get file patch . Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<base href="/">
</head>
<body>
<a ui-sref="main">Main</a>
<a ui-sref="login">Login</a>
<div ui-view>
<script src="test.js"></script>
<script src="testroute.js"></script>
<script src="testservices.js"></script>
</body>
</html>
Here is js config
function configRoute($stateProvider,$locationProvider){
$locationProvider.html5Mode(true);
$stateProvider
.state('main',{
url:'/main',
templateUrl:'test2.html',
controller: 'myController',
controllerAs:'vm'
})
.state('login',{
url:'/login',
templateUrl:'test1.html',
controller:'testController',
controllerAs:'vm'
})
Here is err i get
GET http://localhost:8080/test.js 404 (Not Found)
GET http://localhost:8080/testroute.js
GET http://localhost:8080/testservices.js
Try to give solution folder name in base tag as example below,
<base href="/SolutionFolder/">
i have an angularJS app using ui-router, here my config file content:
app
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
if(window.history && window.history.pushState) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
$urlRouterProvider
.when('/', 'login')
.otherwise('/error404');
$stateProvider
.state({
name: 'main',
abstract: true,
templateUrl: '/templates/navbar.html',
controller : 'NavBarController',
})
.state({
name: 'main.login',
url: '/login',
templateUrl: '/templates/login.html',
controller : 'LoginController as login',
data: {
authenticate: false,
admin: false,
navBar: false,
}
});
}]);
Also i have a .htaccess file containing:
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html
My folder structure is as below:
- www
- mP
- mPc
-.htaccess
-/js (containing all angularJS files)
-/templates (containing all the template files)
- index.html
And my index.html file has the following content:
<!DOCTYPE html>
<html ng-app='App'>
<head>
<title>App</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="//code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<script type="text/javascript" src="./js/angularJS/dependencies/angular-ui-router.min.js"></script>
<script type="text/javascript" src="./js/angularJS/app.js"></script>
<script type="text/javascript" src="./js/angularJS/constants.js"></script>
<script type="text/javascript" src="./js/angularJS/directives.js"></script>
<script type="text/javascript" src="./js/angularJS/filters.js"></script>
<script type="text/javascript" src="./js/angularJS/services.js"></script>
<script type="text/javascript" src="./js/angularJS/controllers.js"></script>
<script type="text/javascript" src="./js/angularJS/config.js"></script>
<script type="text/javascript" src="./js/angularJS/run.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body ng-controller='MainController'>
<div class="container">
<div class="row">
<div class="center">
<section ui-view></section>
</div>
</div>
</div>
When i try to access the site using localhost/mP/mPc/ it goes to localhost/error404 and when i use localhost/mP/mPc/login it shows an error saying "Not Found The requested URL /index.html was not found on this server"
Any help would be highly appreciated!
For login
$urlRouterProvider
.when('/', '/login')
Since you are using templates from same folder you can use relative path
templateUrl: 'templates/navbar.html',
y try to create a simple web with angular
Project asp.net mvc 5
i have this js
var app = angular.module("app", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/AngularJS/Templates/inicio.html',
controller: 'bienvenidoController'
});
$locationProvider.html5Mode(true);
});
and this:
app.controller("bienvenidoController", function ($scope) {
});
view:
Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
</head>
<body ng-app="app">
#RenderBody()
<!--Librerias Angular-->
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<!---Librerias App-->
<script src="~/AngularJS/RegistrationModule.js"></script>
<script src="~/AngularJS/bienvenidoController.js"></script>
</body>
</html>
index:
<div ng-view>
</div>
and:
<h1>Hola Mundo!</h1>
error:
Error: [$location:nobase]
error see in firebug mozilla
As stated on the AngularJs documentation
If you configure $location to use html5Mode (history.pushState), you need to specify the base URL for the application with a tag or configure $locationProvider to not require a base tag by passing a definition object with requireBase:false to $locationProvider.html5Mode()
https://docs.angularjs.org/error/$location/nobase
You are missing the <base href="/"> in your document or you can disable the check by setting
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Just add <base href="/"> in the <head> section of HTML document and that's it.
<head>
<base href="/">
...
</head>
https://docs.angularjs.org/error/$location/nobase
I do not understand why my routes are not working except when I remove the "/" at the beginning.
Here's my routes:
app.config(function($locationProvider, $routeProvider)
{
$locationProvider.html5Mode(true);
$routeProvider
.when('/', { templateUrl: 'templates/views/home.html', controller: 'HomeController' })
.when('/about', { templateUrl: 'templates/views/about.html', controller: 'AboutController' })
.when('/contact', { templateUrl: 'templates/views/contact.html', controller: 'ContactController' })
.otherwise({ redirectTo: '/404' });
});
and my html look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/angular/">
<meta charset="utf-8">
<title>AngularJS Demo</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body ng-cloak ng-app="app">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div ng-view></div>
<script src="js/libs.js"></script>
<script src="js/app.js"></script>
</body>
</html>
So if I go to
http://example.com/angular/
everything goes as excepted but if i click on the "Contact" link, it will bring me to
http://example.com/contact
instead of
http://example.com/angular/contact
Any idea what is going wrong with my code?
P.S. I also have the following .htaccess
RewriteEngine On
Options FollowSymLinks
RewriteBase /angular/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.html [QSA,NC,L]
Thanks
Yes of course, here it is:
Let me know if you need anything else. Please note that this is the content of my "angular folder", which is at the root of my server "public_html" root.
Thanks