如何在不同位置組織angularjs factory / services / config / controllers文件？

Question

目前我有這個結構：

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

在config.js中，我具有模板的路由以及firebase等的注入。 我可以正確使用控制器，但是如果嘗試使用工廠，則會收到未捕獲的錯誤：[$ injector：modulerr]

我的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>

我的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',
}); }]);

我要使用工廠的loginCtrl

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

我的工廠

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

我嘗試更改html文件中腳本的順序，並將工廠注入config文件中的angular模塊。

Answer 1

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

修改為：

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

感謝TheSharpieOne，該指南對我們很有用： https : //github.com/johnpapa/angularjs-styleguide

Answer 2

您的DI中有一個空洞的爭論：

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

也許嘗試一下？ 您在那里所擁有的應該是除此之外的。 盡量避免使用DI的數組符號，如果縮小JS，請使用ng-annotate。

Answer 3

我建議您使用requirejs。 Requirejs是區分不同網絡文件中js的好選擇，因為所有必需的js文件都已在main.js中配置。

鏈接requirejs ：

如何在不同位置組織angularjs factory / services / config / controllers文件？

問題描述

3 個解決方案

解決方案1
1 已采納 2014-08-24 23:34:04

解決方案2
0 2014-08-22 23:23:22

解決方案3
0 2016-07-20 03:05:50

如何在不同位置組織angularjs factory / services / config / controllers文件？

問題描述

3 個解決方案

解決方案1 1 已采納 2014-08-24 23:34:04

解決方案2 0 2014-08-22 23:23:22

解決方案3 0 2016-07-20 03:05:50

解決方案1
1 已采納 2014-08-24 23:34:04

解決方案2
0 2014-08-22 23:23:22

解決方案3
0 2016-07-20 03:05:50