Question

我已经阅读了很多关于网站文件夹结构（开发和部署）的文章和问题，但仍然误解了下面的问题。

我标记了当前的文件夹结构：

橙色 - 看起来像 lib 或供应商文件夹，我想要存储独立的组件;
Blue-文件夹包含我自己的，相对于当前项目（应用程序）文件;
绿色 - 准备部署文件夹，其中包含缩小的＆amp;仲裁文件，曾经包含在index.html中。

有几个问题我想找到答案：

是否正确，最佳做法是仅部署到网络服务器 dist 文件夹？
我应该连接 bower_components ＆amp; app javascript文件到单个app.min.js文件中？我应该将独立组件与应用程序文件和超级订购混为一谈吗？
我是否应该将视图文件夹模板部署到目录文件夹？

将所有图像（css图像，应用图像，插件图像）混淆为单个 dist / images 文件夹是否正确？

在视图文件夹中存储指令模板是否正确？

与AngularJS client / app / js / common / helpers.js 文件无关 - 我无法找出最明显的位置（可能是原型，自定义函数或对象）

我会很高兴得到任何帮助，ty。

Answer 1

以下是我使用bower和gulp为一些不同的企业Angular SPA使用的设置。

我的app文件夹和你的一样，但我也保留了我的index.html模板。 Gulp使用它并注入我想要的CSS / JS文件（我发布时的.min文件）。我把它放在网站的根目录中（用于调试）。

我将我的bower和app脚本分成lib.min.js / app.min.js.我不是自己缩小凉亭的东西，而是将所有.min文件连接起来。我缩小并连接我的应用程序脚本。

而不是你的dist文件夹，我在obj / client中释放所有内容（VS自动为临时文件创建obj文件夹）。我不会在解决方案中包含此内容（我不希望它在源代码管理中）。

我没有要发布的观看文件夹。使用gulp一切都存储在Angular模板缓存中（它将与app.min.js放在一起）。你会看到这些也会得到一个随机字符串作为后缀（用于缓存清除）。

最后，我的部署仅包含index.html，app（在您的情况下为dist）和bin文件夹以及web.config。我排除了gulpfile，bower.json等。

Answer 2

这是我正在建立的名为Simple Team的角度网站的目录结构，它使用Browserify绑定在一起。

这是我的文档根目录，我的框架启动并提供公共文件。我的所有JS和HTML都绑定到app.min.js。

这就是我将指令构建为具有视图require()'的模块的方法。

"use strict"

require('moment')
require('angular-ui-router')
require('angular-ui-sortable')
require('angular-gravatar')
require('angular-elastic')
require('angular-local-storage')
require('angular-moment')

require('./routes.js')
require('./modules/focusMe')
require('./modules/selectize')
require('./modules/tagData')
require('./modules/www')
require('./modules/uiSrefActiveIf')

angular
    .module('simple.team', [
        'ngFileUpload',
        'ui.router',
        'ui.sortable',
        'ui.gravatar',
        'ui.bootstrap',
        'selectize',
        'angularMoment',
        'angular-loading-bar',
        'ng-showdown',
        'LocalStorageModule',
        'monospaced.elastic',
        'textAngular',

        'simple.team.uiSrefActiveIf',
        'simple.team.routes',
        'simple.team.focusMe',
        'simple.team.ngBindHtmlUnsafe',
        'simple.team.bytes',
        'simple.team.strings',
        'simple.team.auth',
        'simple.team.tagData',
        'simple.team.userData',
        'simple.team.www'
    ])
    .config(function($urlRouterProvider, cfpLoadingBarProvider) {
        $urlRouterProvider.otherwise('/projects')
        cfpLoadingBarProvider.includeSpinner = false
    })
    .controller('AppCtrl', function($state, $http, $rootScope) {
        // Controller code
    })

路线和控制器

angular
    .module('simple.team.routes', [])
    .config(function($stateProvider) {
        $stateProvider
            .state('projects', {
                url: '/projects',
                template: require('./layouts/projects.html'),
                controller: ProjectsCtrl,
                controllerAs: 'ctrl'
            })
            .state('projects.card', {
                url: '/card/?cardId',
                template: require('./layouts/card.html'),
                controller: require('./controllers/card.ctrl.js'),
                controllerAs: 'ctrl'
            })

Answer 3

抱歉，我没有足够的时间做一些研究并写下所有答案我可以稍后再编辑..

问题1：

是否正确，最佳做法是部署到仅限网络服务器的dist文件夹？

回答，是

这是一个示例目录结构，其中源代码（src）与临时预编译资产（.tmp）分开，这些资产与最终分发文件夹（dist）分开。 src文件夹包含更高级别的语言，例如jade，typescript和scss ; .tmp包含已编译的js，css和html文件;而 dist文件夹仅包含经过优化以在生产中提供的连接和缩小文件。

HONG KONG  
STEEL GROUP  
Invoice Date  
09.12.2015  
Number  
90035565  
Delivery note no.  
80006292  
SAP Order number  
18915  
Customer number  
105226  
Order number  
RCHEB 5114 1-1 24-11   
Shipped from Saldanha bay, South Africa, per vessel  
LAN MAY  
Bill of lading date  
14.11.2015  
Port of discharge  
ANY CHINESE PORT  
Reference no.  
Agreement/Contract/Order  
OMl/24/ll  
Port    Wet Metric Tons Dry Metric Tons  
ANY CHINESE PORT    202,079.000 199,957.171  
Product % USD Value  
Steel Ore   50%;29% 3,500.00  


HONG KONG  
TRADING CORP  
Invoice Date  
21.12.2015  
Number  
90035792  
Provisional Invoice No
90033952
SAP Order number
50005313
Customer number  
102872  
Order number  
KITST 5007 1-1 21-11  
Shipped from Saldanha bay, South Africa, per vessel  
HEBEI SUCCESS  
Bill of lading date  
15.06.2015  
Port of discharge  
BEILUN  
Reference no.  
WUGANG  
Agreement/Contract/Order  
OM6/21/ABG  
Port    Wet Metric Tons Dry Metric Tons  
BEILUN  124,772.000 122,214.174  
Product %   USD Value Sishen 63.5%, 8 mm Fine Ore  
Steel Ore   50%,10% 2,500.00  
Iron Ore    20%,80% 1,500.00

以下链接可以找到更多信息

Gulp Best Practices You Can Use Today to Radically Improve Your Development Experience

Answer 4

应该使用每种类型的文件夹：http://www.johnpapa.net/angular-app-structuring-guidelines/

指令脚本和视图应位于同一文件夹中。

仅部署dist文件夹。

图片可以全部位于dist/assets/images（或dist/components/images）。在我的项目中，我在dist/components（dist/components/services，dist/components/partials [用于指令]下拥有所有指令，服务和图像。在根目录中，每个路由器/部分都有一个文件夹（即。dist/login，dist/home），其中包含所有相关的脚本，视图和测试。

如果在多个路由器/部分中使用了指令或服务，我将其放在dist/components/...中。如果仅在一个部分中使用它，我将其直接放在该路径的文件夹下。

ASP.NET MVC，AngularJS，Bower和部署站点文件夹结构

4 个答案: