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 ?

Answer 1

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