Menu
I have the following service for getting an access token from my REST API:
var myServices = angular.module('myServices ', ['ngResource']);
myServices .factory('Auth', ['$resource',
function($resource){
return $resource('http://192.168.0.17:3333/login', {}, {
login: {method:'POST', params: { username: 'user1', password: 'abc123' }, isArray:false}
});
}
]);
And I have the following controller defined:
var myControllers = angular.module('myControllers ', []);
myControllers.controller('AuthCtrl', ['$scope', 'Auth', function($scope, Auth) {
$scope.login = function() {
console.log('Login');
Auth.login();
};
}]);
My login form is as follows:
<form ng-controller="AuthCtrl">
<input type="text" name="username" id="username" placeholder="Username" ng-model="username" />
<input type="password" name="password" id="password" placeholder="Password" ng-model="userpassword" />
<button type="submit" ng-click="login();">Login</button>
</form>
When I click the "Login" button it doesn't call the login() function of the AuthCtrl and I can't figure out why :s
682
I think that you are going to be upset with yourself. I was able to fix this by removing the space after the myControllers declarations. Check this:
var myControllers = angular.module('myControllers**YOU HAD A SPACE HERE**', []);
I change it to the following, and it worked. It looks like you are going to have the same issue with your service.
var myControllers = angular.module('myControllers', []); //no space after the myControllers
SEE MY CODE HERE
62
So the problem ended up being an np-app derivative. More specifically a missing derivative. I had the usual
<html np-app="myApp">
...
</html>
But when organizing my code and writing it the way that Google recommends, I realized that I had actually created another app. With this code for myControllers, which is an ill named module:
var myControllers = angular.module('myControllers ', []);
The login form is in a partial so I added a div around the form with the myControllers app directive:
<div ng-app="myControllers">
<form ng-controller="AuthCtrl">
<input type="text" name="username" id="username" placeholder="Username" ng-model="username" />
<input type="password" name="password" id="password" placeholder="Password" ng-model="userpassword" />
<button type="submit" ng-click="login();">Login</button>
</form>
</div>
AngularJS is written to be very VERY modular. You can have multiple apps, your controllers should only wrap the DOM elements that it needs to so if something isn't working double-check that you've added the necessary derivatives to the DOM ;)
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With