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

Question

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

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

Orange- 看起来像 lib 或 vendor 文件夹，我想在其中存储独立组件；
蓝色文件夹包含我自己的，相对于当前项目（应用程序）文件；
绿色 - 准备部署文件夹，其中包含缩小和串联的文件，这些文件曾经包含在 index.html。

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

最佳做法是仅部署到 Web 服务器 dist 文件夹是否正确？
我应该将我的 bower_components & app javascript 文件合并成单个 app.min.js 文件吗？我应该将独立组件与应用程序文件和 ober 顺序混为一谈吗？
我是否应该将带有模板的 views 文件夹部署到 dist/views 中文件夹？
将所有图片（css 图片、应用图片、插件图片）混入单个 dist/images 文件夹是否正确？
在 views 文件夹中存储 directive 模板是否正确？
没有相对于 AngularJS client/app/js/common/helpers.js 文件，- 我想不出最明显的地方在哪里（它可以是原型、自定义函数或对象）

我很乐意提供任何帮助，ty。

Answer 1

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

指令脚本和视图应该在同一个文件夹中。

仅部署 dist 文件夹。

图片都可以在dist/assets/images（或dist/components/images）中。在我的项目中，我在 dist/components 下有所有指令、服务和图像（dist/components/services、dist/components/partials [for directives]）。在根目录中，每个 router/section（即 dist/login、dist/home）都有一个文件夹，其中包括所有相关的脚本、视图、测试。

如果一个指令或服务在多个router/section中使用，我把它放在dist/components/...中。如果它只在一个部分使用，我把它放在该路线的文件夹下。

Answer 2

这是我正在构建的名为 Simple Team 的 angular 站点的目录结构，该站点使用 Browserify 绑定在一起。

这是我的文档根目录，我的框架在这里启动并提供 public 文件。我所有的 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

这是我用于几个不同企业的设置 Angular SPA 使用 bower 和 gulp。

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

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

我在 obj/client 中暂存所有要发布的内容，而不是您的 dist 文件夹（VS 自动为临时文件创建 obj 文件夹）。我没有在解决方案中包含它（我不希望它在源代码管理中）。

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

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

Answer 4

抱歉，我没有足够的时间做一些研究并写下所有答案也许我稍后会编辑它..

问题 1：

最好的做法是仅部署到 Web 服务器的 dist 文件夹是否正确？

回答，是

这是一个示例目录结构，其中源代码 (src) 与临时预编译资产 (.tmp) 分开，临时预编译资产 (.tmp) 与最终分发文件夹 (dist) 分开。 src文件夹包含jade、typescript、s等高级语言css； .tmp 包含已编译的 js、css 和 html 文件；而 dist 文件夹仅包含经过优化以在生产环境中提供的串联和缩小文件。

.
├── .tmp
│   ├── app.css
│   ├── app.js
│   ├── header.html
│   └── index.html
├── bower_components
│   └── angular
├── dist
│   ├── app.min.css
│   ├── app.min.js
│   └── index.html
└── src
    ├── app.scss
    ├── app.ts
    ├── components
    ├── header.jade
    ├── index.html
    └── shared

这是一个link，您可以找到更多信息

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

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

ASP.NET MVC, AngularJS, Bower and deploying site folder structure

asp.net-mvc

angularjs

gruntjs

bower

gulp