How do you connect server side properties into angular controller - angularjs

Question

I'm using the yeoman meanjs generator and am a bit confused. In my core Angular controller I have this setup:
angular.module('core').controller('HeaderController', ['$scope', 'Authentication', 'Menus',
function($scope, Authentication, Menus) {
$scope.authentication = Authentication;
$scope.isCollapsed = false;
$scope.menu = Menus.getMenu('topbar');
$scope.toggleCollapsibleMenu = function() {
$scope.isCollapsed = !$scope.isCollapsed;
};
// Collapsing the menu after navigation
$scope.$on('$stateChangeSuccess', function() {
$scope.isCollapsed = false;
});
}
]);
How does the Authentication object come into scope here? Where is created ?
For example if I wanted to add an object say foobar which was from my MongoDb what's the standard practice of getting this data into the angular controller from the server size?
David

Answer 1

Authentication is a service defined in the services folder which sits alongside to the controller folder you are in. Here is the service definition:
angular.module('users').factory('Authentication', [
function() {
var _this = this;
_this._data = {
user: window.user
};
return _this._data;
}
]);
What you see here is the standard way of referencing services in your controllers. In angular, you typically have services that have business layer logic including logic to talk to the backend over restful protocols.
To reference it, you simply give the name of the service in the controller definition and that service reference is made using dependency injection. There is an injector that runs behind the scene to find the service by that name, and create a reference to it.
So any other service that you create, create just like this Authentication service and then just put the name of the service in the controller definition in a similar fashion to use the service.
Now something referencing the MongoDb database does not make sense here as this is the front end portion of the stack. This code executes on the client browser and not the server.
The MongoDb database sits on the server and all the code that you see in the app folder in this stack is the server side code. All the code in the public folder is the front end code. Hope this helps.

Answer 2

I have not used this particular generator (I use angular-fullstack-gennerator). But it is likely similar.
Yours seems you need to use a CRUD sub generator. That will give you the ability to crate, read, update and delete. So what ever you call it you will then import this into the controller you need it in.
If you called it CRUDserverstuff, you could then import it like the line below:
angular.module('core').controller('HeaderController', ['$scope', 'Authentication', CRUDserverstuff, 'Menus',
function($scope, Authentication, CRUDserverstuff, Menus) {
//use it as you would any other objecte here
CRUDserverstuff.post(myData);
}
I am new to angular as well so one thing I am not sure of is if it needs to be or even should be put twice like that on the import lines. That confuses me a bit.
If you are not tied to using the MEAN stack generator I found the fullstack one very friendly to a beginner. The one thing to be careful to learn is the file structure. Full disclosure: I an NEW to angular and the MEAN stack. This is also my first answer ever on here so there you go.