Develop Reference

AngularJS : Using factory inside a controller

This is my first attempt to use the Angularjs and I'm trying to create a service and use it inside a controller:
var appTest = angular.module("appTest", ["ngRoute"]);
var appTestControllers = angular.module('appTestControllers', []);
appTest.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
});
$locationProvider.html5Mode(false);
}
]);
appTest.factory("booksApi", function($http){
var _getBooks = function() {
return $http.get('http://localhost/editora-voo/website/books.json');
};
return{
getBooks: _getBooks
};
});
appTest.controller('HomeCtrl', ['$scope', '$http', function($scope, $http, booksApi) {
booksApi.getBooks().success(function(data) {
$scope.books = data;
});
}]);
But it is returning an error: Cannot read property 'getBooks' of undefined

You missed to add booksApi depnedency inside your controller dependency array, You should add it first and then use that inside the function of controller.
Controller
appTest.controller('HomeCtrl', ['$scope', '$http', 'booksApi', //<--missed dependency here
function($scope, $http, booksApi) {
booksApi.getBooks().then(function(response) {
$scope.books = response.data;
});
}]);
Plunkr Here

Defining a controller in a $routeProvider route that is located in a separate file

The original code is as follows:
(function() {
angular.module('test', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/test', {
templateUrl: '/templates/test.html',
controller: 'testCtrl'
})
.when('/test2', {
templateUrl: '/templates/test2.html',
controller: 'test2Ctrl'
})
.otherwise({
redirectTo: '/test'
});
});
})();
//ANOTHER FILE
(function() {
angular.module('test')
.controller('testCtrl', function($scope) {
$scope.name = "test";
})
.controller('test2Ctrl', function($scope) {
$scope.name = "test2";
});
});
There were no errors, but all that would show up in the templates was {{name}} instead of what was defined in the scope.
Then I tried moving the controllers into another module and dependency injected it in. Interestingly, even if the controllers were moved to a separate module it would not work:
(function () {
angular.module('test2', []);
angular.module('test', ['ngRoute', 'test2']);
})();
//ANOTHER FILE
(function() {
angular.module('test')
.config(function($routeProvider) {
$routeProvider
.when('/test', {
templateUrl: '/templates/test.html',
controller: 'testCtrl'
})
.when('/test2', {
templateUrl: '/templates/test2.html',
controller: 'test2Ctrl'
})
.otherwise({
redirectTo: '/test'
});
});
})();
//ANOTHER FILE
(function() {
angular.module('test2')
.controller('testCtrl', function($scope) {
$scope.name = "test";
})
.controller('test2Ctrl', function($scope) {
$scope.name = "test2";
});
});
In fact, in this one it threw an error that the controllers could not be found.
From my understanding this is happening because due to the nature of how the config block runs, and how it runs before the controllers have been registered.
One way I've solved this is by instead moving the controller and template into a directive and then using the directive itself as the template.
(function() {
angular.module('test')
.config(function($routeProvider) {
$routeProvider
$routeProvider
.when('/', {
template: '<test></test>'
})
.when('/test2', {
template: '<test2></test2>'
})
.when('/test3', {
template: '<test3></test3>'
})
.otherwise({
redirectTo: '/'
});
});
})();
I was wondering if anyone else had a way to support putting controllers into a router when your controllers are in a separate file.

You have been missing an () self executing function (IIFE) on the file of your controller.
//ANOTHER FILE
(function() {
angular.module('test2')
.controller('testCtrl', function($scope) {
$scope.name = "test";
})
.controller('test2Ctrl', function($scope) {
$scope.name = "test2";
});
})(); //<-- added here

You can organize the project in this way
templates/
test.html
test2.html
app/
app.js
controllers/
testCtrl.js
test2Ctrl.js
app.js
(function() {
angular.module('test', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/test', {
templateUrl: '/templates/test.html',
controller: 'testCtrl'
})
.when('/test2', {
templateUrl: '/templates/test2.html',
controller: 'test2Ctrl'
})
.otherwise({
redirectTo: '/test'
});
});
})();
html files
Once you add the controllers in your html file may no longer have the problem
<html ng-app='myApp'>
<body ng-controller='TextController'>
....
....
....
<script src="app/controllers/testCtrl.js"></script>
<script src="app/controllers/test2Ctrl.js"></script>
</body>
</html>

This code here was missing the () that would execute it...
(function() {
angular.module('test')
.controller('testCtrl', function($scope) {
$scope.name = "test";
})
.controller('test2Ctrl', function($scope) {
$scope.name = "test2";
});
});
Should be:
(function() {
angular.module('test')
.controller('testCtrl', function($scope) {
$scope.name = "test";
})
.controller('test2Ctrl', function($scope) {
$scope.name = "test2";
});
})();

Angularjs Restful using ngResource not working

I am trying to expose restful web service using angularjs ngResource using java as my backend everything seems to be correct but don't know What is wrong with my code
nothing gets displayed in browser help me with this
service.js
'use strict';
var employeeServices = angular.module('myApp.services',['ngResource']);
employeeServices.factory('Employees',['$resource',function ($resource){
return $resource('my service link', {},{
query:{method:'GET',isArray:true}
});
}]);
Controller.js
'use strict';
angular.module('myApp.controllers',[]).
controller('Myctrl1',['$scope','Employees',function ($scope ,Employees){
$scope.allemployees = Employees.query();
}]).
controller('Myctrl2',[function (){
}]);
app.js
'use strict';
angular.module("myApp", [
'ngRoute',
'myApp.controllers',
'myApp.services'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1',{templateUrl:'partials/partials.html',controller:'Myctrl1'});
$routeProvider.when('/view2',{templateUrl:'partials/partials1.html',controller:'Myctrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);

If you want to use service of one module in another module you have to inject it.
service.js
'use strict';
var employeeServices = angular.module('myApp.services', ['ngResource']);
employeeServices.factory('Employees', ['$resource', function ($resource) {
return $resource('my service link', {}, {
query: { method: 'GET', isArray: true }
});
}]);
Controller.js
'use strict';
angular.module('myApp.controllers', ['myApp.services']).
controller('Myctrl1', ['$scope', 'Employees', function ($scope, Employees) {
$scope.allemployees = Employees.query();
}]).
controller('Myctrl2', [function () {
}]);
app.js
'use strict';`enter code here`
angular.module("myApp", [
'ngRoute',
'myApp.controllers',
'myApp.services'
]).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/view1', { templateUrl: 'partials/partials.html', controller: 'Myctrl1' });
$routeProvider.when('/view2', { templateUrl: 'partials/partials1.html', controller: 'Myctrl2' });
$routeProvider.otherwise({ redirectTo: '/view1' });
}]);
try this

AngualrJS - Module - Controller Access Issue

I have an issue communicating from my application to a module i have created. I have create an AngularJS module below.
(function (document, window) {
'use strict';
var piCart = angular.module('piCart', []);
piCart.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/cart', {
templateUrl: "packages/pi-cart/segments/cart.html",
controller: 'CartController',
private : true
}).
when('/checkout', {
template: "Checkout Page",
// controller: 'CartController',
private : true
});
}]);
piCart.factory('TestFactory', function(){
return{
test : function(){
return 'test works';
}
}
});
piCart.controller("CartController",function(TestFactory){
console.log("Cart Controller Running");
console.log(TestFactory.test());
});
})(document, window);
This is loaded into my main application as so
var app = angular.module('app', ['ngRoute', "ui.bootstrap", "googlechart", "piCart"]);
Im trying to call the module TestFactory from the app.controller like so
app.controller('ProductController',function($scope){
$scope.addToCart = function(id){
//alert("clicked: "+id);
test = TestFactory.test();
console.log(test);
};
});
But im getting the error
ReferenceError: TestFactory is not defined

I believe you're getting that error because you did not inject TestFactory in the controller:
app.controller('ProductController', function($scope, TestFactory) {
// your code...
});

AngularJS test, can't find my controller

I met a problem with testing my controllers. I load them dynamically (lazy load, see after) so I wrote them like this :
angular.module('myApp').controllerProvider.register('DashboardCtrl', [
'$scope', function ($scope) {
$scope.foo = 'bar';
}
]);
I initialise my module like this :
var app = angular.module('myApp', [
'ngRoute',
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router'
]);
app.run([
'$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]);
app.config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
app.stateProvider = $stateProvider;
app.routeProvider = $urlRouterProvider;
app.controllerProvider = $controllerProvider;
app.compileProvider = $compileProvider;
app.filterProvider = $filterProvider;
app.provide = $provide;
$urlRouterProvider.otherwise('/');
$stateProvider
.state('dashboard', {
url : '/',
templateUrl : 'views/dashboard.html',
controller : 'DashboardCtrl',
resolve : {
deps : function ($q, $rootScope) {
var deferred = $q.defer();
curl('scripts/controllers/dashboard.js')
.then(function () {
$rootScope.$apply(function () {
deferred.resolve({});
});
});
return deferred.promise;
}
}
});
});
That works. Method is described there : http://ify.io/lazy-loading-in-angularjs/
But when I want to test, I get each time the error : Error: [ng:areq] Argument 'DashboardCtrl' is not a function, got undefined
My test script :
describe('Controller: DashboardCtrl', function () {
'use strict';
var DashboardCtrl,
scope;
// load the controller's module
beforeEach(function () {
var app = angular.module('cellierApp', [
'ngRoute',
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router'
]);
app.run([
'$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]);
app.config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
app.stateProvider = $stateProvider;
app.routeProvider = $urlRouterProvider;
app.controllerProvider = $controllerProvider;
app.compileProvider = $compileProvider;
app.filterProvider = $filterProvider;
app.provide = $provide;
});
inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
DashboardCtrl = $controller('DashboardCtrl', {
$scope : scope
});
});
});
it('should attach a list of awesomeThings to the scope', function () {
expect(scope.foo).toBeDefined();
expect(scope.foo).toBe('bar');
});
});
I don't know what I'm doing wrong. Is there someone who knows ? Thanks in advance

I'm not sure whether Karma has support for Script.js loading, but for sure it has support for Require.js.
Since you followed that tutorial, have you checked out the final example he gave on github (It contains unit testing as well)? The idea is that you can convert everything to use Require.js instead of Script.js and use Karma with karma-requirejs for the testing.
Although it is not too difficult, there are quite a lot of changes. I won't post the working code here, but I would suggest reading the following:
http://ify.io/unit-testing-lazily-loaded-angularjs-artefacts/ and http://karma-runner.github.io/0.8/plus/RequireJS.html
I can't link the final example because I don't have the reputation, but it's at the bottom of the tutorial you've linked.
To see a runnable example using Asynchronous Module Definitions with RequireJS, have a look at the sample app."

You don't load modules, but override the angular modules in this snippet:
var app = angular.module('cellierApp', [
'ngRoute',
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router'
]);
The proper call would be
beforeEach(function() {
// the module to be tested
module('cellierApp');
});
Also, the var declaration of the app is very crappy imo. You have angular as a container, use it, don't create objects on global closure for no reason. Change this:
var app = angular.module('myApp', [
'ngRoute',
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router'
]);
app.run...
To:
angular.module('myApp', [
'ngRoute',
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router'
])
.config([...
.run([....
The unit test itself can be simplified so much:
describe('Controller: DashboardCtrl', function() {
'use strict';
var scope;
// load the controller's module
beforeEach(function() {
module('cellierApp');
});
beforeEach(inject(function($controller, $rootScope) {
scope = $rootScope.$new();
$controller('DashboardCtrl', {
$scope: scope
});
}));
it('should attach a list of awesomeThings to the scope', function() {
expect(scope.foo).toBeDefined();
expect(scope.foo).toBe('bar');
});
});

In your test you are not registering your controller
put your code for creating you controller in your test
app.controllerProvider.register('DashboardCtrl', [
'$scope', function ($scope) {
$scope.foo = 'bar';
}
]);
however depending on your test setup your app and controller files should be loaded through your test system and you should use
beforeEach(module('cellierApp'));
instead of creating your app directly in your test