I have the following config for routes:
app.config( function ($routeProvider, $locationProvider, $httpProvider) {
// Routes
$routeProvider.when('/admin', {
templateUrl : '/app/partials/dashboard.html',
controller : 'DashboardCtrl'
});
$routeProvider.when('/admin/settings', {
templateUrl : '/app/partials/settings.html',
controller : 'SettingsCtrl'
});
$routeProvider.when('/404', {
templateUrl : '/app/partials/404.html',
});
$routeProvider.otherwise({redirectTo: '/404'});
$locationProvider.html5Mode(true);
});
Everything is working except, when I'm on /admin/settings and reload the page, it redirects to 404. I tried removing the html5Mode, it works. However, I really want to use html5Mode. What am I missing? Please help me.
Oh, btw, I'm using AngularJS 1.1.5.
I had a very similar error and solved it by inserting <base href='my_app_base_url'></base> into my index.html page, in the head. The idea came from this GitHub issue (https://github.com/angular/angular.js/issues/2774) and this other one (https://github.com/angular/angular.js/issues/2868), as well as the one I mentioned in my comment.
try $location.path('/404').replace();
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.
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?
Im just learning angular, When i add $locationProvider to my .config, im getting the following error. Removing any reference to $locationProvider removes the error. Is this some angular version error, i have tried different (higher) versions? Im not sure how to add the $locationProvider in without getting the error. Any help would be appreciated.
Ive set up in index.html
Error: Error: [$injector:modulerr] http://errors.angularjs.org/1.2.9/$injector/modulerr?p0=styleApp&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.9%2F%24injector%2Fnomod%3Fp0%3DstyleApp%0AF%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.9%2Fangular.min.js%3A6%3A449%0AVc%2Fb.
My config looks like:
styleApp.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('#/', {
templateUrl : '/page/page1.html',
controller : 'mainCtrl'
})
// route for 2nd page
.when('#page2', {
templateUrl : '/subdir/page2.html',
})
// route for the 3rdpage
.when('#page3', {
templateUrl : '/subdir/page3.html',
})
.when('#page4', {
templateUrl : '/subdir/page4.html',
})
.when('#page5', {
templateUrl : '/subdirn/page5.html',
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
You should add 'ngRoute', as a dependency to your module like this:
var styleApp = anular.module('moduleName', ['ngRoute']);
Secondly, html5Mode makes your URLs look like normal URLs, so you should remove the # from all the routes; consequently, the route for page 4 will look like this:
.when('/page4', {
templateUrl : '/subdir/page4.html',
})
i am coding an angular app i already created my app routing
AdminDashboard.config(['$routeProvider','$locationProvider',function($routeProvider, $locationProvider){
$routeProvider
.when('/',{
templateUrl: '../dashboard/administration/dashboard.html',
controller : 'Dashboard'}
)
//Students Routes
.when('/Students', {
templateUrl : '../dashboard/administration/students/students.html',
controller: 'ShowStudentsController'}
)
.when('/Students/:studentId/edit',{
templateUrl : '../dashboard/administration/students/modals/edit.html',
controller: 'EditStudentsController'
})
.when('/Students/create',{
templateUrl : '../dashboard/administration/students/modals/create.html',
controller: 'CreateStudentsController'
});
}]);
and the history wasn't working i did a research on Anuglar API
and i found that i've to add.
$locationProvider.html5Mode(true);
and then the browser back button was working and getting to the previous route but the template won't render.
Please help me. And i hope my question is clear.
(sorry, my rep is too low to add this as a comment but...)
I had a similar weird problem with routing not working earlier and it turned out to be a stray # link from the basic page design. I'm sure there's a perfectly good reason for that, but clicking on this # link would break all browser navigation for the remainder of the session.
Replacing those # hrefs with #/ prevented the problem for me.
I have installed my Angular App in a location like this:
http://example.com/my-app
My App routing is like this:
var myApp = angular.module('myApp', ['ngRoute','ngAnimate', 'ui.bootstrap', 'angularFileUpload']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/templates', {
controller: 'TemplatesController',
templateUrl: '/components/com_myApp/myApp/views/templates/template-list.html'
})
.when('/apps', {
controller: 'AppController',
templateUrl: '/components/com_myApp/myApp/views/apps/app-list.html'
})
.otherwise({
redirectTo: '/templates'
});
}]);
Now what happens is, when I go to http://example.com/my-app, the url instead of showing http://example.com/my-app#/templates it is showing as http://example.com/templates
It seems the otherwise condition is basically removing the base directory my-app# from the url. I have been scratching my head over this and after reading I also tried adding base url to head tag and tried changing the myApp.config to this:
myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
....
}
But although the routing seems to work when using $locationProvider like the above, the base url is still not showing the way I want it. The url is showing like this http://example.com/templates without my-app in the url path. I dont want Angular to remove the base path from the URL and I want the urls to show like this http://example.com/my-app/..xyz...
Why is Angular doing this?
This is happening because you've instructed Angular to not use hashbang URLs by specifying $locationProvider.html5Mode(true). Remove or otherwise comment out that code snippet and if you specified <base href="/"> in your root template file, remove or comment out that also and just use ngRoute without those.