ASP.NET MVC、AngularJS、Bower 和部署站点文件夹结构 [英] ASP.NET MVC, AngularJS, Bower and deploying site folder structure

问题描述

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

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

• Orange- 看起来像 lib 或 vendor 文件夹，我想在其中存储独立组件；
• Blue- 文件夹包含我自己的，相对于当前项目(应用程序)文件；
• Green-准备部署文件夹，其中包含缩小的 &连接文件，以前包含在 index.html 中.

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

• 是否正确，最佳做法是仅部署到 Web 服务器的 dist 文件夹?
• 我应该连接我的 bower_components 和app javascript 文件转换成单个 app.min.js 文件?我应该将独立组件与应用程序文件和 ober 排序混淆吗?
• 我是否应该将带有模板的 views 文件夹按原样部署到 dist/views 文件夹中?
• 将所有图片(css 图片、应用图片、插件图片)放入单个 dist/images 文件夹是否正确?
• 将 directive 模板存储在 views 文件夹中是否正确?
• 没有相对于 AngularJS 的 client/app/js/common/helpers.js 文件，-我不知道最明显的地方在哪里(它可能是原型，自定义函数或对象)

我会很高兴得到任何帮助，你.

解决方案

这是我正在构建的 Angular 网站的目录结构，名为

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

这就是我将指令构建为带有 require() 视图的模块的方式.

使用严格"要求('时刻')需要('角度-ui-路由器')要求('角度-ui-可排序')需要('角度-gravatar')要求('角弹性')需要('角度本地存储')要求('角力矩')要求('./routes.js')要求('./modules/focusMe')要求('./modules/selectize')要求('./modules/tagData')要求('./modules/www')要求('./modules/uiSrefActiveIf')有角度的.module('simple.team', ['ngFileUpload','ui.router','ui.sortable','ui.gravatar','ui.bootstrap','选择'，'角矩','角度加载杆'，'ng-摊牌','本地存储模块','等宽.弹性','文本角度','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) {//控制器代码})

路由和控制器

角度.module('simple.team.routes', []).config(函数($stateProvider) {$stateProvider.state('项目', {网址:'/项目'，模板:需要('./layouts/projects.html')，控制器:ProjectsCtrl，控制器作为:'ctrl'}).state('projects.card', {url: '/card/?cardId',模板:要求('./layouts/card.html')，控制器:要求('./controllers/card.ctrl.js')，控制器作为:'ctrl'})

I've read a lot of articles and questions about site folder structure (develop & deploy) and still have missunderstood about questions below.

I marked my current folder structure:

• Orange- looks like lib or vendor folder, where i'd like to store independent components;
• Blue- folder contains my own, relative to current project (application) files;
• Green- ready to deploy folder, that contains minified & concated files, which used to be included in index.html.

There are a few questions i'd like to find an answer:

• Is it correct, that the best practise is deploying to web server only dist folder?
• Should i concat my bower_components & app javascript files into single app.min.js file? Should i mess independent components with application files and ober ordering?
• Should i deploy views folder with templates as is into dist/views folder?
• Is it correct to mess all images (css images, app images, plugin images) into single dist/images folder?
• Is it correct to store directive templates in views folder?
• There is not relative to AngularJS client/app/js/common/helpers.js file,- i can't figure out where is the most obvious place for that (it could be prototypes, custom functions or objects)

I will be glad for any help, ty.

解决方案

Here is my directory structure for an angular site I'm building called Simple Team that is bound together using Browserify.

This is my document root where my framework starts and serves public files. All my JS and HTML is bound together into app.min.js.

This is how I build my directives as modules with the views require()'d in.

"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
    })

Routes and controllers

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'
            })

这篇关于ASP.NET MVC、AngularJS、Bower 和部署站点文件夹结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！