CODEWITHSUNDEEP
angularjsyeoman-generator
Subtubes
Subtubes

Reputation: 16873

How can I rename the angular yeoman index.html file

is it possible to rename the index.html file in the angular yeoman generator? In other words I would like to use a different name instead of index.html

To be more specific

I would like yeoman to also know of the change so that when I generate a new directive, service, controller yeoman will write it to the "Build" block. i.e. 

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

I'm affraid if I renamed the index.html file yeoman will not know of the name change and so my new html file will need to be manually updated with the new script tag for my directive, controller, service.

Upvotes: 1

Views: 2360

Answers (1)

michael
michael

Reputation: 16341

Yes, this is possible. But you have to change your Gruntfile.js:

  • change all occurrences of index.html to your html file

  • change the server settings from:

    livereload: {
   options: {
     open: true,
     base: [
       '.tmp',
       '<%= yeoman.app %>'
     ]
   }
}

to:

livereload: {
    options: {
      open: 'http://localhost:9000/yourname.html',
      base: [
        '.tmp',
        '<%= yeoman.app %>'
      ]
    }
  },

If you would like to use the yeoman angular generators, they will not update a file that is different from index.html, because index.html is hard coded in the generators. There is only a command line argument (--skip-add) that prevents that the generator touching the index.html file.

For sure. It's open source. The relevant part is in the file: https://github.com/yeoman/generator-angular/blob/master/script-base.js

Generator.prototype.addScriptToIndex = function (script) {
  try {
    var appPath = this.env.options.appPath;
    var fullPath = path.join(appPath, 'index.html');
    angularUtils.rewriteFile({
      file: fullPath,
      needle: '<!-- endbuild -->',
      splicable: [
        '<script src="scripts/' + script.toLowerCase().replace('\\', '/') + '.js"></script>'
      ]
    });
  } catch (e) {
    console.log('\nUnable to find '.yellow + fullPath + '. Reference to '.yellow + script + '.js ' + 'not added.\n'.yellow);
  }
};

you may change the name index.html or provide an additional option to configure the name.

Upvotes: 2

Related Questions