A basic middleman extension that precompiles your Angular.js templates. Stop making server requests to fetch your HTML!
Add to your Gemfile:
gem 'middleman-angular-templates', git: '[email protected]:damrbaby/middleman-angular-templates.git'
And to config.rb:
activate :angular_templates
This gives you access to the helper method angular_include_templates which will pre-compile all of your html templates inside <script type="text/ng-template"> tags (docs).
Conditions for pre-compilation:
- Restricted to partials only
- Partial must have one of the following extensions:
htmlerbslimorhaml
The following source/index.html.erb:
<body>
<%= angular_include_templates %>
</body>
With the following directory structure:
source/index.html.erb
source/_login.erb
source/dashboard/_home.erb
Will compile to the following:
<body>
<script type="text/ng-template" id="login.html">
<h1>My login page</h1>
</script>
<script type="text/ng-template" id="dashboard/home.html">
<h1>My home page</h1>
</script>
</body>
Then you can have routes such as:
$routeProvider.when('/login', { templateUrl: 'login.html' })
$routeProvider.when('/dashboard', { templateUrl: 'dashboard/home.html' })
Also works with ng-include:
<div ng-include="'login.html'"></div>
<div ng-include="'dashboard/home.html'"></div>
You can also specify a custom base path for your template partials:
<% if mobile %>
<%= angular_include_templates "mobile" %>
<% else %>
<%= angular_include_templates "desktop" %>
<% end %>