How can I load my controllers at application Bootstrap - angularjs

I need to initialize the controller, that I use in another view from my start view.For this purpose I want to call my defined setup() method from that controller.
I can't do that because it is uninitialized until the user goes in that particular view defined by the $stateProvider.
How can I load the controller on the application startup, in order for my setup function from that controller to get initialized?
.controller('StartupCtrl', function($scope,$rootScope) {
vm=this;
var ctrl1=$rootScope.ctrl;
var config={};
// DO SOMETHING and create the config
ctrl1.setup(config);})
.controller('Ctrl1', function($scope,$rootScope) {
vm=this;
$rootScope.ctrl1=this;
vm.state="";
vm.setup(config){
vm.state=config.state
}
});

Module has a method run(), which can be used on the initial load of an app. You can define your setup method in there, or you can just set variables o the rootscope:
//... initialize myModule before this somewhere
myModule.run(function($rootScope) {
$rootScope.config = {}
//...
})
More information about module methods in the doc (look at run and configuration blocks sections) https://docs.angularjs.org/guide/module

Please try like this:
.controller('StartupCtrl', function($scope,$rootScope) {
vm=this;
var ctrl1=$rootScope.ctrl;
var config={};
// DO SOMETHING and create the config
ctrl1.setup(config);})
.controller('Ctrl1', function($scope,$rootScope, StartupCtrl) {
vm=this;
$rootScope.ctrl1=this;
vm.state="";
vm.setup(config){
vm.state=config.state
}
});

Related

Inject different helper functions Angular

I am trying to inject a few helpers (lodash and a few of my own) in Angular controllers so I have:
angular.module('app').factory("_", Lodash);
Lodash.$inject = ['$window'];
function Lodash($window) {
if ($window._)
return $window._;
}
angular.module('app').factory("_", Helper);
Helper.$inject = ['$window'];
function Helper($window) {
return {
test: function () {
return "test";
}
}
}
So I would like all helpers to be accessible under _ and I would define them in a few JS files ... Can this be done?
With my code only one of them work: lodash methods or test().
For services that don't require dependencies ($window isn't crucial here because it serves for no purpose and can be replaced with window or _ global) config block is a good place to define them, because constant services are already available there.
app.config(function ($injector, $provide) {
var lodash = $injector.has('_') ? $injector.get('_') : {};
angular.extend(lodash, window._);
$provide.constant('_', lodash);
});
app.config(function ($injector, $provide) {
var lodash = $injector.has('_') ? $injector.get('_') : {};
angular.extend(lodash, {
test: ...
});
$provide.constant('_', lodash);
});
When the service is defined this way, its value can be extended several times, the order of config blocks doesn't matter.
Alternatively, service value can be changed with decorator, in order to do that the service should be already defined.
You can not redeclare a factory. As you already noticed, this will overwrite the previous.
You could prepare the helper in separate files and register them in one factory call elsewhere in your app.

AngularJS - Accessing ng-init variables from run method

1) I have variables initialized in ng-init
Eg -
ng-init="password='Mightybear'";
2) I want to access it from the .run method.
Eg -
anguar.module("ngApp", [])
.run(function() {
//Access password here
});
Below scenarios I have tried, and did not work -
1) angular.module("ngApp", [])
.run(function($rootScope) {
console.log($rootScope.password) //undefined!!!
});
2) angular.module("ngApp", [])
.run(function($rootScope, $timeout) {
$(timeout(function() {
console.log($rootScope.password) //undefined!!!
});
});
You can not get ng-init value inside your run block
Angular LifeCycle
Config Phase (app.config) ($rootScope will not available here)
Run Phase (app.run) ($rootScope will available here)
Directive Gets Compile()
Then controller, directive link function, filter, etc gets executed.(ng-init is here)
If you want to get initialize value in run phase then you need to set that value in config phase.
If You want to set the value in config then you can take use of app.constant/provider which available in configuration phase, don't use $rootScope that is considered as bad pattern in AngularJS.
Code
var app = angular.module('app', []);
app.constant('settings', {
title: 'My Title'
})
app.config(function(settings) {
setting.title = 'Changed My Title';
//here can you do other configurarion setting like route & init some variable
})
app.run(function(settings) {
console.log(settings.title);
})
I'll let you a walkthrough, of how angular loads
angular module ---> .config ----> .run ----> controllers(ng-init)
now you can clear your approach.

How to pass dynamic data from one module controller to another module controller

I'm new to AngularJS, I want to pass dynamic value (username) from one controller in one module to another controller in another module. Routing and other things are working fine.
This is my code
loginModule.js
(function() {
var app = angular.module("waleteros", ["ngRoute","ui.bootstrap","ngCookies"]);
app.config(function($routeProvider) {
$routeProvider
.when("/",{
templateUrl:"views/login.html",
controller:"LoginCtrl"
})
}
})
app.js
(function() {
var app = angular.module("waleterosAdmin", ["ngRoute","ngGrid","ui.bootstrap","ngCookies"]);
app.config(function($routeProvider) {
$routeProvider
.when("/home",{
templateUrl:"homepage.html",
controller:"HomeCtrl"
})
}
})
loginCtrl.js
(function(){
var app = angular.module("waleteros");
var LoginCtrl= function($scope,$location)
{
$scope.signIn=function(email,pin)
{
//Some authentication code...
//Here i want to pass the username to homectrl.js
window.location.href="views/home.html"
}
}
app.controller("LoginCtrl", LoginCtrl);
})
HomeCtrl.js
(function(){
var app = angular.module("waleterosAdmin");
var HomeCtrl=function($scope)
{
//Here i want to get the username
}
app.controller("HomeCtrl", HomeCtrl);
})
you can share service between modules ,and thus pass value between modules,
please have a look here Share a single service between multiple angular.js apps ,and here sharing between modules with AngularJS?
You would use a service to persist the data, and then inject the service into your controllers:
app.service("SharedProperties", function () {
var _userName = null;
return {
getUser: function () {
return _userName
},
setUser: function(user) {
_userName = user;
}
}
});
Now inject SharedProperties and use the getter/setter
var LoginCtrl= function($scope,$location, SharedProperties)
{
$scope.signIn=function(email,pin)
{
//Some authentication code...
SharedProperties.setUser(user);
//Here i want to pass the username to homectrl.js
window.location.href="views/home.html"
}
}
var app = angular.module("waleterosAdmin");
var HomeCtrl=function($scope, SharedProperties)
{
//Here i want to get the username
var user = SharedProperties.getUser();
}
One word of warning about services is that they persist for the lifetime of the application, i.e. they are only instantiated once. I have run into scenarios, especially once routing is implemented, where I want to wipe the data off of the service to save space and replace it with new data (you don't want to keep adding to this service every time you look at a different view). To do this, you could either write a "wipe" method that you call to clean the service on the route changes, or stick the data into a directive (on its controller), put the controllers into their own directives, and have these require the first directive, so that the data is accesible from the controller's with the added benefit of being wiped once the DOM element is declared on is destroy (on a view change, for instance).

Uncertainty about the use of services in AngularJS

I have one question about using of services. I'm creating services in this way
and everything working properly. Here is my code.
var appName = angular.module('appName', ['configuration', 'angularSpinner']);
// this is whay that I creating services.
(function (module) {
var moduleName = function () {
return function(inputVar) {
// some work with
// inputVal variable
return result;
}
};
module.factory("moduleName", [moduleName]);
}(angular.module("appName")));
// in this way I'm using service into controller.
appName.controller('controllerName', function($scope, moduleName) {
});
My question is do I need to set 'moduleName' in 'appName'. Ie like this:
var appName = angular.module('appName', ['configuration', 'angularSpinner', 'moduleName']);
In both cases everything works properly. I would appreciate any comments and recommendations.
Best regards.
My question is do I need to set 'moduleName' in 'appName'. Ie like this:
No you do not, unless you actually create another module. In this case your moduleName is actually your factory name. If you wanted to create another module you would do this.
var myModule = angular.module('myModule', []);
myModule.factory('myFactory', [function(){ /* factory definition */ }]);
var app = angular.module('app', ['myModule']);
// this will now make myFactory available to my app
Your using the factory method which returns a function. If you need a service (a singleton object) then use the service method.
I create my services like this
var app = angular.module('app', []);
app.service('myService', [function(){
var serviceMember = { name: 'something' };
var serviceMethod = function() { };
// revealing module pattern
return {
serviceMember: serviceMember,
serviceMethod: serviceMethod
};
}]);
Yes, You needed
var appName = angular.module('appName', ['configuration', 'angularSpinner', 'moduleName'])
The 'appName' is Main Module name, and the 'moduleName' is sub module name. If you put the 'moduleName' with 'appName', then you can call 'modulname' functions wherever you use the 'appName'.
Main Module :
angular.module('appName',
Sub Module :
, ['configuration', 'angularSpinner', 'moduleName']
The concepts works by Dependency Injection Concept

How to inject a controller into a directive when unit-testing

I want to test an AngularJS directive declared like this
app.directive('myCustomer', function() {
return {
template: 'cust.html'
controller: 'customerController'
};
});
In the test I would like to inject (or override) the controller, so that I can test just the other parts of the directive (e.g. the template). The customerController can of course be tested separately. This way I get a clean separation of tests.
I have tried overriding the controller by setting the controller property in the test.
I have tried injecting the customController using $provide.
I have tried setting ng-controller on the html directive declaration used in the test.
I couldn't get any of those to work. The problem seems to be that I cannot get a reference to the directive until I have $compiled it. But after compilation, the controller is already set up.
var element = $compile("<my-customer></my-customer>")($rootScope);
One way is to define a new module (e.g. 'specApp') that declares your app (e.g. 'myApp') as a dependency. Then register a 'customerController' controller with the 'specApp' module. This will effectively "hide" the customerController of 'myApp' and supply this mock-controller to the directive when compiled.
E.g.:
Your app:
var app = angular.module('myApp', []);
...
app.controller('customerController', function ($scope,...) {
$scope = {...};
...
});
app.directive('myCustomer', function () {
return {
template: 'cust.html',
controller: 'customerController'
};
});
Your spec:
describe('"myCustomer" directive', function () {
$compile;
$newScope;
angular.module('specApp', ['myApp'])
/* Register a "new" customerController, which will "hide" that of 'myApp' */
.controller('customerController', function ($scope,...) {
$scope = {...};
...
});
beforeEach(module('specApp'));
it('should do cool stuff', function () {
var elem = angular.element('<div my-customer></div>');
$compile(elem)($newScope);
$newScope.$digest();
expect(...
});
});
See, also, this working demo.
I think there is a simpler way than the accepted answer, which doesn't require creating a new module.
You were close when trying $provide, but for mocking controllers, you use something different: $controllerProvider. Use the register() method in your spec to mock out your controller.
beforeEach(module('myApp', function($controllerProvider) {
$controllerProvider.register('customerContoller', function($scope) {
// Controller Mock
});
});

Resources