I was expecting to see this question on Stackoverflow but didn't. Apparently I'm the only one having this problem that seems to me to be very common.
I have a basic project I am working on but the routes don't seem to work even though everything I've done so far seems to be right.
I have this piece of html in my index.html file:
<html>
<head ng-app="myApp">
<title>New project</title>
<script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
Add Quote
<div ng-view ></div>
</body>
</html>
and here is my app.js:
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/add-quote', {
templateUrl: 'views/add_quote.html',
controller: 'QuoteCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
Now when I just visit the page, here is what I get in the url:
http://localhost:8000/admin#!/
and when I click on the Add quote button, I get this:
http://localhost:8000/admin#!/#%2Fadd-quote
What can be the problem here?
Thanks for help
Simply use hashbang #! in the href:
Add Quote
Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!').
If you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to your application:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
For more information, see
AngularJS GitHub Pull #14202 Changed default hashPrefix to '!'
AngularJS Guide - Migration - aa0077e8
Sorry to get on my high horse but... How did this get released? This is massive, breaking bug. — #MiloTheGreat
The breaking change as by #14202 should be reverted as the reference specification was already officially deprecated #15715
I'm going to close this issue because we haven't got any feedback. Feel free to reopen this issue if you can provide new feedback.
— https://github.com/angular/angular.js/issues/15715#issuecomment-281785369
Simply include the ! into the href:
<body>
Add Quote
<div ng-view ></div>
</body>
I couldn't get routing to work in 1.6.4 so I decided to use angular 1.5.11 and routing works fine although I needed to define all my routings in when(..) functions with trailing "/"
If sticking to an older version of angular is an option for you then consider it since it may save your nerves...
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/layoutandviewbox", {
templateUrl : "views/layout-and-viewbox.html"
})
.when("/basicshapes", {
templateUrl : "views/basic-shapes.html"
})
.when("/advancedshapes", {
templateUrl : "views/advanced-shapes.html"
})
.when("/groups", {
templateUrl : "views/groups.html"
})
.when("/transformations", {
templateUrl : "views/transformations.html"
})
.when("/effects", {
templateUrl : "views/effects.html"
})
.when("/", {
templateUrl : "views/basic-shapes.html"
});
});
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when('/add-quote', {
templateUrl: 'views/add_quote.html',
controller: 'QuoteCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
Try this one might Help...
In html or view Page
<body>
Home
<div ng-view></div>
</body>
In Script Page
var app=angular
.module('myModule',['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Home', {
templateUrl: 'FolderName/Home.html',
controller: 'homeCtr'
})
$locationProvider.hashPrefix('');
});
Related
I have
<base href="/!#/">
at the top of my index.html file. When I go to URL http://localhost:5000/ everything works fine, it instantly add #!/ so the URL is http://localhost:5000/#!/ and page display as expected.
At the server side I have following code which should allow me to use my files
app.use(express.static(path.join(__dirname, 'public')));
Structure of my files is something like:
bookApp(folder)
server.js
public(folder)
index.html
app.js(ngRoute)
views(folder)
css(folder)
controllers(folder)
and my AngularJS routing is:
(function () {
'use strict';
angular
.module('app', [
'ngRoute'
])
.config(config);
function config ($routeProvider) {
$routeProvider
.when('/', {
controller: 'PostsCtrl',
templateUrl: 'views/posts.html'
})
.when('/register', {
controller: 'registerCtrl',
templateUrl: 'views/register.html'
})
.when('/login', {
controller: 'loginCtrl',
templateUrl: 'views/login.html'
})
.otherwise('/');
}
})();
The very first page (views/posts.html) load as expected but when I click
<li>Sign in</li>
the URL is http://localhost:5000/login not as like I thought http://localhost:5000/!#/login.
and it display:
Cannot GET /login
when I manually change URL to http://localhost:5000/#!/login it works fine.
How to fix this behavior?
The only solution I see is to get rid of <base> tag and in every link manually in href directive add !# before slash.
It looks like you are forgetting the ng-view directive: <div ng-view></div> which is the container for the content that is provided by your routing. Place this above your script if you have everything contained in one file.
You can also try:
<ng-view></ng-view>
<div class="ng-view"></div>
Is there any particular reason you are still using Angular 1? I know this isn't technically answering your question, but I would highly recommend that you start using the latest Angular. You can still keep legacy code but it will make a lot of what you are doing a lot cleaner and clear.
I was expecting to see this question on Stackoverflow but didn't. Apparently I'm the only one having this problem that seems to me to be very common.
I have a basic project I am working on but the routes don't seem to work even though everything I've done so far seems to be right.
I have this piece of html in my index.html file:
<html>
<head ng-app="myApp">
<title>New project</title>
<script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
Add Quote
<div ng-view ></div>
</body>
</html>
and here is my app.js:
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/add-quote', {
templateUrl: 'views/add_quote.html',
controller: 'QuoteCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
Now when I just visit the page, here is what I get in the url:
http://localhost:8000/admin#!/
and when I click on the Add quote button, I get this:
http://localhost:8000/admin#!/#%2Fadd-quote
What can be the problem here?
Thanks for help
Simply use hashbang #! in the href:
Add Quote
Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!').
If you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to your application:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
For more information, see
AngularJS GitHub Pull #14202 Changed default hashPrefix to '!'
AngularJS Guide - Migration - aa0077e8
Sorry to get on my high horse but... How did this get released? This is massive, breaking bug. — #MiloTheGreat
The breaking change as by #14202 should be reverted as the reference specification was already officially deprecated #15715
I'm going to close this issue because we haven't got any feedback. Feel free to reopen this issue if you can provide new feedback.
— https://github.com/angular/angular.js/issues/15715#issuecomment-281785369
Simply include the ! into the href:
<body>
Add Quote
<div ng-view ></div>
</body>
I couldn't get routing to work in 1.6.4 so I decided to use angular 1.5.11 and routing works fine although I needed to define all my routings in when(..) functions with trailing "/"
If sticking to an older version of angular is an option for you then consider it since it may save your nerves...
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/layoutandviewbox", {
templateUrl : "views/layout-and-viewbox.html"
})
.when("/basicshapes", {
templateUrl : "views/basic-shapes.html"
})
.when("/advancedshapes", {
templateUrl : "views/advanced-shapes.html"
})
.when("/groups", {
templateUrl : "views/groups.html"
})
.when("/transformations", {
templateUrl : "views/transformations.html"
})
.when("/effects", {
templateUrl : "views/effects.html"
})
.when("/", {
templateUrl : "views/basic-shapes.html"
});
});
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when('/add-quote', {
templateUrl: 'views/add_quote.html',
controller: 'QuoteCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
Try this one might Help...
In html or view Page
<body>
Home
<div ng-view></div>
</body>
In Script Page
var app=angular
.module('myModule',['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Home', {
templateUrl: 'FolderName/Home.html',
controller: 'homeCtr'
})
$locationProvider.hashPrefix('');
});
in index.html
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
controller
angular.module("testCtrl",[]).controller('TestController', ["$scope", function($scope) {
$scope.Myname = "my first route";
}]);
app.js
var app = angular.module('testApp',["ngRoute", "testCtrl"]);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when("/",{
templateUrl: "Views/main.html"
})
.when("/details",{
templateUrl: "Views/details.html",
controller : TestController
})
.otherwise({
redirectTo : "/"
});
}]);
my homepage loads fine but with some reason /details show error like --- No webpage was found for the web address: http://127.0.0.1:8080/details
I am new to angular and I am learning. I am not able to understand whats wrong ..do we have any tools to debug route error? I am using angular 1.5.8 version for now.
server console - "GET /details" Error (404): "Not found"
The issue is that TestController isn't defined in app.js. You should use the controller name as a string, like so.
.when("/details",{
templateUrl: "Views/details.html",
controller : "TestController"
})
See this plunk for a working example.
https://plnkr.co/edit/xi20MmchJY6TO1SG2o0d?p=preview
I think you have omitted the dependency on ngRoute:
angular.module('testCtrl', ['ngRoute'])...
Are you referencing ng-app in your HTML as well (can't see your HTML code)
Presumably you have included your scripts in the HTML page too?
I'm learning angular.js and has done some 'Hello world' app. It's work like i planned, all, except routing. Please help me find mistakes in my code (i think it's in app.js)
angular.module('usercat', ['ngRoute']).
config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/messages', {
templateUrl: '/messages.html',
controller: 'UserListCtrl'}).
otherwise({
redirectTo: '/messages'
});
}]);
Here is my demo
You need to add the ng-view tag in index.html. This is where your messages will be shown. So just add the following and it should work:
<ng-view></ng-view>
I have a web app that doesn't seem to work at all if I try to use ngRoute approach to changing primary page view. The routing config looks like:
var app;
app = angular.module('genehaxx', ['ngGrid','ngRoute', 'ngSanitize', 'ui.bootstrap','genehaxx.filters', 'genehaxx.services'])
.config(function($routeProvider){
//route setup
$routeProvider
.when('/workflows', {
templateURL: '/partials/workspace_view.html',
controller: 'MainController'
})
.when('/jobs', {
templateURL: '/partials/submissions_view.html' ,
controller: 'MainController'
})
.when('/', {
templateURL: '/partials/analyses_view.html',
controller: 'MainController'
})
.when('/analyses', {
redirectTo: '/'
})
.otherwise({
redirectTo: '/'
});
});
function MainController($scope, $modal, $rootScope, User, Data, Workflow, Step){
//lots of proprietary code here..
}
I have tried it with and without the '/' in front of partials. I have tried it both with its normal web-server reverse proxied under nginx and directly under http-server from its directory. In both cases there is no evidence whatsoever that the partials pages are ever requested from the server. The main view is a bit hairy to post in entirety but the relevant bits look like:
<!doctype html>
<html lang="en" ng-app="genehaxx" >
<head>
<meta charset="utf-8">
<title>Welcome to Genengine!</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/ng-grid.css">
<script src="lib/jquery-2.0.2.js"></script>
<script src="libs/angular/angular.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="libs/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/transition.js"></script>
<script src="lib/bootstrap-custom/ui-bootstrap-custom-tpls-0.10.0.js"></script>
<script src="lib/ng-grid-2.0.7.debug.js"></script>
<script src="js/app.js"></script>
<script src="js/filters.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>
<script src="js/objects.js"></script>
<script src="js/services2.js"></script>
<script src="js/dropdownToggle.js"></script>
</head>
<body>
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
I have left off the navbar stuff as it seems irrelevant and I get the same results clicking it or directly entering the url with #whatever. The /libs directories have the latest angular, angular-route, angulare-sanitize from bower.
Small samples I tried plugging in my libraries and partials seem to work which is even more frustrating. I have been stumped on this for days. I hacked around it in production with mess of ng-includes and some "clever" code but I would rather get this working. Anything pop out? When I say it doesn't work, again I mean that I see no evidence that any routing occurred in that these partials are never requested from the server.
You have typos inside of your when calls:
Example:
templateURL: '/partials/workspace_view.html',
should be
templateUrl: '/partials/workspace_view.html',
(notice the difference in caps, templateURL changes to templateUrl)
Couple things
1 - Stringify MainController
.
$routeProvider
.when('/workflows', {
templateURL: '/partials/workspace_view.html',
controller: 'MainController'
})
.when('/jobs', {
templateURL: '/partials/submissions_view.html' ,
controller: 'MainController'
})
.when('/', {
templateURL: '/partials/analyses_view.html',
controller: 'MainController'
})
.when('/analyses', {
redirectTo: '/'
})
.otherwise({
redirectTo: '/'
});
2 - You don't need ng-controller on body. ngRoute will bind the controller to the view for you. However, make sure you have MainController defined in your app, otherwise angular will throw an error at you
I see that #Mark Kline's solution solved your issue, but I would like to make suggestion that might help you in the long run.
You mention in a comment that your controller is complicated, as such I would highly recommend that you break it up into smaller controllers where each is used only to control one of the routes. From experience if you are using routing to develop an application then using one controller is going to get very large quickly, and in the long run be very hard to maintain. I have tried, in previous apps to use a single controller for several different views and it tends to get out of hand rather quickly.
If you are able, I highly suggest that you separate as much functionality as possible to save yourself a lot of future headaches, it is going to make your code easier to read, maintain, and debug.