I have used ng-init="isauthorised()" in my code to get call function after changing every URL
it call when page get refresh but I need this function to get call afer every click on ancher tag
One of the best things to do is to use the route provider to call a function before the page change happens. One example of this (modified from here) is:
$scope.$on('$locationChangeStart', function(event) {
// call your method here
});
The nice thing about this is you know your routine is going to get called and you don't have to modify the code for every anchor tag on the page. By the way, if you are interested in more information check the angular documentation here.
In your application if you want to trigger the function whenever the route changes,Below codes will use
$scope.$on('$routeChangeStart', function(next, current) {
... This Function will trigger when route changes ...
});
$scope.$on('$routeChangeSuccess', function(next, current) {
... This Function will trigger After the route is successfully changed ...
});
if you want to trigger the function, for particular routes, you give it in resolve functions in app.config
for example
myapp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
}).
when('/home', {
templateUrl: 'views/home.html',
controller: 'HomeCtrl',
resolve: {
token: function(Token){
... Trigger the function what u want, and give token as dependency for particular route controller ...
}
}
}).
otherwise({
redirectTo: 'index.html'
});
}]
);
Add ng-click="isauthorised()" or do you mean something else?
Related
For some reason, I can't seem to route to the add screen. What am I doing wrong? Here's my app.js
var moviesApp = angular.module('moviesApp', ['ngRoute']);
moviesApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/home.html',
controller: 'MoviesController'
})
.when('/add', {
templateUrl: 'partials/add.html',
controller: 'MoviesController'
})
.when('/edit', {
templateUrl: 'partials/edit.html',
controller: 'MoviesController'
});
});
Here's the anchor tag:
Add Movie
Which is contained within my home.html template which is a part of index.html.
The app doesn't crash...it just doesn't do anything.
Any thoughts on what I'm doing wrong?
It may be because of the change in the default hash-prefix in angularjs version 1.6. What you have written works in the given context: Proof
You can confirm this is the case by changing:
Add Movie
to:
Add Movie
If it works look at for possible solutions at:
AngularJS: ngRoute Not Working
If you want to make i behave as you expect (version 1.5) you could choose soultion 3 from the link:
3. Go back to old behaviour from 1.5 - set hash prefix manually
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
set up a route start event to help debug the problem
.run(function ($rootScope) {
$rootScope.$on('$routeChangeStart', function (event, next, current) {
console.log(event);
console.log(current);
console.log(next);
console.log('$routeChangeStart: ' + next.originalPath)
});
});
just add this to the end of your route config
Just as a side note I would use a state provider over a route provider. State providers let you define a hierarchy. It's a little harder to work with but much more flexible.
Currently I have $routeProvider.otherwise configured to go to a page behind the login, and if that page does not resolve, they go to the login screen. I would like an additional redirection to an error page when an XHR fails that is meant to redirect the user to a success page. I have found that if I register a listener on routeChangeError to redirect to /error instead of the defaults, the .otherwise is overridden and all mistyped links take the user to the error page. Does angular provide anything that allows for this? Or maybe I missed something in my code? I can write it if angular doesn't provide it, but I'm just wondering if there is a feature native to the framework.
$rootScope.$on("$routeChangeError", function () {
$location.path("/login")
})
app.config(['$routeProvider', function ($routeProvider, $route) {
$routeProvider.
when('/error', {
templateUrl: 'error.html',
controller: 'Error',
controllerAs: 'error'
}).
when('/status-info', {
templateUrl: 'status-page.html',
controller: 'StatusInfoController',
resolve: {
auth: function (SessionService) {
return SessionService.resolve()
}
}
}).
when('/', {
redirectTo: '/status-info'
}).
otherwise({
redirectTo: '/'
})
Additional info
The desired outcome is a website that responds to incorrect URLs in the usual way - defaulting to a specific page behind login or login if not authenticated, but with the extra twist of having a special error page for rejected $route.resolve() promises.
I would love to write a plunkr for you, but I can't get to it tonight. We're launching the beta this weekend! I don't necessarily need code if you can just set me in the right direction. Any help you can offer would be great.
I have a route defines as follows:
$routeProvider.
when('/projects/', {
controller: 'ProjectCtrl',
controllerAs: 'project_ctrl',
templateUrl: '/static/app/partials/project.html'
}).
After the login finishes I need the user to land on this link, hence in my controller I am using this:
vm.login = function(form) {
if (form.$valid) {
loginService.login(vm.loginFormData.username, vm.loginFormData.password);
loginService.setUpUser()
$location.url("/projects");
}
}
But unfortunately the controller associated with this view is not triggered, that is ProjectCtrl is not triggered. However when I click on the navigation link which uses in the dom, it works fine. Can someone please guide me here, may I am missing something conceptual.
Hence the larger question is how do I redirect a user in the controller using some APIs which also complies with ngRoute based controllers.
Try removing the last / in url so it matches $location.url("/projects");
$routeProvider.
when('/projects', {
i want create a route for angularJs which will be accessible only from application code and links. The main idea is to prevent the user to access the page after directly typing route url in browser's location bar.
For route configuration i use "ngRoute" module's $routeProvider.
I can't find an answer for this question. Is the thing i need possible?
Thanks in advance.
You can listen $locationChangeStart event. In your routes you can set a parameter (I've called it "restricted" but you could call it whatever you want) like this:
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'MainCtrl',
template: 'Allowed from anywhere.<br>Go to main page',
restricted: false
})
.when('/main', {
controller: 'MainCtrl',
template: 'Allowed from anywhere.<br>Go to restricted page',
restricted: false
}).when('/restr', {
controller: 'RestrictedPageCtrl',
template: 'Allowed only from main',
restricted: '/main'
});
});
If it's false, that means there's no restriction, if it's set to a path, then the route is only accessible from that path. And you can check it with this:
app.run(function($rootScope, $location, $route) {
$rootScope.$on('$locationChangeStart', function(event, next, current) {
var nextRoute = $route.routes[$location.path()];
var currentPath = current.split('#')[1];
if (nextRoute.restricted && nextRoute.restricted !== currentPath) {
$location.path('/');
alert('You are trying to reach a restricted page!!!!');
}
});
});
You can change the behaviour and redirect user to another link or prevent location change with event.preventDefault();.
Note that if you are not using hashtag (#) in your links (html5Mode) you should change the way to get the current link.
Here's a plunker.
I'm not clear why this isn't functioning. The rest of my code - sans the URL Param-based routing is working fine, I've tested that all. However, when I tried to include a URL argument in my url (base.url/route/:param) the '.otherwise' element of my routeProvider is firing instead of the appropriate controller designated in the routeProvider.
Here's the relevant bits of code:
module.config
app.config(function($routeProvider){
//http://docs.angularjs.org/tutorial/step_07
$routeProvider
.when('/home',
{
templateUrl: 'app/partials/home.html',
controller: 'HomeController'
})
.when('/implementation-reference/:ref-scope',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
.when('/projects',
{
templateUrl: 'app/partials/project_list_tpl.html',
controller: 'Projects'
})
.when ('/site-help',
{
templateUrl: 'app/partials/site-help.html'
})
.otherwise(
{
templateUrl: 'app/partials/404.html'
})
});
module.controller
app.controller('ImplReference', function($scope, $routeParams) {
alert('hi');
});
I get my 404 page when going to /implementation-reference/whatever.
Any ideas why I don't see the alert I put at the beginning of my controller, nor see any errors in the console?
As best as I can tell, the issue lay in use a dash in the param as defined in RouteProvider. I originally had:
.when('/implementation-reference/:ref-scope',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
when I changed it to this:
.when('/implementation-reference/:ref',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
...suddenly everything works fine.
I noticed this after adding a controller to the 'otherwise' that showed me the $route information. After drilling through it, I saw that the regex on the pre-defined route which had the param was only working on the part before the dash.
I've been mystified by this for hours, and can't imagine how this isn't documented more clearly somewhere. Perhaps this is some newbie mistake (I am new to this).