I´m using loopback with angular JS. I have a Person model on loopback and generated the lb-services.js to get acces to the Person model.
I added the lb-services to the module:
(function() {
'use strict';
angular
.module('frontend', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ngResource', 'ngRoute', 'ui.bootstrap', 'toastr','lbServices']);
})();
However on my PersonsController when calling the createPerson() method I´m getting that Persons is undefined. I don´t understand why, since I have the dependecy on the controller.
This is my code:
angular.module('frontend').controller('PersonsController',['$scope','Person',function($scope){
$scope.person = {name:'guest',last_name:"none",age:55};
$scope.createPerson= function(){
console.log("CREATING PERSON...");
Person.create({name:$scope.person.name,last_name:$scope.person.last_name,age:$scope.person.age}).$promise
.then(function(){
console.log("Created person.")
});
};
}])
Can anyone help me out?
angular.module('frontend').controller('PersonsController',['$scope','Person',function($scope, Person){
just add Person as second parameter in function declaration and read the docs about DI in angular.
Related
So in my project I'm using only one module everywhere.
Here is how it looks:
angular
.module('moduleToMock', [
'ngAnimate',
'ngAria',
'ngMessages',
'ngRoute',
'ngMaterial',
'md.data.table',
'textAngular',
'ui.utils.masks',
'mp.colorPicker',
'mdPickers',
'ngCookies',
'ngIdle',
'toastr',
'ui.bootstrap',
'ui.bootstrap.typeahead'
])
You see a bunch of services in require section.
Right now I'm going to start writing tests. The error I'm getting is Module 'ngAnimate' is not available. I already found the same question discussed
So as I see, I should go with something like this:
beforeEach(function(){
module('moduleToMock');
module(function ($provide) {
$provide.value('ngAnimate', module('ngAnimate', []));
$provide.value('ngAria', module('ngAria', []));
$provide.value('ngMessages', module('ngMessages', []));
$provide.value('ngRoute', module('ngRoute', []));
$provide.value('ngMaterial', module('ngMaterial', []));
...
});
});
And this piece of code I have to insert in the beginning of each test of each service, factory, controller and etc.? Is there a way to do not copy-paste it each time I'm writing tests? Most of dependencies I have is not being injected into controllers, just declared as ngModule requirenment.
I'm using Jasmine for testing my AngularJS application. I have an Authenticaiton controller, which calls a function which I define in the scope from the Application controller. So:
1. AppController
$scope.setUser = function() {}
2. AuthenticationController
$scope.setUser(User);
I am testing the AuthenticationController, and setUser() is not inside the scope of AuthenticationController. How do I inject the scope/function from the AppController?
The error message:
TypeError: $scope.setUser is not a function
Should I mock the whole function? Is the structure smelly? What's the best way to do this?
EDIT:
In the real app, AuthenticationController gets injected into my dashboard-app.
AuthenticationController:
angular
.module( 'authentication', [])
.controller('AuthenticationController', AuthenticationController);
AuthenticationController.$inject = ['$scope', '$rootScope', 'AUTH_EVENTS', 'AuthenticationService'];
Dashboard:
angular
.module('dashboard', [
'authentication'
])
.run(run);
Info: Names are changed in my question to make it easier to understand.
inject $rootScope into your controllers.
AppController :
$rootScope.setUser = function() {}
AuthenticationController
$rootScope.setUser();
I've got a constant set up in my app.js file, and I've injected it into my controller (main.js), but it doesn't seem to want to work:
app.js
angular.module('fireApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'firebase'
])
.constant('FBURL', 'https://outcomes.firebaseio.com/')
...
main.js
var app = angular.module('fireApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'firebase'
]);
app.controller('MainCtrl', function ($scope, $filter, $timeout, $firebase, FBURL) {
...
}
Now I do question why I've got two modules set up. Is there a way around this? I'd like to keep my module, config and constant in my (app.js) file. How can I inject that .constant('FBURL') from my (app.js) file to my (main.js) file?
Any help is appreciated. Thanks in advance
Of course, there are different ways of doing this but I tend to structure my Angularjs app like so:
In the app.js file
angular
.module('fireApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'firebase'
])
.constant('FBURL', 'https://outcomes.firebaseio.com/')
and in the /controllers/main.js I have:
angular.module('fireApp')
.controller('myController', ['$scope','FBURL', function($scope,FBURL) {
}])
This should solve your problem. Note that I have't injected all the same things as you so you will need to add these.
I am trying to use the angular google maps directive with my app, but I keep getting an "undefined error"
This is my app.js
angular.module('app', ['cs'])
.config(['GoogleMapApiProvider'.ns(), function (GoogleMapApi) {
GoogleMapApi.configure({
// key: 'your api key',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
}])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
//routes
}])
and my controller
angular.module('cs.Controllers')
.controller('MapController', ['$rootScope', '$scope', '$window', '$document', 'MenuService', 'GoogleMapApi'.ns(),
function($rootScope, $scope, $window, $document, menuService, GoogleMapApi) {
$rootScope.menuList = menuService.all();
}]);
What could be the problem
For others that got here that had added the missing dependency declaration, see: angular-google-maps , undefined is not a function
It looks like they've gotten rid of the ns() function, but haven't updated the documentation yet:
https://github.com/angular-ui/angular-google-maps/pull/872/
https://github.com/angular-ui/angular-google-maps/issues/821
Update all instances of 'string'.ns() to 'uiGmapstring' in your code and you should be good.
You're missing the dependency declaration in your app.
angular.module('app', ['google-maps'.ns(),'cs.Controllers']
Here's a plunker using one of the project's demo pages. I changed it to use the new provider.
http://plnkr.co/edit/eUbkv2qKu92T9iUp7yAF?p=preview
Im trying to separate my Angular controllers into different files. Right now each one appears like this.
AddPropertyController.js
angular.module('myApp.controllers.addproperty', [])
.controller(...);
SearchController
angular.module('myApp.controllers.search', [])
.controller(...);
Now for each one of these I had to include them in the Angular myApp. via:
angular.module('myApp', [
'myApp.controllers.search',
'myApp.controllers.addproperty'
])
my question is, is there a way to just include them all at once instead of adding them individually? My first attempt was to name each module the same, angular.module('myApp.controllers',...) then just include myApp.controllers in the App. But that didn't seem to work... I guess Im asking is what is the best way to have separated controller files but in all in one module. Thanks for the help!
Check out the angularjs docs for info on controllers and adding them to app level modules...
For example for your code:
var myApp = angular.module('myApp',[]);
myApp.controller('SearchController', ['$scope', function($scope) {
$scope.search = 'Hola!';
}]);
myApp.controller('AddPropertiesController', ['$scope', function($scope) {
$scope.props = [];
}]);
You're basically attaching each controller to the myApp instance, so the app is aware of the controllers.
I would organize them like this:
MyController1.js
var MyController1 = ['$scope', function($scope) {
}];
MyController2.js
var MyController2 = ['$scope', function($scope) {
}];
MyModule.js
var app = angular.module('MyModule',[]);
app.controller({
MyController1: MyController1,
MyController2: MyController2,
etc
});
This is the similar to how the Angular source code is itself organized:
AngularPublic.js
ng Directives