I have the following in my app.js file:
// Declare app level module which depends on filters, and services
var APP = angular.module('DiagsDashboard', ['ngRoute', 'DiagsDashboard.filters',
'DiagsDashboard.services', 'DiagsDashboard.directives', 'DiagsDashboard.controllers']);
APP.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', { templateUrl: '/views/shared/Error.html' })
.when('/Error', { templateUrl: '/views/shared/Error.html' })
.when('/Diagsdashboard', { templateUrl: '/views/shared/Error.html' })
.when('/Diagsdashboard/Error', { templateUrl: '/views/shared/Error.html' })
.otherwise({ templateUrl: '/views/shared/Error.html' });
});
But when I browse to:
- /localhost/#
- /localhost/#/DiagsDashboard/
- /localhost/#/DiagsDashboard/Error
- /localhost/#/error
The whole page re-loads and everything refreshes.
I've copied this code from a project where it works and I have angular-route.js included.
This is an MVC application located within IIS as a sub-application at /localhost/DiagsDashboard.
The issue was simply I hadn't give ng-app a name in the markup. I'd read that it is possible to use ng-app without a name but obviously that isn't the case.
Related
Is it possible to use Angularjs's routing and controller without the templateURL?
For instance, below is my current routes, controllers, and template urls,
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
templateUrl: "js/template/1.html",
controller: "controller1"
})
.when("/list1",
{
templateUrl: "js/template/2.html",
controller: "controller2"
})
...
And I have ng-view in my html,
<div ng-view></div>
I tested with the routes without templateUrl,
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
//templateUrl: "js/template/1.html",
controller: "controller1"
})
.when("/view1",
{
//templateUrl: "js/template/2.html",
controller: "controller2"
})
...
the result - nothing is displayed on my screen. obviously the controller cannot be triggered anymore.
use template with empty string.
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
template: "",
controller: "controller1"
})
Angular uses the $routeProvider Definition to attach a controller to your view. If you don't want to specify the details in $routeProvider config, other option is to let the application land on one page using something like -
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html'
})
.when()
.otherwise({
redirectTo: '/'
});
});
This way user will land on main.html. Now on the main.html you can include several different html templates like -
<div ng-include src="'js/template/1.html'" ng-controller = 'Controller1'></div>
<div ng-include src="'js/template/2.html'" ng-controller = 'Controller2'></div>
Notice the syntax of using/including template above - "'<<Path>>'"
Hope this helps.
Setting template with empty string make error and cause recursion loading ; i solved it by just add the link of empty html file.
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
template: "dummy.htm",
controller: "controller1"
})
I am using angular router for routing my app and I want to use the html5mode.
Routing is working fine, but when a refresh my page (on he browser), I get a 404 error.
Here is my routing code snipet
angular.module ('app', ['ngRoute', 'home', 'login', 'admin'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/components/home/home.html',
controller: 'homeController'
})
.when('/login', {
templateUrl: 'app/components/login/login.html',
controller: 'loginController'
})
.when('/outils-de-gestion', {
templateUrl: 'app/components/admin/admin.html',
controller: 'adminController'
})
$locationProvider.html5Mode(true);
}])
.controller ('appController', ['$scope', function ($scope){
}])
What am I doing wrong ? Has anyone an idea about that ?
This solution works for angularJs.
index.html => Add in head tag.if your application is in folder then you need to add folders like:
config.js => add $locationProvider in function param and the code below:
app.config(function($routeProvider,$locationProvider)
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
and your href should like ng-href="home" i.e. do not use #or !
thats it .
While developing some SPA AngularJS Application I define the rooting with $routeProvider. Everythings works fine, but I get tired with clicking through the whole application to see particular changes I've done anytime I republish the application to the server. Is there a possibility to change this behaviour? I mean, when I hit refresh on my browser or use some tools for automatical refreshing (like LiveReload Server) is there a way to tell angularJS to not to navigate to the default page?
Regarding to the comments below, here is the routing content.
Below is the MainRoutingContent
'use strict'
angular.module('MainModule')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'webapp/modules/authentication/views/login.html',
hideMenus: true
})
.when('/register', {
controller: 'RegistrationController',
templateUrl: 'webapp/modules/registration/views/register.html'
})
.when('/', {
controller: 'HomeController',
templateUrl: 'webapp/modules/home/views/home.html'
})
.otherwise({ redirectTo: '/login' });
}]);
The single html page has the ng-view defined:
<div>
<div ng-view></div>
</div>
And some additional for the RegistrationModule:
angular.module('RegistrationModule')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/register/user', {
controller: 'UserRegistrationController',
templateUrl: 'webapp/modules/registration/views/register-user.html'
})
.when('/register/company', {
controller: 'CompanyRegistrationController',
templateUrl: 'webapp/modules/registration/views/register-company.html'
});
}]);
Ok, I got it. I defined some run block in the main module of my application with the redirection to the /login page. Here is the code:
angular.module("app", [...])
.run(['$location',
function ($location) {
$location.path('/login');
}])
If someone will get such an issue with refreshing the page in the future, please look for some run block defined in your code.
I just want to redirect a page without re-loading the page.
So I have tried the following
$location.path("/myPath");
But I doestn't redirect as expected. Since my module file is not getting hit while I do the same.
Here is my module file
angular.module("moduleName", [])
.config(["$routeProvider",
function ($routeProvider)
{
$routeProvider
.when("/myPath",
{
controller: "com/app/controller/myController",
templateUrl: "com/app/view/myTemplate"
}).otherwise(
{
redirectTo: "/somewhere"
});
}]);
Just give the controller name not its path
angular.module("moduleName", [])
.config(["$routeProvider",
function ($routeProvider)
{
$routeProvider
.when("/myPath",
{
**controller: "myController",**
templateUrl: "com/app/view/myTemplate"
}).otherwise(
{
redirectTo: "/somewhere"
});
}]);
angular.module("moduleName", [‘ngRoute’]); you need to mention the ngroute directive in angular 1.1.6 or later.
I'm a newbie with AngularJS and I got a problem that I think that's it's can be configurable in my routeProvider.
I have this route
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', function ($routeProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
}
]);
the problem: When I just type http://localhost:53379 I'm redirected to http://localhost:53379/#/ . Where come from the /#/ ?
By default, AngularJS will route URLs with a hashtag.
For example:
http://domain.com/#/home
http://domain.com/#/about
You can very easy remove the hashtag from the URL by setting html5Mode to true in your config:
$locationProvider.html5Mode(true);
so in your code it will be:
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
}
]);
Just after that you have to make sure that your backed will redirect all requests to your home page if you are doing "Single Page App"
Angular adds it by default. I don't know it this is the main reason, but one reason is that the routing doesn't work in older versions of IE. I had this problem in one angularjs app that didn't work in IE9 because of this reason.
Anyways, to remove the hashtag simply add $locationProvider.html5Mode(true); after your routing-declarations.
You can read more about it here: http://scotch.io/quick-tips/js/angular/pretty-urls-in-angularjs-removing-the-hashtag
This /#/ is used to create a single page application. the # is used to prevent that the page is completely reloaded. Angular then catches the new URL and loads the correct controller and partials depending on your route configuration.
Since HTML5 it is possible to remove this behavior with $location.html5Mode(true).
Source:
AngularJS documentation