friends, I am new in angular js and I was trying to work with angular Route, but when I click on #/home it gives me some strange URL http://127.0.0.1:3000/#!/home#%2Fhome
But By default, the otherwise condition is working fine http://127.0.0.1:3000/#!/home
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/list', {
templateUrl: 'Views/listing.html',
controller: 'mycontroller'
}).otherwise({
redirectTo: '/home'
})
}]);
you can try with
use $locationProvider
angular.module('myApp', ['ngRoute'])
.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('');
}]);
Related
I am trying to route a link to a .ashx service file, but it's not working. It works fine when I redirect to .html files, but when I redirect it to an .ashx, file it gives an error; file does not exist on current directory.
The following is my App.config code:
App.config(function($routeProvider, $locationProvider) {
$routeProvider.caseInsensitiveMatch = true;
$routeProvider
.when("/home", {
controller: "homeController",
templateUrl: "templates/home.html",
})
.when("/api", {
controller: "apiController",
templateUrl: "../ExclusiveAutoSales_Handler.ashx",
})
.when("/filter", {
controller: "filterController",
templateUrl: "templates/filter.html",
})
.otherwise({
redirectTo: "/home"
})
$locationProvider.html5Mode(true);
});
I can't implement angularJS routing in my page, when I first made it, it worked, but after browser returns nothing.
Code:
http://plnkr.co/edit/lIXeC0X6SkzXKcr8hoAp?p=catalogue
app:
angular.module('$routingApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'main.html'
})
.otherwise({
redirectTo: '/'
});
}]);
The problem is with your module name, as suggest by #sp00m, see the updated plunkr link below :
angular.module('routingApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'main.html'
})
.otherwise({
redirectTo: '/'
});
}]);
PLUNKR
I have define the config of my module:
angular
.module('myApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/models', {
templateUrl: 'views/models.html',
controller: 'ModelsCtrl',
controllerAs: 'models'
})
.when('/contacts', {
templateUrl: 'views/contacts.html',
controller: 'ContactsCtrl',
controllerAs: 'contacts'
})
.when('/constructor', {
templateUrl: 'views/constructor.html',
controller: 'ConstructorCtrl',
controllerAs: 'constructor'
})
.otherwise({
redirectTo: '/constructor'
});
});
Is it possible to get information about current user state without using angular-ui-router ?
You can inject the $location service and make use of its path() function.
Here is a link to the docs for location $location
angular.module('app')
.run(['$rootScope','$location',
function($rootScope, $location) {
$rootScope.$on('$routeChangeSuccess', function(e, current) {
console.log('Current route name: ' + $location.path());
}
}]);
I have a $routeProvider in my Angular JS application which won't load the template in the ng-view.
I've set up <html data-ng-app="myApp"> and <section data-ng-view></section.
It does neither load the template (doesn't even make an XHR), nor does it redirect on other paths (like /#/foo/bar/foo/ and it doesn't throw an error.
This is my configuration:
angular.module('myApp', ['myAppFilters'])
.config [
'$routeProvider',
($routeProvider) ->
$routeProvider
.when '/:year/:month',
templateUrl: 'partials/detail.html'
controller: DetailCntl
.when '/:user/:year/:month',
templateUrl: 'partials/detail.html'
controller: DetailCntl
.otherwise
redirectTo: '/'
]
Edit: Here's the compiled JS:
angular.module('myApp', ['myAppFilters']).config([
'$routeProvider', function($routeProvider) {
return $routeProvider.when('/:year/:month', {
templateUrl: 'partials/detail.html',
controller: DetailCntl
}).when('/:user/:year/:month', {
templateUrl: 'partials/detail.html',
controller: DetailCntl
}).otherwise({
redirectTo: '/'
});
}
]);
Edit #2: I found the solution by myself:
I had this line in my factories.coffee which overwrote the config:
angular.module('myApp', []).factory 'api', ($http, $q, $cacheFactory) ->
...
Now I have the config assigned to #myApp and am using #myApp.factory 'api', ... and it's working.
I found the solution by myself: I had this line in my factories.coffee which overwrote the config:
angular.module('myApp', []).factory 'api', ($http, $q, $cacheFactory) ->
...
Now I have the config assigned to #myApp and am using #myApp.factory 'api', ... and it's working.
Thanks for your support.
I've been getting errors when minifying my AngularJS app because manually injected dependencies aren't working how I'd expect. The following didn't work:
var config = app.config(function($routeProvider) {
$routeProvider
.when('/', {controller: 'PageCtrl', templateUrl: '../templates/home.html'});
.otherwise({redirectTo: '/'});
});
config.$inject = ['$routeProvider'];
The only thing that worked is:
app.config(['$routeProvider', function($routeProvider) {
...
}]);
Why does the first dependency injection technique work for controllers but not configs?
It is because app.config returns reference to the app (for chaining). This code works:
var config = function($routeProvider) {
$routeProvider
.when('/', {controller: 'PageCtrl', templateUrl: '../templates/home.html'})
.otherwise({redirectTo: '/'});
};
config.$inject = ['$routeProvider'];
app.config(config);
http://jsfiddle.net/ADukg/3196/