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

Question

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

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

- 橙色 - 看起来像是独立组件存储的lib或vendor文件夹； - 蓝色 - 包含相对于当前项目（应用程序）的自己的文件； - 绿色 - 准备部署的文件夹，包含压缩和合并的文件，这些文件将被包含在index.html中。

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

• 部署到 Web 服务器时，最佳实践是仅部署 dist 文件夹，这正确吗？
• 我应该将我的 bower_components 和 app JavaScript 文件合并成单个 app.min.js 文件吗？我应该将独立组件与应用程序文件混在一起，还是按顺序排列？
• 我应该将包含模板的 views 文件夹直接部署到 dist/views 文件夹中吗？
• 将所有图像（CSS 图像、应用程序图像、插件图像）混在一个 dist/images 文件夹中，这正确吗？
• 将 directive 模板存储在 views 文件夹中，这正确吗？
• 相对于 AngularJS，client/app/js/common/helpers.js 文件没有明显的位置（它可以是原型、自定义函数或对象），请问哪里是最明显的位置？

非常感谢您的帮助。

- Maxim Zhukov

Answer 1

以下是我用于几个使用 bower 和 gulp 的企业 Angular SPA 的设置。

我的应用程序文件夹与您的相同，但我还将我的 index.html 模板放在那里。Gulp 使用它并注入我想要的 CSS / JS 文件（在发布时为 .min 文件）。我让它在网站根目录下放置一个 index.html（用于调试）。

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

我没有像你一样为发布创建 dist 文件夹。使用 gulp，一切都存储在 Angular 模板缓存中（它会与 app.min.js 一起放在那里）。您还会看到这些缓存的文件名也带有随机字符串（这是为了缓存清除）。

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

- What-About-Bob

---

谢谢你的回复，Bob。我还不太明白以下几点：1. 为什么要使用obj文件夹，以及如何在index.html中包含压缩文件？2. Angular模板缓存如何与部署服务器上的视图配合工作？3. 看起来你使用的是asp.next，而不是asp.net mvc，每个请求都被index.html捕获？其他请求则由独立的数据项目处理（例如webApi）？ - Maxim Zhukov

如果我理解正确的话，您有单独的路由来获取数据和获取 index.html，并且您的 WebApi 项目与当前仅包含 spa 的项目是分开的。我没有看到您的“Controllers”文件夹，其中包含 WebApi 控制器和数据，我有点困惑。 - Maxim Zhukov

你说得对。我们的控制器是在另一个项目中定义的（但被这个项目引用），其实并不需要这样（只是假装控制器项目存在）。我们将其分开是因为我们有两个不同的网站共享Web API控制器。 - What-About-Bob

太好了，Bob。 - Maxim Zhukov

我尝试使用gulp-angular-templatecache，看起来不错，但你说你只在发布时使用它？ - Maxim Zhukov

Answer 2

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

问题1：

• 最佳实践是仅将dist文件夹部署到Web服务器，这是正确的吗？

答案是，是的。

以下是一个示例目录结构，其中源代码（src）与临时预编译资产（.tmp）分开，后者与最终分发文件夹（dist）分开。src文件夹包含较高级别的语言，例如jade、typescript和scss；.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

这里有一个链接，你可以找到更多相关的信息

Gulp 最佳实践，让你立即改善开发体验

- Anant Dabhi

Answer 3

这是我正在构建的一个名为Simple Team的Angular网站的目录结构，使用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'
            })

- Michael J. Calkins

---

请问您能否提供一些关于在模块中使用 require 控制器和服务的答案？ - Maxim Zhukov

我看了很多有关Browserify的内容，但有一件事我不明白——使用Browserify相比简单的合并成一个捆绑包有什么好处？除此之外，你还决定使用Browserify的其他优点是什么？ - Maxim Zhukov

你把控制器分成不同的文件，然后在模块中引用它们？对于将控制器分离和在模块中引用它们有一点误解。 - Maxim Zhukov

抱歉提这么多问题，但我非常关注您的 require('card.html') ，看起来您的模板是用 module.export 函数进行设计的？ - Maxim Zhukov

使用 npm stringify 做得好👍。 你可能已经注意到，最后你的每个HTML文件都将被包装在 module.exports = "<h3>html</pre>" 中。谢谢，这真的帮了我很多！ - Maxim Zhukov

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/...中。如果它只在一个部分中使用，我会将其直接放在该路由的文件夹下。

- ngDeveloper

---

这是否意味着您不会在dist中连接和压缩js文件？ - Maxim Zhukov

我正在使用requirejs/angularamd，所以需要进行压缩，但不需要合并。 - ngDeveloper