Search code examples
javascriptangularjsgruntjsdocumentationngdoc

Modifying the grunt-ngDocs template


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 ?


Solution

  • 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