I'm trying to trigger angularJS routing inside of a function in controller, but it throws back "Uncaught TypeError: Cannot read property 'path' of undefined". Can't really see where I missed $location injection, guess it's the reason.
var gameApp = angular.module('gameApp', ['ngRoute']);
gameApp.config(function($routeProvider, $locationProvider, $provide) {
$locationProvider.html5Mode(true);
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'home.html',
controller : 'mainController'
})
// route for the game page
.when('/game', {
templateUrl : 'game.html',
controller : 'gameController'
})
// route for the game over page
.when('/game-over', {
templateUrl : 'game-over.html',
controller : 'mainController'
})
// default
.otherwise({
redirectTo: '/'
});
});
And part of my game controller when I'm using router
gameApp.controller('gameController', ['$scope', '$location', function($scope, $location){
function gameLost($location){
var check = false;
console.log ('You lose! Your score is ')
$location.path('/game-over');
}])
Look at this code:
function gameLost($location) {
var check = false;
console.log ('You lose! Your score is ')
$location.path('/game-over');
}
Unless you invoke this function like this gameLost($location) (which I doubt) $location is going to end up as undefined in local function scope, overwriting $location service from parent closure scope.
So I think all you need to do is to remove $location paremeter from gameLost function definition:
function gameLost() {
var check = false;
$location.path('/game-over');
}
Related
Is there any possibility to call "dashboard.html" without using Some text? I wont to call "dashboard.html" from javascript.
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'loginRegister.html',
controller : 'loginRegister'
})
.when('/dashboard', {
templateUrl : 'dashboard.html',
controller : 'dashboard'
})
})
app.controller('loginRegister', function($scope, $http) {
$scope.showDashboard = function() {
// CALL dashboard.html FROM HERE
}
})
You can use the location function https://docs.angularjs.org/guide/$location
OR you can use the $window inside AngularJS controller
$window.location.href = '/index.html';
It think you will have a complete response here How to redirect to another page using Angular JS?
this is the code for redirecting in angular js app
$location.path('/dashboard');
Right now I'm calling below code :
http://localhost:8081/cgi/#/home
And it takes me to my home page.
My app.js is :
angular.module('myModule',
['ngRoute', 'ngCookies', 'ui.bootstrap',
'angularUtils.directives.dirPagination'])
.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/index', {
controller : 'homeController',
templateUrl : './app/views/index.html',
})
.when('/', {
controller : 'homeController',
templateUrl : './app/views/home.html'
})
.otherwise({
redirectTo : '/'
});
}])
Now I need to add extra parameter "debug", which I can store in my controller and if it is there I need to call some function.
I have tried adding below to my app.js
.when('/debug', {
controller : 'homeController',
templateUrl : './app/views/home.html',
})
and below line to my controller
$scope.debug = $routeParams.debug === 'true' ? true : false;
console.log($scope.debug);
in my controller :
var app = angular.module('myModule');
app.controller('homeController', function($scope, $http, $route) {
$scope.debug = $routeParams.debug === 'true' ? true : false;
console.log($scope.debug);
}
Also please include url you think would work in answer as I can understand from where to start looking for either routeProvider or $location functionality
But page has now stopped loading and I don't have any clue how can I make it work.
Please help
You need to inject the $routeParams service to the controller. Just add it as a parameter to the controller function.
var app = angular.module('myModule');
app.controller('homeController', function($scope, $http, $route, $routeParams) {
$scope.debug = $routeParams.debug === 'true' ? true : false;
console.log($scope.debug);
}
--- Update ---
Path
Use $location.path() === '/debug' to check if the current path is '/debug'. You need to inject the $location service.
var app = angular.module('myModule');
app.controller('homeController', function($scope, $http, $route, $location) {
$scope.debug = $location.path() === '/debug';
console.log($scope.debug);
}
Query Param
This will allow you to check if there is a query parameter keyed "debug" with the value of "true".
http://localhost:8081/cgi/#/home?debug=true
var app = angular.module('myModule');
app.controller('homeController', function($scope, $http, $route, $location) {
$scope.debug = $location.search().debug;
console.log($scope.debug);
}
I'm currently trying to build a simple routing Angular application with a Node/Express backend. Whenever I start up the server however, the page dies. Whenever I am able to get an error, it says "RangeError: Maximum call stack size exceeded".
I'm a bit confused as I know Im not doing anything intensive... What am I missing?
http://plnkr.co/edit/BzkcruqxDAKx5Kp3E26G
app.js
angular.module('NewsEye', ['newsEyeRoutes'])
.controller('mainController', function() {
//bind this to view-model
var vm = this;
vm.message = 'hey there! something is over here...';
})
.controller('homeController', function() {
var vm = this;
vm.message = 'Home page test.'
})
.controller('contactController', function() {
var vm = this;
vm.message = 'Contact test.'
})
app.routes.js
angular.module('newsEyeRoutes', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'views/home.html',
controller : 'homeController',
controllerAs: 'home'
})
.when('/contact', {
templateUrl : 'views/contact.html',
controller : 'contactController',
controllerAs: 'contact'
})
$locationProvider.html5Mode(true);
})
server.js, index.html, and a partial view can be found in the plunkr link.
in your routeprovider you are not giving an otherwise clause - which sets the default route.
Try adding one ...
.otherwise('/');
what url are you visiting when you get this error?
do you get it on all urls?
I am using controller in my Angularjs which gets question one by one from server and i want on specific condition this controller should call a routeprovider that should change my current view with templateUrl and put into a directive
my question is can i call route provider in controller rather than module
here is my CreateController
var CreateController = ['$scope', '$http', function ($scope, $http) {
$scope.model = {
};
................>
.................>
$scope.NextQuestion = function () {
$http.post('/Testing/NextQuestion', {
........................>
}).success(function (newdata) {
$scope.model = newdata;
var inccomplevel = $scope.model.servercomplevel;
if (qId == 10) {
here i need the code for routeProvider and directive please provide me help
}
......................>
}];
i did the route provider in app.js file there it works
here is the code for app.js when i do like this it works and when i shift the code of route provider
to the create controller in condition if qId == 10 there it does not work
var app = angular.module('app', ['ngRoute']);
app.controller('CreateController', CreateController);
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: 'Partials/TestCompleted.html',
controller: 'AppCtrl'
})
.otherwise({ redirectTo: '/' });
});
app.controller("AppCtrl",function ($scope) {
$scope.newmodel = {
}
});
Instead of trying to change the value of the templateUrl on the route, you should define another route. Then you can simply switch routes.
To change the route/view, you need update the path. You can do this using the $location service.
See AngularJS : How do I switch views from a controller function?
I'm learning Angularjs and i'm trying to create a service to do common tasks that need to be done for all my controllers.
I'm currently getting the error:
TypeError: Cannot call method 'getAuthHeader' of undefined
app.js
var token = "mytoken"
var baseUrl = "mybaseUrl";
var myezteam = angular.module('myezteam', ['ui.bootstrap']);
myapp.config(function($routeProvider) {
$routeProvider
.when('/profile',
{
controller: 'ProfileController',
templateUrl: 'template.html'
})
.otherwise({redirectTo: '/profile'});
});
// This gets the basic information that is needed for every page
myapp.service('base', function() {
this.getAuthHeader = function($http) {
// Set authorization token so we know the user has logged in.
return $http.defaults.headers.common.Authorization = 'Bearer ' + token;
}
});
profile.js
myapp.controller('ProfileController', ['$scope', '$http', function($scope, $http, base) {
base.getAuthHeader($http); // <-- THIS LINE IS THROWING THE ERROR
}]);
Why is the error occurring and how can I fix it? Also, is there a way to setup a config on my app so that I don't need to call base.getAuthHeader($http); in every controller, but it will automatically get called when every controller is loaded?
You're not injecting your service base into your controller. You need to inject it in the same way you did with $scope and $http
myapp.controller('ProfileController', ['$scope', '$http', 'base',
function($scope, $http, base) { ... });