Module:
(function () {
"use strict";
angular.module("myModule", []);
})();
(function (module) {
"use strict";
module.config(['$httpProvider', function ($httpProvider) {
}]);
})(angular.module("myModule"));
Controller:
myModule.controller("MyController", function($scope) {
$scope.testvalue = "testvalue";
}
Now I want $scope.testvalue inside module.config,
(function (module) {
"use strict";
module.config(['$httpProvider', function ($httpProvider) {
var controllerdata = $scope.testvalue;
}]);
How can I do this? how to pass value from controller to module.config (both are in same module scope)
Not every variable has the privilege to appear in the config blocks. In your case, you cannot access the scope variable in your module's config block.
But there are alternatives:
Use a constant: Constants are available in config blocks, and are useful for static values that don't change.
Use a provider: If you need a custom configurable service available in your app, you can create an angular provider to make it customizable in the config blocks.
Related
I have a controller as shown below.
(function () {
"use strict";
var app = angular.module('Demo')
.controller('MainController', ['$rootScope', '$scope', '$location', 'curUser',MainController]);
function MainController($rootScope, $scope, $location, curUser) {
//some logic here
}());
I tried to include a third party module called ngIdle and the resultant code looks like below.
(function () {
"use strict";
var app = angular.module('Demo', ['ngIdle'])
.controller('MainController', ['$rootScope', '$scope', '$location', 'curUser','Idle', function ($rootScope, $scope, $location, curUser, Idle) {
}]).config(function (IdleProvider, KeepaliveProvider) {
// configure Idle settings
IdleProvider.idle(5); // in seconds
IdleProvider.timeout(5); // in seconds
KeepaliveProvider.interval(2); // in seconds
})
.run(function (Idle) {
// start watching when the app runs. also starts the Keepalive service by default.
Idle.watch();
});
}());
Now I get an error as Error: [$injector:unpr] Unknown provider: curUserProvider <- curUser <- MainController. Here's the curUser factory definition
(function () {
"use strict";
angular.module("services").factory("curUser", curUser)
function curUser() {}
}());
curUser is defined in the services module so it needs to be added as a dependency in your app. This would have been the case even before adding ngIdle.
var app = angular.module('Demo', ["ngIdle", "services"])
The factory function should also return something.
function curUser() {
return { username: 'fooBar'};
}
See working plunker.
I am working on an project and need to modify some code to resolve an error
directive:
(function () {
'use strict';
angular.module('myApp').directive("myDirective", function ($filter) {
return {
// code
};
});
})();
This throws an error with the minified version only.
I am using angular 1.5.9
I think I need to define $filter somewhere.
I assume you have the app already defined somewhere.
You seem to have not injected $filter, try this instead:
(function () {
'use strict';
angular.module('myApp').directive("myDirective", ["$filter", function ($filter) {
return {
// code
};
}]);
})();
When you are using minified version of angular you need to inject the dependencies as a separate string array. Otherwise, dependency injector unable to identify which is which
(function () {
'use strict';
angular.module('myApp')
.directive("myDirective",myDirective);
myDirective.$inject = ['$filter'];
function myDirective($filter) {
return {
// code
};
}
})();
I am trying to make a login page. I have one controller on my login page. On button click I am showing an alert. But it is not displaying. I created a module of controller that why I am not able to create plunker or fiddle. I will share my small code in which I write a controller.
Here is my code
LoginCtrl.js
define(function () {
'use strict';
function ctrl($scope, $state) {
$scope.login = function () {
alert("--")
};
}
ctrl.$inject = ['$scope', '$state'];
return ctrl;
});
controller.js
/*global define, require */
define(function (require) {
'use strict';
var controllers = angular.module('app.controllers', []);
controllers.controller('LoginCtrl', require('controllers/LoginCtrl'));
return controllers;
});
Make sure in your HTML file you have added the controller name to the parent element or the appropriate element.You need to give the same controller name in both your HTML file and also the js file.
Make sure your controller file is included in your index.html file.
In our project, we use requirejs with angularjs. We have a main application module (app) and module for all services (app-services), module for all controllers (app-controllers), module for all filters (app-filters). Modules app-controllers, app-services etc.. are added as dependencies to main app module.
main application module
var mainAppModule = angular.module('app', [
'ngResource',
'ngSanitize',
'app.controllers',
'app.directives',
'app.services',
'app.filters',
'app.routes'
]);
mainAppModule.run(['$location', '$rootScope', function ($location, $rootScope) {
$rootScope.sayHello = function(name) {
console.log("Hello" + name);
}
}]);
How can write the Karma/Jasmine tests for mainAppModule.run method?
Generally, logic should remain outside run method (e.g. included in controllers, services, directives, filters, etc.). You can, however, test your run method as follows. Using jasmine syntax:
//Updating this method to use $log for DI
mainAppModule.run(['$location', '$rootScope', '$log', function ($location, $rootScope, $log) {
$rootScope.sayHello = function(name) {
$log.info("Hello" + name);
}
}]);
//---------------------------
//Jasmine test
describe("app run", function () {
var $rootScope;
var $log;
beforeEach(module("app"));
beforeEach(inject(function (_$rootScope_, _$log_) {
$rootScope = _$rootScope_;
$log = _$log_;
}));
it("should expose sayHello function to $rootScope", function () {
expect(angular.isFunction($rootScope.sayHello)).toBe(true);
});
describe("sayHello function", function () {
it("should log 'Hello name'", function () {
spyOn($log, "info");
$rootScope.sayHello("test");
expect($log.info).toHaveBeenCalledWith("Hello test");
});
});
});
I believe that the best way is simply to use state-based verification that the "run" method executed. In the case of the specific example you provided, inject $rootScope into a test and verify that it has a property named "sayHello" of type function.
IIRC your application run methods should be called automatically by Jasmine when you call the angular.mock.module function from your test.
I'm just about to write tests for my angularjs-app. However when Im trying to run the test which is very simpel one i get the following error.
Error: [ng:areq] Argument 'MyPageController' is not a function, got undefined
I'll provide code for the setup of my controllers, config etc.
Route
var myPageApp = angular.module('myPageApp', ['ngRoute', 'ngAnimate', 'ngSanitize', 'app.controller', 'app.service', 'app.filter', 'app.config'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'App_AngularJs/partials/myPage/myPage.htm',
controller: 'MyPageController',
reloadOnSearch: false,
});
}]);
Controller
var myPageApp = angular.module('app.controller', ['oci.treeview', 'ui.bootstrap'])
.controller('MyPageController', ['$scope', '$routeParams', '$location', '$timeout', '$filter', '$modal', 'myPageService',
function ($scope, $routeParams, $location, $timeout, $filter, $modal, myPageService) {
init();
function init() {
$scope.page = { value: $routeParams.page || 1 };
}
}]);
Simpel test
'use strict';
describe('Testing MyPageController', function(){
var scope;
//mock Application to allow us to inject our own dependencies
beforeEach(angular.mock.module('myPageApp'));
//mock the controller for the same reason and include $rootScope and $controller
beforeEach(angular.mock.inject(function($rootScope, $controller){
//create an empty scope
scope = $rootScope.$new();
//declare the controller and inject our empty scope
$controller('MyPageController', { $scope: scope });
}));
// tests start here
it('should map routes to controllers', function () {
module('myPageApp');
inject(function ($route) {
expect($route.routes['/'].controller).toBe('MyPageController');
expect($route.routes['/'].templateUrl).
toEqual('App_AngularJs/partials/myPage/myPage.htm');
});
});
it('should have variable assigned = "1"', function(){
expect(scope.page.value).toBe(1);
});
});
My wildest and best guess is that i need to mock app.controller but how? Everything starts out with myPageApp which holds references to service, controller etc etc..
I think your issue is that routing and the controller are trying to load different modules viz "myPageApp" and "app.controller" and in your test with beforeEach you are trying to load 'myPageApp' module to which router is associated but not the controller.
So it seems to me that either you use same module for both router and controllers. Or try loading both modules in the test. Still I believe associating the router and controller with same module makes more sense.
An small example as below. Extract the application module in common js file (may be call it app.js)
var myApp = angular.module(
'myApp');
Now define router as
myApp.config(function ($routeProvider) {
$routeProvider
.when('/testUrl', {
templateUrl: '/myApp/views/test-view',
controller: 'TestViewController'
})
Similary define controller as
myApp.controller('TestViewController',[your dependencies goes here])
And now in your tests
beforeEach(module('myApp'));
This will work for sure. Hope it helps.