Question

我是从GWT来到AngularJS并试图对这种转换感到满意。我开始了一个新项目，并通过Angular和JS开发确定哪个项目结构和依赖关系管理是最好的。

走动后我发现Angular-ui-rout（$ stateProvider）是最好的导航和嵌套视图以及文件依赖，似乎最好的候选者是RequireJS。所以我按照这样构建我的项目：

appConfig.js：

myModule.lazy = {
    controller: $controllerProvider.register,
    directive: $compileProvider.directive,
    filter: $filterProvider.register,
    factory: $provide.factory,
    service: $provide.service,
    animation: $animateProvider.register
};

for (var i = 0; i < states.length; i++) {
    $stateProvider.state(states[i]);
}

状态在单独的文件中定义：

var states=
[
{
    name: 'landingPage',
    url: '/',
    templateUrl: 'partials/landingPage/landingPage.html',
    resolve:{load:function($q, $i18n){
        return resolver ($q,$i18n,['landingPage','general'],
            [
                'partials/landingPage/landingPageController.js',
                'partials/landingPage/landingPageService.js'
            ]);
    }
    }
},
{
    name: 'a',
    templateUrl: 'partials/application/application.html',
    resolve:{load:function($q, $i18n){
        return resolver ($q,$i18n,'',
            [
                'partials/application/applicationController.js',
                'partials/application/applicationService.js'

            ]);
    }
    }
},

{
    name: 'a.defaultDash',
    url: '/defaultDash',
    templateUrl: 'partials/dashBoards/defaultDash/defaultDash.html',
    resolve:{load:function($q, $i18n){
        return resolver ($q,$i18n,[],
            [
                'partials/dashBoards/defaultDash/defaultDashController.js',
                'partials/dashBoards/defaultDash/defaultDashService.js',

            ]);
    }
    }
}];

所以我根据状态中的定义加载了懒惰的js。（第一个问题是这是最好的方法吗？）

下一步是开发我的指令，哦......，在我的应用程序中将超过50个指令。其中一些非常复杂并且在特定页面中使用过一次，因此我们可以说它们不是通用指令，在这种情况下，我将把代码放在一个单独的js文件中，使用单独的html for directive模板并将js依赖项添加到相关状态，所以当要求状态（父视图）时，将加载指令文件。

但是我的一般指令怎么样？为每个文件分隔js / html文件是没有意义的，所以我将所有代码放在一个单独的js文件中并将脚本链接放在我的index.html中。我的问题是难以维护单个文件，只是想确保这是在Angular js中运行大型项目的最佳方法吗？正如我所提到的，我来自GWT（Full java env），具有完整的OO概念，接口，继承和文件分离。

谢谢，

Answer 1

我想你可能会把马车放在马前。你真的需要立即拆分你的应用程序吗？目前是否正在影响性能？我相信你的答案是否定的，而且你正试图过度设计你的解决方案，而不是专注于获得结果。话虽这么说，如果你不得不这样做，它可以在将来完成，因为事物有多么棱角分明（关注点分离等）。

默认情况下，Angular不会做＆＃39;模块＆＃39;很好。 I did try out a project a while ago on github for modules which worked okay，但不是很好（当时，这可能会改变）。来自一个骨干项目，我试图像你一样做;使用RequireJS做AMD。最后，即使在一个非常大的项目中，我们也从未真正使用过任何一个项目。使用ng-boilerplate项目，我们使用grunt concat并缩小所有javascript。最终结果是一个大约500kb的Web应用程序大小（包括字体和图标）。

如果你真的想拥有一个合适的模块化设备。角度项目，你总是可以将它分成不同的应用程序（即不同的功能/页面可以是不同的应用程序）。你这样做的方法（使用resolve）不是决定了什么（在模板化之前加载数据）。我尝试了这一点，但我发现最终存在依赖关系的问题，这给我的计划带来了麻烦。

TLDR;过度优化过快。尝试在没有RequireJS的情况下首先使用Angular。如果需要，您可以稍后添加AMD。

Answer 2

对于通用指令库，我更喜欢将它们放在一个单独的项目目录中。每个指令都存在于自己的.js文件（和.html模板，如果适用）中，我使用grunt将源文件合并为一个。这样可以避免维护指令库的一些麻烦，同时还可以轻松地将库包含在主项目中。

如果您采用这种方法，我建议使用grunt-angular-templates，一个用于“自动缩小，组合并使用$ templateCache自动缓存HTML模板”的grunt插件，以便将html模板合并为一个.js文件，可以使用grunt-contrib-concat与所有其他.js文件连接。

Answer 3

出于导航目的，我在所有项目中使用它：https://github.com/ajoslin/angular-mobile-nav 它还具有导航效果，例如幻灯片和页面的模态演示。它还独自管理历史。

Answer 4

您可以将angular-app-master项目（https://github.com/angular-app/angular-app）建模到项目中。它将帮助您将项目作为良好的项目结构和编码标准。

项目结构和文件依赖性

4 个答案: