app.controller('LoginController', ['$http','$scope', function ($http, $scope, $location) {
$location.path("Home/Index");
}]);
browser give error that $location in undefined, how I troubleshoot it
You did not add $location to dependency notation:
app.controller('LoginController', ['$http','$scope', '$location', function ($http, $scope, $location) {
$location.path("Home/Index");
}]);
Related
I have easy service in my app.
var app = angular.module("appTest", []);
app.service('AuthService', function ($scope) {
$scope.write = function(){
console.log("service")
};
});
And I want to use it in my controller
var app = angular.module('appTest');
app.controller("LoginController", ['$scope', '$http', '$cookies',
'$cookieStore', '$rootScope', '$location',
function ($scope, $http, $cookies, $cookieStore, $rootScope, $location,
AuthService) {
AuthService.write();
}]);
But I have mistake http://prntscr.com/mckff7
I did my service by any case. Result the same.
I add my service by this way http://prntscr.com/mckgrt
You're not 'injecting' the AuthService into your controller. You're receiving it as an object, but you need to declare it in the array of strings too for it to actually be injected.
Your controller code should look like this:
var app = angular.module('appTest', []);
app.service('AuthService', function ($scope) {
$scope.write = function(){
console.log('hello world');
};
});
app.controller("LoginController", ['$scope', '$http', '$cookies',
'$cookieStore', '$rootScope', '$location', 'AuthService',
function ($scope, $http, $cookies, $cookieStore, $rootScope, $location,
AuthService) {
AuthService.write();
}]);
i want to test functions in angular js using jasmine. i have created one controller in which one scope function which is given below.
app.controller('NavigationCtrl', ['$scope', '$route', '$rootScope', function ($scope, $route, $rootScope) {
$scope.title="Hello World";
$scope.testMe = function () {
$scope.title = "Welcome";
}
}]);
Also, i want to call above controller function i.e $scope.testMe from another controller using jasmine test case. so, i create another controller and try to call functions from this controller.
app.controller('RunTestCaseCtrl', ['$scope', '$http', '$location', '$route', '$routeParams', '$rootScope', '$timeout', 'MDT_Constant', function ($scope, $http, $location, $route, $routeParams, $rootScope, $timeout, MDT_Constant) {
describe('mycontroller', function () {
beforeEach(module('app'));
it('scopeTestSpec',
inject(function ($controller, $rootScope) {
var $scope = $rootScope.$new();
$controller('NavigationCtrl', {
$scope: $scope
});
$controller.testMe();
expect($scope.title).toEqual('Welcome');
console.log('ok');
}));
});
}]);
this will give the error "module is not defined".
so, how can i call controller method from another controller using jasmine test
In our application we use the "controller as" syntax:
<div class="workspace-header" ng-controller="LoginController as loginCtl">
To define the LoginController, we define it as a TypeScript class:
class LoginController {
// variables here
constructor($rootScope, $http, $location, $cookieStore, AuthService, AUTH_EVENTS, localStorageService) {
// set variables
this.$rootScope.$on(AUTH_EVENTS.logoutSuccess, () => {
this.logout();
});
}
public login(credentials: any): void {
this.AuthService.login(credentials).then(() => {
// login success
}, () => {
// login failed
});
}
public logout() {
}
}
and instantiate it this way:
.controller('LoginController', ['$rootScope', '$http', '$location', '$cookieStore', 'AuthService', 'AUTH_EVENTS', 'localStorageService',
($rootScope, $http, $location, $cookieStore, AuthService, AUTH_EVENTS, localStorageService) =>
new LoginController($rootScope, $http, $location, $cookieStore, AuthService, AUTH_EVENTS, localStorageService);
])
After upgrading to AngularJS 1.3.0 this does not work at all. The "controller as" syntax is completely broken (when used in this fashion). We define a form on the page with ng-submit:
<form name="loginForm" ng-submit="loginCtl.login(dc.credentials)" novalidate>
... fields here
<button type="submit">Login</button>
</form>
The loginCtl.login() does nothing, and no errors are output to the console.
After a lot of debugging and some digging, I believe the breaking change in AngularJS is this:
https://github.com/angular/angular.js/issues/8876
https://github.com/angular/angular.js/pull/8882 (added note to documentation)
If I modify my controller as such:
.controller('LoginController', ['$rootScope', '$http', '$location', '$cookieStore', 'AuthService', 'AUTH_EVENTS', 'localStorageService',
function ($rootScope, $http, $location, $cookieStore, AuthService, AUTH_EVENTS, localStorageService) {
var loginCtrl = new LoginController($rootScope, $http, $location, $cookieStore, AuthService, AUTH_EVENTS, localStorageService);
// since controllers always return 'this', extend 'this' with the controllers
// properties and it's prototype's properties
_.extend(this, loginCtrl);
_.extend(this, loginCtrl["__proto__"]);
}
])
Then I can get it working, but this seems messy (and I'm not sure if I would have to chain up prototypes in case of superclasses).
Has anyone else run into this and have a better approach for defining these classes in TypeScript?
As PSL said, this is the problem:
.controller('LoginController', ['$rootScope', '$http', '$location', '$cookieStore', 'AuthService', 'AUTH_EVENTS', 'localStorageService',
($rootScope, $http, $location, $cookieStore, AuthService, AUTH_EVENTS, localStorageService) =>
new LoginController($rootScope, $http, $location, $cookieStore, AuthService, AUTH_EVENTS, localStorageService);
])
You can simply use LoginController in place of the giant arrow function.
See this comment in the issue you linked about how returning an object is incorrect; the function needs to be something that works when the new operator is used on it.
As PSL said but with $inject... I posed a similar question Angular 1.3 breaking changes - scope set but reset before $apply
I've put my answer here: http://plnkr.co/edit/NMPXFd67WLXHjhrfync2
//other dependencies deleted for brevity
.controller('LoginController', ['$scope', LoginController]);
LoginController.$inject = ['$scope'];
I'm new to angularjs and I'm working on a single page-app. I'm getting this error message that doesnt tell me where in my code that's throwing this error and I've went on angularjs' website to look up the error but I dont understand it.
This is the error message I'm getting,
Error: [ng:areq] http://errors.angularjs.org/1.2.8/ng/areq?p0=fn&p1=not%20aNaNunction%2C%20got%string
Any ideas on what might be throwing this error? Thanks
Edit: The error might have something to do with the way I declare my modules but I still can't figure it out. Here's a sippet of my code ...
var user = angular.module('user', ['ui.bootstrap','ngResource']);
user.controller("user", ["$scope", "$resource", "$location", '$state',
function($scope, $resource, $location, $state) { }]);
var saveObject = angular.module('saveObject', ['ui.bootstrap','ngResource'])
.factory('savedObject', function($resource) {});
var saveUser = angular.module('saveUser', ['saveObject']);
saveUser.service('saveUser', 'savedObject', function(savedObject) {});
var route = angular.module('route', ["ui.router", 'ngResource', 'saveUser'])
route.config(function($stateProvider, $urlRouterProvider, $locationProvider) {});
route.controller('add_userController', ["$scope", "$resource", '$state', '$timeout', '$rootScope', '$http', 'saveUser',
function($scope, $resource, $state, $timeout, $rootScope, $http, saveUser) {}]);
route.controller('add_familyController', ["$scope", "$resource", '$state', '$timeout', '$rootScope', '$http', '$window', 'saveUser',
function($scope, $resource, $state, $timeout, $rootScope, $http, $window, saveUser) {}]);
Your service definition seems to be messed up:
var saveUser = angular.module('saveUser', ['saveObject']);
saveUser.service('saveUser', 'savedObject', function(savedObject) {});
should be maybe
var saveUser = angular.module('saveUser', ['saveObject']);
saveUser.service('saveUser', ['savedObject', function(savedObject) {}]);
I'm trying to create a factory and use it cross routes in each controller but apparently I'm doing something wrong...
The app:
var app = angular.module('sam', ['ngRoute', 'ngGrid', 'ui.bootstrap']);
The factory
app.factory("User",function(){
return {};
});
The routes
// configure our routes
app.config(function($routeProvider) {
$routeProvider
// route for the main page which will direct to the buildings page
.when('/', {
templateUrl : 'web/pages/buildings.html',
controller : 'mainController',
controllerAs : 'buildings'
})
});
The controller
app.controller('mainController', ['$filter', '$http','$log', function($filter, $http, $log, User){
$log.log('hello!!!!!', User);
}]);
This prints : hello!!!!! undefined
you are missing 'User' in your controller.
app.controller('mainController', ['$filter', '$http','$log', **'User',** function($filter, $http, $log, User){
$log.log('hello!!!!!', User);
}]);
You forgot to include User as part of injection array
controller('mainController', ['$filter', '$http','$log', function($filter, $http, $log, User){
Should be:
controller('mainController', ['$filter', '$http','$log','User', function($filter, $http, $log, User){
app.factory("User",function(){
return {
show:function(){
alert('Factory called')
}
};
});
app.controller('mainController', ['$filter', '$http','$log','User', function($filter, $http, $log, User){
//that is the way you can call your factory
// you can call this factory function in any controller by injecting it.
User.show(); //will popup alert window.
}]);