Fabritzio Villegas Fabritzio Villegas - 4 months ago 11
AngularJS Question

How can I organize angularjs factories/services/config/controllers files in different locations?

Currently I have this structure:

index.html
>views
login-view.html
report-view.html
>JS
config.js
>controllers
loginCtrl.js
reportCtrl.js
>factories
firebaseRefFactory.js


In config.js I have the routing of the templates, and the injection of firebase and such.
I can use the controllers properly, but if I try to use a factory, I get the Uncaught Error: [$injector:modulerr]

My index.html

<head>
<!-- STYLES-->
<link rel="stylesheet" type="text/css" href="CSS/modifier.css">
<link rel="stylesheet" type="text/css" href="CSS/base.css">
<link rel="stylesheet" type="text/css" href="CSS/skeleton.css">
<link rel="stylesheet" type="text/css" href="CSS/layout.css">
<!-- ANGULAR -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="JS/angular-ui-router.min.js"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<!-- FIREBASE -->
<script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<!-- ANGULARFIRE -->
<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.js"></script>
<!-- CONFIG -->
<script src="JS/config.js"></script>
<!-- FACTORIES -->
<script src="JS/factories/firebaseRefFactory.js"></script>
<!-- CONTROLLERS -->
<script src="JS/controllers/login.js"></script>
<script src="JS/controllers/reporte.js"></script>

</head>


My config.js

angular.module('Demo', ['firebase','ui.router']).config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('login');

$stateProvider.
state('login', {
url: '/login',
templateUrl: 'VIEWS/login-view.html',
controller: 'loginCtrl'
}).
state('report', {
url: '/report',
templateUrl: 'VIEWS/report-view.html',
controller: 'reportCtrl',
}); }]);


My loginCtrl where I want to use my factory

angular.module('Demo').controller('loginCtrl', ['$scope', 'firebaseRefFactory', function($scope, firebaseRefFactory){
alert(firebaseRefFactory.getRef()); }]);


My factory

angular.module('Demo').factory('firebaseRefFactory', ['', function(){
return function getRef(){
var text = "132";
return text;
} }]);


I tried changing the order of the scripts in the html file, and injecting the factory in the angular module in the config file.

Answer
angular.module('Demo').factory('firebaseRefFactory', ['', function(){
return function getRef(){
    var text = "132";
    return text;
} }]);

Modified to this:

angular.module('Demo').factory('firebaseRefFactory', function(){
return{
    getRef: function(){
        var text;
        text = '123';
        return text;
    }
    };
});

Thanks to TheSharpieOne, this guide us useful: https://github.com/johnpapa/angularjs-styleguide

Comments