Skip to content

osasseville/html-angular-brunch

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

72 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This is a simple mode that switch the jade compiler by an html minifier.

Here's the original readme:

jade-angularjs-brunch Build Status

Compiler Jade templates to AngularJS modules for Brunch.IO with automatic section detection based on location of index.jade's.

Step by step using guide

For example you have a directory structure of your project such as:

app/
    index.jade
    application.coffee
    welcome/
          page.jade
          page.less
          controllers.coffee
          directives.coffee
          otherStuff.coffee
    access/
          index.jade
          application.coffee
          register/
                    page.jade
                    page.less
                    controllers.coffee
                    directives.coffee
                    otherStuff.coffee
          login/
                    ...
    admin/
          index.jade
          application.coffee
          users/
                    ...
          records/
                    ...
    landing/
          index.jade
          ...

The key note of example above is location of index.jade's. Them will be compile as usual jade files into index.html's. Your public folder will have such structure:

_public/
        index.html
        access/
                index.html
        admin/
                index.html
        landing/
                index.html

And as addition it will group "partials" (files like page.jade in example) of this section into javascript files:

_public/
        js/
            app.templates.js        # it will contains compiled content of
                                    # app/welcome/page.jade and any jades in subdirectories

            app.access.templates.js # it will contains compiled content of
                                    # app/access/register/page.jade and
                                    # app/access/login/page.jade
                                    # and any jades in subdirectories

            app.admin.templates.js  # ...
            ...

Any file in example above will contains declaration of Angular.js module with same name:

app.templates.js        -> app.templates
app.access.templates.js -> app.access.templates
...

Modules must be registered in application.coffee's files such as:

App = angular.module('app', [
  ...

  'app.templates'
])

After action above you can use your template in your code like this:

  $routeProvider
    .when('/welcome', {templateUrl: 'app/welcome/page.jade'})

or in directive's templateUrl.

This magic helps you split your large application on small SPA sections for improving performance and control complexity.

Sample of settings (DEPRECATED)

Add to dependencies section in package.json of your project:

"jade-angularjs-brunch" : ">= 0.0.1 < 1.5"

Add to paths section in config.coffee:

jadeCompileTrigger: '.compile-jade'  # Defaults to 'js/dontUseMe'.

Add to templates section in config.coffee:

joinTo:
  '.compile-jade': /^app/  # Hack for auto-compiling Jade templates.

Add to plugin section in config.coffee:

plugins:
  jade:
    pretty: yes  # Adds pretty-indentation whitespaces to output (false by default).
    doctype: "xml"  # Specify doctype ("5" by default).
  jade_angular:
    modules_folder: 'templates'
    locals: {}
  • modules_folder: folder with your template
  • locals: context for jade compiler

Now you can get angular.js modules:

_public/js/login.template.js:

angular.module('login.templates', [])
.run(['$templateCache', function($templateCache) {
  return $templateCache.put('/login/modal.page.html', [
'This is content of your jade-file',''].join("\n"));
}])

Single-File Mode

If you want a single file instead of a file per module, you can use the single_file option in jade_angular.

plugins:
  jade_angular:
    single_file: true
    # if you want to change the file name (defaults to js/templates.js and is in your public directory)
    single_file_name: 'js/angular_templates.js'

About

Mod of jade-angular-brunch to use html-minify instead of jade.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published