CODEWITHSUNDEEP
angularjsgruntjsyeomanyeoman-generator-angulargrunt-usemin
ChrisBratherton
ChrisBratherton

Reputation: 1590

Having sub directories under views using yo angular generator

So I have started yo angular for a new project and it's great, the only issue is that I like to structure my views and have partials etc, for example a great structure for me is something like the following:

app/views/_partials/modals
app/views/_partials/menus
app/views/_partials/buttons
app/views/index.html
app/views/about.html

However, it appears that the angular generator doesn't look in sub directories when building into the dist folder and I get all sorts of missing includes and errors.

Can I change Grunt to look into these sub directories and process the views accordingly so that they appear within my app after building?

I located an interesting block that I think could be responsible in my Grunt file:

ngtemplates: {
  dist: {
    options: {
      module: 'myApp',
      htmlmin: '<%= htmlmin.dist.options %>',
      usemin: 'scripts/scripts.js'
    },
    cwd: '<%= yeoman.app %>',
    src: 'views/{,*/}*.html',
    dest: '.tmp/templateCache.js'
  }
},

Or is it something in the usemin block? I'm confused (relatively new to Angular):

usemin: {
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  js: ['<%= yeoman.dist %>/scripts/{,*/}*.js'],
  options: {
    assetsDirs: [
      '<%= yeoman.dist %>',
      '<%= yeoman.dist %>/images',
      '<%= yeoman.dist %>/styles'
    ],
    patterns: {
      js: [[/(images\/[^''""]*\.(png|jpg|jpeg|gif|webp|svg))/g, 'Replacing references to images']]
    }
  }
},

Upvotes: 0

Views: 180

Answers (1)

ChrisBratherton
ChrisBratherton

Reputation: 1590

Ok, so I figured this one out, the issue was in the ngtemplates block and my code now looks like this: 

ngtemplates: {
  dist: {
    options: {
      module: 'myApp',
      htmlmin: '<%= htmlmin.dist.options %>',
      usemin: 'scripts/scripts.js'
    },
    cwd: '<%= yeoman.app %>',
    src: 'views/**/**/*.html',
    dest: '.tmp/templateCache.js'
  }
},

Notice the src attribute has changed from:

src: 'views/{,*/}*.html',

to:

src: 'views/**/**/*.html',

This seems to capture all my templates within the _partials directories

Upvotes: 2

Related Questions