Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Commit cc2df9a

Browse files
scarletskypkozlowski-opensource
authored andcommitted
docs(README): add info about templates customization
1 parent 4801564 commit cc2df9a

File tree

1 file changed

+55
-0
lines changed

1 file changed

+55
-0
lines changed

README.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,61 @@ Check the Grunt build file for other tasks that are defined for this project.
8787

8888
This will start Karma server and will continously watch files in the project, executing tests upon every change.
8989

90+
### Customize templates
91+
92+
As mentioned directives from this repository have all the markup externalized in templates. You might want to customize default
93+
templates to match your desired look & feel, add new functionality etc.
94+
95+
The easiest way to override an individual template is to use the <script> directive:
96+
97+
```javascript
98+
<script id="template/alert/alert.html" type="text/ng-template">
99+
<div class='alert' ng-class='type && "alert-" + type'>
100+
<button ng-show='closeable' type='button' class='close' ng-click='close()'>Close</button>
101+
<div ng-transclude></div>
102+
</div>
103+
</script>
104+
```
105+
106+
If you want to override more templates it makes sense to store them as individual files and feed the `$templateCache` from those partials.
107+
For people using Grunt as the build tool it can be easily done using the `grunt-html2js` plugin. You can also configure your own template url.
108+
Let's have a look:
109+
110+
Your own template url is `views/partials/ui-bootstrap-tpls/alert/alert.html`.
111+
112+
Add "html2js" task to your Gruntfile
113+
```
114+
html2js: {
115+
options: {
116+
base: '.',
117+
module: 'ui-templates',
118+
rename: function (modulePath) {
119+
var moduleName = modulePath.replace('app/views/partials/ui-bootstrap-tpls/', '').replace('.html', '');
120+
return 'template' + '/' + moduleName + '.html';
121+
}
122+
},
123+
main: {
124+
src: ['app/views/partials/ui-bootstrap-tpls/**/*.html'],
125+
dest: '.tmp/ui-templates.js'
126+
}
127+
}
128+
```
129+
130+
Make sure to load your template.js file
131+
`<script src="/ui-templates.js"></script>`
132+
133+
Inject the `ui-templates` module in your `app.js`
134+
```
135+
angular.module('myApp', [
136+
'ui.bootstrap',
137+
'ui-templates'
138+
]);
139+
```
140+
141+
Then it will work fine!
142+
143+
For more information visit: https://github.com/karlgoldstein/grunt-html2js
144+
90145
### Release
91146
* Bump up version number in `package.json`
92147
* Commit the version change with the following message: `chore(release): [version number]`

0 commit comments

Comments
 (0)