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

Question

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.

Answer 1

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

Answer 2

Here is my setup that I'm using for a few different enterprise Angular SPA's using bower and gulp.

My app folder is like yours, but I also keep my index.html template there. Gulp uses it and injects the CSS/JS files that I want (.min files when I do a release). I have it put an index.html in the root of the website (for debug).

I separate my bower and app scripts into lib.min.js / app.min.js. Instead of minifying the bower stuff myself, I just concat all of the .min files. I minify and concat my app scripts.

Instead of your dist folder, I stage everything for release in obj/client (VS automatically creates the obj folder for temp files). I don't include this in the solution (I don't want it in source control).

I don't have a views folder for release. Using gulp everything is stored in the Angular template cache (it's gets put in there with app.min.js). You'll see these also get a random string as a suffix (that's for cache busting).

In the end, my deployment consists only of index.html, app (dist in your case) and bin folders, and web.config. I exclude the gulpfile, bower.json, etc.

Answer 3

Sorry I not get enough time to do some research and write all answers May be I edit it later..

Questions 1:

• Is it correct, that the best practise is deploying to web server only dist folder?

Answer, Yes

Here is an example directory structure in which source code (src) is separated from temporary precompiled assets (.tmp), which are separated from the final distribution folder (dist). The src folder contains higher level languages such as jade, typescript and scss; the .tmp contains compiled js, css and html files; while the dist folder contains only concatenated and minified files optimized to be served in production.

.
├── .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

Here is a link that you can find more information

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

Answer 4

Should use folder per type: http://www.johnpapa.net/angular-app-structuring-guidelines/

Directive script and view should be in same folder.

Only deploy the dist folder.

Images can all be in dist/assets/images (or dist/components/images). In my projects, I have all directives, services, and images under dist/components (dist/components/services, dist/components/partials [for directives]). And in the root, I have a folder for each router/section (ie. dist/login, dist/home), which includes all relevant script, view, tests.

If a directive or service is used in multiple router/sections, I put it in dist/components/.... If it is only used in the one section, I put it right under the folder for that route instead.