ASP.NET MVC, AngularJS, Bower и развертывание структуры папок сайта

Я прочитал много статей и вопросов о структуре папок сайта (разработка и развертывание) и до сих пор не понял, о чем ниже.

Я отметил свою текущую структуру папок:

  • Оранжевый - выглядит как lib или поставщик, где я хотел бы хранить независимые компоненты;
  • Синяя папка содержит мои собственные, по сравнению с текущими файлами проекта (приложения);
  • Готово к использованию готовая к развертыванию папка, содержащая миниатюрные и согласованные файлы, которые раньше включались в index.html.

Есть несколько вопросов, которые я хотел бы найти:

  • Правильно ли, что наилучшей практикой является развертывание только на веб-сервере dist?
  • Должен ли я конкатрировать файлы bower_components и приложения javascript в одном файле app.min.js? Должен ли я запускать независимые компоненты с файлами приложений и ober-упорядочением?
  • Должен ли я развернуть папку views с шаблонами , а в папку dist/views?
  • Правильно ли испортить все изображения (изображения css, изображения приложений, изображения плагинов) в одну папку dist/images?
  • Правильно ли хранить шаблоны директивы в папке views?
  • Существует не относительно файла AngularJS client/app/js/common/helpers.js, - я не могу понять, где наиболее очевидное место для этого (это могут быть прототипы, пользовательские функции или объекты)

Я буду рад за любую помощь, ты.

введите описание изображения здесь

ОТВЕТЫ

Ответ 1

Вот моя структура каталогов для сайта angular, который я создаю, называется Простая команда, которая связана вместе с помощью Browserify.

введите описание изображения здесь

Это мой корневой каталог, где начинается моя инфраструктура, и служит для публичных файлов. Все мои JS и HTML связаны вместе в app.min.js.

введите описание изображения здесь

Вот как я строю свои директивы как модули с представлениями 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
    })

Маршруты и контроллеры

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

Ответ 2

Вот моя настройка, которую я использую для нескольких различных предприятий Angular SPA с помощью беседки и gulp.

Моя папка для приложений похожа на вашу, но я также сохраняю там свой шаблон index.html. Gulp использует его и вставляет файлы CSS/JS, которые я хочу (.min файлы, когда я делаю выпуск). Я установил index.html в корень сайта (для отладки).

Я отделяю скрипты 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 и т.д.

введите описание изображения здесь

Ответ 3

Извините, мне не хватает времени, чтобы провести какое-то исследование и написать все ответы Возможно, я отредактирую его позже.

Вопросы 1:

  • Правильно ли, что наилучшая практика заключается в развертывании только в папке dist только для веб-сервера?

Ответ, Да

Вот пример структуры каталогов, в которой исходный код (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 Лучшие практики, которые вы можете использовать сегодня для радикального улучшения своего опыта развития

Ответ 4

Должна использовать папку для каждого типа: http://www.johnpapa.net/angular-app-structuring-guidelines/

Директива script и представление должно быть в одной папке.

Разверните только папку dist.

Изображения могут быть в dist/assets/images (или dist/components/images). В моих проектах у меня есть все директивы, службы и изображения в разделе dist/components (dist/components/services, dist/components/partials [для директив]). И в корне, у меня есть папка для каждого маршрутизатора/раздела (т.е. dist/login, dist/home), который включает все соответствующие script, просмотр, тесты.

Если директива или служба используется в нескольких маршрутизаторах/разделах, я помещаю их в dist/components/.... Если он используется только в одном разделе, я помещаю его прямо под папку для этого маршрута.