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',
Related
"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 have included my dependencies for using Angular UI router but when I run my application I keep receiving an error stating: $urlRouteProvider is not defined. It seems to not be recognizing UI router and is immediately forward to the .otherwise instead of activating the initial login state.
Here is my code:
app.js --
var app = angular.module("demoApp", ["ngVidBg", "ngAnimate","ui.router"]);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.state('signup', {
url: '/signup',
templateUrl: 'views/signup.html',
controller: 'SignUpCtrl'
})
.state('form', {
url: '/form',
templateUrl: 'views/form.html',
resolve: {
logincheck: checkLoggedin
}
})
$urlRouteProvider.otherwise('/views/login');
}]);
index.html--
<!DOCTYPE html>
<html lang="en" ng-app="demoApp">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/vidBg.css"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<nav ng-controller="NavCtrl">
<span ng-show="!currentUser">
</span>
</nav>
<div ng-view>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-animate.js"></script>
<script src="./js/app.js" type="text/javascript"></script>
<script src="./js/controllers.js" type="text/javascript"></script>
<script src="./js/vidBg.js" type="text/javascript"></script>
</body>
</html>
Its typo at the $urlRouteProvider.otherwise line, it should be
$urlRouterProvider
instead of
$urlRouteProvider
$urlRouterProvider Doc
I used John Papa's HotTowel Angular template to generate my app. On my development machine, my angular project works fine in IIS Express without <base> in the Index.html. When the project is published to IIS 8 hosting server to "MyIISsite/myAppName" folder the application runs except all the navigation starts at the "MyIISsite" instead of "MyIISsite/myAppName/...". I can't navigate to anywhere. This IIS 8 has multiple sites. MyIISsite is using port 8083. The folder is converted to a web application. When I added <base> tag in the Index.html, then I got the error about ng-include file is not found. Does anyone know how to configure IIS 8 for this problem? Thanks.
Here are the IE Developer Tools console message, index.html, and ui-Router configuration
(function ()
{
'use strict';
var myApp = angular.module('myApp');
myApp.config(['$stateProvider', '$locationProvider', uiRouteConfigurator]);
function uiRouteConfigurator($stateProvider, $locationProvider)
{
//debugger;
//http://www.jokecamp.com/blog/resolving-angularjs-paths-in-asp-mvc-spa-iis
// UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router
// ------------------------------------------------------------------------------------------------------------
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/dashboard/dashboard.html',
controller: 'dashboardCtrl'
})
//test route ----------------------------------
.state('test', {
url: 'test',
//template:"<h2>Test</H2>",
templateUrl: 'app/test/test.html',
controller: 'testCtrl'
})
.state('uiGrid', {
url: 'uiGrid',
templateUrl: 'app/test/uiGrid.html',
controller: 'uiGridCtrl'
})
// admin routes -------------------------------
.state('changeSite', {
url: '/site',
templateUrl: 'app/admin/admin.html',
controller: 'adminCtrl'
})
// general routes -------------------------------
.state('about', {
url: '/about',
templateUrl: 'app/about/about.html',
controller: 'aboutCtrl'
})
.state('contactList', {
url: '/contacts',
//template:'<h2>Contacts</h2>',
templateUrl: 'app/contacts/contactList.html',
controller: 'contactCtrl'
})
// Otherwise routes -----------------------------
.state('otherwise', {
url: '*path',
templateUrl: 'app/dashboard/dashboard.html',
controller: 'dashboardCtrl'
});
$locationProvider.html5Mode(true);
}
})();
Error: [$compile:ctreq] Controller 'ngInclude', required by directive 'ngInclude', can't be found!
http://errors.angularjs.org/1.2.22/$compile/ctreq?p0=ngInclude&p1=ngInclude
at getControllers (http://myIISserver:8083/myApp/scripts/angular.js:6524:13)
at nodeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6692:13)
at compositeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6086:13)
at compositeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6089:13)
at compositeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6089:13)
at compositeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6089:13)
at publicLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:5982:30)
at Anonymous function (http://myIISserver:8083/myApp/scripts/angular.js:1440:11)
at Scope.prototype.$eval (http://myIISserver:8083/myApp/scripts/angular.js:12658:9)
at Scope.prototype.$apply (http://myIISserver:8083/myApp/scripts/angular.js:12756:11) <div data-ng-include="'/app/layout/shell.
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<style>
/* This helps the ng-show/ng-hide animations start at the right place. */
/* Since Angular has this but needs to load, this gives us the class early. */
.ng-hide {
display: none !important;
}
</style>
<title data-ng-bind="title">My App Title</title>
<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, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script>
// Must be first. IE10 mobile viewport fix
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/))
{
var msViewportStyle = document.createElement("style");
var mq = "#-ms-viewport{width:auto!important}";
msViewportStyle.appendChild(document.createTextNode(mq));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
</script>
<link href="content/ie10mobile.css" rel="stylesheet" />
<link href="content/bootswatch/cerulean/bootstrap.min.css" rel="stylesheet" />
<link href="content/font-awesome.min.css" rel="stylesheet" />
<link href="content/ui-grid-unstable.css" rel="stylesheet" />
<link href="content/toastr.css" rel="stylesheet" />
<link href="content/customtheme.css" rel="stylesheet">
<link href="content/styles.css" rel="stylesheet" />
<!--<base href="/MyAppName/" />-->
</head>
<body>
<div>
<!-- shell -->
<div data-ng-include="'app/layout/shell.html'"></div>
<!-- splash -->
<div id="splash-page" data-ng-show="false">
<div class="page-splash">
<div class="page-splash-message">
My App Name
</div>
<div class="progress progress-striped active page-progress-bar">
<div class="bar"></div>
</div>
</div>
</div>
</div>
<span data-cc-scroll-to-top></span>
<!-- Vendor Scripts -->
<script src="scripts/jquery-2.1.1.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-animate.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/angular-ui-router.js"></script>
<script src="scripts/ui-grid-unstable.js"></script>
<script src="scripts/angular-resource.js"></script>
<script src="scripts/angular-sanitize.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/toastr.js"></script>
<script src="scripts/moment.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/spin.js"></script>
<!-- Bootstrapping -->
<script src="app/myApp.js"></script>
<script src="app/config.js"></script>
<script src="app/config.exceptionHandler.js"></script>
<script src="app/config.ui.route.js"></script>
<!-- common Modules -->
<script src="app/common/common.js"></script>
<script src="app/common/logger.js"></script>
<script src="app/common/spinner.js"></script>
<!-- common.bootstrap Modules -->
<script src="app/common/bootstrap/bootstrap.dialog.js"></script>
<!-- app modules -->
<script src="app/about/aboutController.js"></script>
<script src="app/admin/adminController.js"></script>
<script src="app/contacts/contactController.js"></script>
<script src="app/dashboard/dashboardController.js"></script>
<script src="app/layout/shellController.js"></script>
<!-- app.customers modules-->
<script src="app/customer/customerController.js"></script>
<!-- app.tasks modules -->
<script src="app/tasks/taskController.js"></script>
<script src="app/tasks/taskAddController.js"></script>
<script src="app/tasks/taskController.js"></script>
<script src="app/tasks/taskEditController.js"></script>
<script src="app/tasks/taskSearchController.js"></script>
<!-- app.users modules-->
<script src="app/users/userController.js"></script>
<!-- app Services -->
<script src="app/services/datacontext.js"></script>
<script src="app/services/directives.js"></script>
<script src="app/services/services.js"></script>
<script src="app/services/factories.js"></script>
<!-- test -->
<script src="app/test/testController.js"></script>
<script src="app/test/uiGridController.js"></script>
</body>
</html>
I am trying to set up a SPA with angular, and with the current code it is not working, while run on a server. My index.html does not have a # after it, which I think it should for the SPA. I am curious why I am not getting a # in the url's. for example, navigating to the index i get something like localhost:4000/index.html/ instead of localhost:4000/index.html#/. When i try to navigate to localhost:4000/index.html/home i get a 404 error. Can anyone tell me why this is so, or if there are any other issues you can spot.
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ski</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
</head>
<body ng-app="Ski">
<ng-view></ng-view>
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
</body>
</html>
angular routes :
angular.module('Ski').config(function($routeProvider) {
'use strict';
.when('/home', {
templateUrl: 'templates/home.html'
})
.when('/map', {
templateUrl: 'templates/map.html'
})
.otherwise({
redirectTo: '/'
});
});
app.js
angular.module('Ski', ['ngRoute']);
Templates:
this on is templates/maps
<div>
<h1> Hello World </h1>
</div>
this one is templates/home
<h1> Home </h1>
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.