5

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.

enter image description here

Improve this question

4 Answers 4

Reset to default
3

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.

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thx for your reply, Bob. I didn't quite understand about next things: 1. why do you use obj folder and how do you include minified files in your index.html? 2. How does angular template cache works with views on deploy server. 3. Looks like you use asp.next, neither asp .net mvc and every request catched by your index.html? other requests handles with separated data project (webApi for example)?
1 - Using gulp-inject to construct my debug and release index.html files. It knows where I put controllers/services etc, so they show up automatically in my index.html after I create them. 2 - I only use the template cache in my release build, works like magic 3 - I'm not using Next... just a plain ASP.NET web api project. I don't have any ASP.NET mvc references (not sure why you would need them for a SPA).. I don't really understand your last question.
If i understand you right, you have separate routes to get data and get index.html and your WebApi project separate from current spa-only project. I couldn't see your Controllers folder, that contains your WebApi controllers with data and i'm a little confused about it
You are correct. Our Controllers are defined in another project (but referenced by this one), it does not need to be that way (just pretend the controllers project is there). We have it separate because we have 2 different websites sharing the Web API controllers.
Sounds great, Bob. Ty
|
1

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

enter image description here

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.

enter image description here

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

enter image description here

"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'
            })
Improve this answer

10 Comments

Could you please provide an answer a little with require controllers and services in modules?
i've watched alot about browserify, but couldn't understand one thing- what's the benefits of using browserify over simple concat all in one bundle? Are there any other great stuffs in browserify that you've decided to use it?
@FSou1 I updated my answer to show you what it'd look like requiring in your modules.
Browserify is great because it's extremely easy to bring all your files together. I did the concat thing for a long time, it is for sure better.
That's well done with npm stringify :) As you could notice, finally each of your html file will be wrapped in module.exports = "<h3>html</pre>"; thank you m8, its really helped me
|
1

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

Improve this answer

Comments

0

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.

Improve this answer

2 Comments

Does it mean you do not concat & minify js files in dist?
I'm using requirejs/angularamd, so yes minify, but no concat.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.