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 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 2

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