Modifying the grunt-ngDocs template

Question

How can I modify the look&feel template of the website generated by grunt-ngDocs ?

The final goal is to integrate the generated documentation inside a website.

Per example, we want to display the following tabs for each topic

Demo (focused on the final user rendering)
Code (for the developers)

To do that, we need to modify the template used by ngDocs, but how ?

score 3 · Accepted Answer · answered Aug 30 '15 at 13:53

To create different tabs just add another Target to the ngdocs task:

ngdocs: {
  options: {        
    ...
    startPage: '/code' // this is displayed first
    ...        
  },
  demo: {
    src: ['path/to/demo/files'],
    title: 'Demo'
  },
  code: {
    src: ['path/to/code/files'],
    title: 'Code'
  }
}

Now, regarding the custom template.

You can provide your own Template file and CSS file.

You can even create a custom Navigation Template

score 0 · Answer 2 · answered Jul 21 '15 at 16:02

You may style the template provided with your own css files that you can copy each time you generate the docs.

See https://www.npmjs.com/package/grunt-ngdocs#styles? where you may specify styles in the option object used to intitialize your docs in grunt

Modifying the grunt-ngDocs template

2 Answers2