using AngularJS to control HTML button redirects - javascript

I'm currently using a Bootstrap theme using Angular JS.
I have three menu buttons located at the top, all of which are going straight to the same page (users), But I would like them to redirect to other associated tabs. In my app.js I have the following routeProvider which should direct the buttons to other html/js files I have:
app.config(['$routeProvider', '$httpProvider',
function ($routeProvider, $httpProvider) {
$routeProvider.
when('/users', {
template: '<svn-userlist></svn-userlist>'
}).
when('/groups', {
// templateUrl: 'grouplist.html'
template: '<svn-grouplist></svn-grouplist>'
}).
when('/repos', {
template: '<svn-repolist></svn-repolist>'
}).
when('/users/:uid', {
template: '<svn-userform></svn-userform>'
}).
when('/groups/:gid', {
template: '<svn-groupform></svn-groupform>'
}).
otherwise({
redirectTo: '/users'
});
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);
How can I setup this routeProvider so that it functions properly?

Related

How can i set/remove locastorage particular url(route) opened in browser using angularjs?

When user open user.html(user route) need to store(this should be avilable in entire application) localStorage.setItem('user',"true");
when user close user.html(means user close this particular tab(url/route) in browser) need to remove localstorage .how can i achieve this help me out to move forward
below is my code
var app = angular.module('Test', ['ngResource', 'ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider){
$locationProvider.hashPrefix('');
$routeProvider
.when('/', {
templateUrl: 'home.html'
})
.when('/user', {
templateUrl: 'user.html',
controller: 'User'
})
.otherwise({
redirectTo: '/'
});
}]);
app.controller('User', function($scope) {
localStorage.setItem('user',"true");
});

Spring MVC + Angular routing gives 404

I have created a Spring MVC project along with a client side angular app.
For the angular app,
Here is the content of /webapp/resources/js/app.js file
'use strict';
// Declare app level module which depends on views, and components
var app = angular.module('myApp', [
'ngRoute',
'ngMaterial',
'rzModule'
]);
app.config(function ($routeProvider) {
$routeProvider
.when('/views/1', {
controller: 'MyController',
templateUrl: '/views/view1.html'
})
.when('/views/2', {
controller: 'MyController',
templateUrl: '/views/view2.html'
})
.when('/views/file-upload', {
controller: 'MyController',
templateUrl: '/views/file-upload.html'
})
.otherwise({
redirectTo: '/'
});
});
But the given templateUrls like "templateUrl: '/views/file-upload.html'" are seem to be not working.
The views are within /webapp/WEB-INF/views folder.
I want to know which addresses should I give inorder to route this views in app.js

$routeProvider / $locationProvider not a function in AngularJS Routing

I'm trying to create so-called 'SEO-friendly' URLs in AngularJS.
In my script.js for the routing I have:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.html5Mode(true);
when('/blog', {
templateUrl: 'blog.html',
controller: 'BlogController'
}).
when('/page/ideas', {
templateUrl: 'ideas.html',
controller: 'IdeasController'
}).
otherwise({
templateUrl: 'home.html'
});
}]);
app.controller("BlogController", function($scope) {
$scope.title = 'Blog';
});
app.controller("IdeasController", function($scope) {
$scope.title = 'Ideas';
});
To remove the # from the URL, I am enabling the html5 mode with:
$routeProvider.html5Mode(true);
however, this results in the following error:
Failed to instantiate module exampleApp due to:
TypeError: $routeProvider.html5Mode is not a function
Does anyone have a solution for this issue? It means that the content will not display from the views because of it.
Edit: for anyone wondering, the working code is:
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/blog', {
templateUrl: 'blog.html',
controller: 'BlogController'
}).
when('/page/ideas', {
templateUrl: 'ideas.html',
controller: 'IdeasController'
}).
otherwise({
templateUrl: 'home.html'
});
$locationProvider.html5Mode(true);
}]);
html5mode method is available there on $locationProvider provider.
You should include $locationProvider in your config phase to make that dependency available in config block & then enable html5mode for # free URL.
Code
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
//$routerProvider code here
$locationProvider.html5Mode(true);
}]);
Additionally you have to add <base href="/"> tag on the index.html page

Angular Set Controller and routeParams

I'm using routeProvider to set the controller and a route param when my application is configured. Here's the code that I'm using:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/person/:uuid/report', { controller: 'CandidateCtrl' }).
when('/person/:uuid/confirm', { controller: 'ConfirmCtrl', }).
when('/person/add', { controller: 'AddCtrl' })
}]);
However, the controller is not being set correctly. Additionally, when I set the controller with ng-controller in the page itself, the routeParams object is empty. What am I doing wrong?
Edit:
I've also tried this, which also isn't associating the controller with the page nor setting the route-params.
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/person/:uuid/report', { controller: 'CandidateCtrl', template: 'templates/report.html' }).
when('/person/:uuid/confirm', { controller: 'ConfirmCtrl', template: 'templates/confirm.html' }).
when('/person/add', { controller: 'AddCtrl', template: 'templates/add.html' })
}]);
Here's the controller that I'm testing this out with:
appController.controller('CandidateCtrl', ['$routeParams',
function($routeParams) {
console.log($routeParams);
}]);
Try to add templateUrl
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/person/:uuid/report', {
templateUrl: 'partials/CandidateCtrl.html', //TODO : replace with the good template
controller: 'CandidateCtrl'
}).
when('/person/:uuid/confirm', {
templateUrl: 'partials/ConfirmCtrl.html', //TODO : replace with the good template
controller: 'ConfirmCtrl'
}).
when('/person/add', {
templateUrl: 'partials/AddCtrl.html', //TODO : replace with the good template
controller: 'AddCtrl'
}).
otherwise({
redirectTo: 'Something' //TODO : replace with the good url
});
}]);
I was serving the views by via my web-mvc. I've since changed it to serve a layout and have the partial pages be kept in the resource folder.

Redirect to URL if routing is not available in AngularJS

I am using AngularJS routing for 4 pages for example a,b,c and d but in that page there're lots of link like e,f,g,h
What I want is if I write routing condition for page then it should do routing but if any other link comes like e or f then it should redirect it to particular link like window.top.location = e because otherwise it show blank pages and search for template
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/a', {
templateUrl: base_url+'a.html',
controller: 'a'
})
.when('/b', {
templateUrl: base_url+'b.html',
controller: 'b'
})
.when('/c', {
templateUrl: base_url+'c.html',
controller: 'c'
})
.when('/d', {
templateUrl: base_url+'d.html',
controller: 'd'
}).otherwise({
redirectTo: LINK_IN_WHICH_USER_CLICK;
});
$locationProvider.html5Mode(true);
}])
now the issue is with current code is I am not getting url in which user clicked and 2nd issue is I want it to redirect like window.top.location so that it refreshed properly and don't show blank page

Categories