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?
Related
I have an Angular app which makes some calls (POST and GET for now) to a backend service (powered by node.js with a REST interface). While developing the app itself I noticed it makes two requests to the backend each time a button is pressed or a page is loaded. Curiously everything works but each time I press some button the backend gets two requests. I am not using any fancy package only ngRoute, ngResource and routeStyles for css partials. Anybody has an idea of what could be the reason why the app behaves like that?
I actually found another question similar to this one but the OP there was using express aside of Angular and there is no answer...
EDIT added some code.
in app.js:
'use strict';
var cacheBustSuffix = Date.now();
angular.module('myApp', ['myApp.controllers', 'myApp.services', 'myApp.filters', 'ngRoute', 'ngResource', 'routeStyles'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider
.html5Mode({enabled: true,
requireBase: false})
.hashPrefix('!');
$routeProvider
.when('/', {redirectTo: '/myApp'})
.when('/myApp', {
templateUrl: '/partials/home.html?cache-bust=' + cacheBustSuffix,
controller: 'ctrlHome'
})
.when('/myApp/search', {
templateUrl: '/partials/search.html?cache-bust=' + cacheBustSuffix,
controller: 'ctrlSearch'
})
.when('/myApp/list/', {
templateUrl: '/partials/list.html?cache-bust=' + cacheBustSuffix,
controller: 'ctrlList'
})
// a bunch of other redirections
.otherwise({
templateUrl: '/partials/404.html?cache-bust=' + cacheBustSuffix,
controller: 'ctrl404'});
}]);
from services.js:
'use strict';
var app = angular.module('myApp.services', ['ngResource']).
factory('List', function ($resource) {
return $resource(WSROOT + '/search', {}, {get: {method: 'GET', isArray: false}});
});
from controllers.js, one controller that makes multiple requests
var controllers = angular.module('myApp.controllers', []);
var ctrlList = controllers.controller('ctrlList', function ($scope, $window, List) {
$window.document.title = 'myApp - List';
List.get({}, function (data) {
// $scope.res is an array of objects
$scope.res = data.response;
$scope.nitems = data.response.length;
});
});
ctrlList.$inject = ['$scope', 'List'];
And the network call when loading the index+home and navigating to some other page. As you can see, it first loads the index page, the scripts and styles listed there (not shown), then the home where I have a controller similar to the one above and suddenly two wild request to my web server:
Can we see your HTML files? I had this problem a while back. My solution was that by declaring a controller in the routing, and in the pages, a double post was created as each controller was loaded twice.
//Home
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home.html',
controller: 'HomeCtrl' // <-- This goes away
}
}
})
I am new with anglarjs and I am working on ng-view example which is available here, actually the problem is that when I run application in firefox it show me only text in index.page, not shown any result related to angularjs.
index.html
<div ng-controller="MainCtrl as main">
Choose:
Moby |
Moby: ch1 |
Gatsby |
Gatsby: ch4 |
Scarlet Letter<br/>
</div>
<pre>$location.path() = {{main.$location.path()}}</pre>
<pre>$route.current.templateUrl = {{main.$route.current.templateUrl}}</pre>
<pre>$route.current.params = {{main.$route.current.params}}</pre>
<pre>$routeParams = {{main.$routeParams}}</pre>
app.js
The controller is define here.
var myApp = angular.module('ngviewExample',['ngRoute'])
.config(['$routeProvider','$locationProvider',
function ($routeProvider,$locationProvider){
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookCtrl',
controllerAs: 'book'
});
$locationProvider.html5Mode({
enabled : true,
requireBase : false
});
}])
.controller('MainCtrl', ['$route', '$routeParams', '$location',
function($route, $routeParams, $location) {
this.$route = $route;
this.$location = $location;
this.$routeParams = $routeParams;
}])
.controller('BookCtrl', ['$routeParams', function($routeParams) {
this.name = "BookCtrl";
this.params = $routeParams;
}]);
All the angularjs files are loading fine but it's not showing any error in Firebug console. But when I debug this code I don't know why it go inside the following code on accessing the url http://localhost:8383/TestingDirective/index.html
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookCtrl',
controllerAs: 'book'
});
Also shown in the snap-shot.
Can anyone please tell me what I am missing here, only text of index.html page show on the page and nothing else.
Any help would be appreciated.
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 am setting up a simple routing configuration with angular-route-segment and Angular is throwing this error on app load:
TypeError: Cannot read property 'untilResolved' of undefined
Neither Angular nor angular-route-segment provide anything more helpful in the way of error messages.
app.js:
(function () {
'use strict';
var app = angular.module('emailHandlerApp', [
// Angular modules
'ngAnimate', // animations
'ngRoute', // routing
'ngSanitize', // sanitizes html bindings (ex: topnav.js)
// 3rd Party Modules
'ui.bootstrap', // ui-bootstrap (ex: carousel, pagination, dialog)
'route-segment', // angular-route-segment
'view-segment', // angular-route-segment
]);
console.log("app loaded"); // just for debug!
})();
config.route.js:
(function () {
'use strict';
var app = angular.module('emailHandlerApp');
// Configure the routes and route resolvers
app.config(function ($routeSegmentProvider, $routeProvider) {
$routeSegmentProvider.options.autoLoadTemplates = true;
$routeSegmentProvider.options.strictMode = true;
$routeSegmentProvider
.when('/', 'emailHandler')
.when('/unsubscribe', 'emailHandler.unsubscribe')
.when('/redirect', 'emailHandler.redirect')
// Base shell
.segment('emailHandle', {
templateUrl: 'app/shell.html',
controller: 'baseController',
controllerAs: 'vm',
})
.within()
// Dashboard
.segment('unsubscribe', {
templateUrl: 'app/unsubscribe/unsubscribe.html',
controller: 'unsubscribeController',
controllerAs: 'vm',
dependencies: ['emailId']
})
// Recruiting
.segment('redirect', {
templateUrl: 'app/redirect/redirect.html',
controller: 'redirectController',
controllerAs: 'vm',
dependencies: ['rdId']
})
;
$routeProvider.otherwise({ redirectTo: '/' });
})
})();
Answering my own question because I'm 99% sure I'll probably Google this again a month from now.
This one is super simple - just a matter of code blindness and a slightly uninformative error message. angular-route-segment throws this when there's a name out of place somewhere in your segment tree.
In my case, I had mistyped .segment('emailHandle', { ... }) when I meant emailHandler, and then it barfed once it hit the .within(). I felt pretty dumb once I saw it.
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');
}