Reorganize code with Yeoman AngularJS

Question

I used Yeoman to initialize my AngularJS project (I followed this guide: http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/), but after reading more about best practices, I decided to reorganize my code.

From:

app/
    styles/
    views/
        submit.html
        search.html
    scripts/
        app.js
        controllers/
            submit.js
            search.js
    index.hmtl

To this module based structure:

app/
    styles/
    myApp/
        app.js
        home/
        search/
            search.js
            search.html
        submit/
            submit.js
            submit.html
    index.html

But apparently, I cannot just change the path of "app.js". When I changed the source of app.js in index.html to:

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="myApp/app.js"></script>
    <!-- endbuild -->

It fails, and the website won't load properly, but I don't get any errors from grunt.

How do I do this reorganization without messing up? Do I have to change something in the grunt file maybe?

Answer 1

You'll need to modify your grunt file using glob syntax to find javascript files in all subdirs (this will be particularly important as you add new modules). The ngbp project has a pretty good example of a more complicated Gruntfile.js using this format. That Gruntfile collects all the scripts in your project, and then includes them in a loop while building index.html like this:

<% scripts.forEach(function(file) { %>
<script type="text/javascript" src="<%= file %>"></script><% }); %>

Also remember, as you add modules in deeper directories and split over files, order of script inclusion matters. You'll have to play around with the minimatch rules, but an example build from one of my projects looks like:

  build: {
    dir: '<%= build_dir %>',
    src: [
      '<%= vendor_files.js %>',
      '<%= build_dir %>/src/**/*.js',
      '!<%= build_dir %>/src/**/*-*-*.js',
      '!<%= build_dir %>/src/**/*-*.js',
      '<%= build_dir %>/src/**/*-*.js',
      '!<%= build_dir %>/src/**/*-*-*.js',
      '<%= build_dir %>/src/**/*.js',
      '<%= html2js.common.dest %>',
      '<%= html2js.app.dest %>',
      '<%= vendor_files.css %>',
      '<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css'
    ]
  },

This accommodates a structure that looks like:

src/
  app/
    search/
      search.js
      search.tpl.html
    submit/
      submit.js
      submit.tpl.html
    something-complex/
      something-complex-directive.js
      soemthing-complex-directive.spec.js  
    app.js
    app.spec.js
  less/
    main.less
  index.html