8000 Add separate HTML template and SASS styles for <hello> directive · packetloop/angular-webpack@c0ef024 · GitHub
[go: up one dir, main page]
Skip to content
This repository was archived by the owner on Jan 21, 2019. It is now read-only.

Commit c0ef024

Browse files
nkbtnkbt
committed
Add separate HTML template and SASS styles for <hello> directive
1 parent 94ca0c3 commit c0ef024

9 files changed

+65
-6
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,6 @@ npm test
2727
- [x] Tests for `<hello>` directive mocking `HelloService`
2828
- [x] Tests for `HelloController` mocking `HelloService`
2929
- [x] `npm test` script with CI-friendly karma + webpack run
30-
- [ ] Separate HTML template for `<hello>` + webpack build
31-
- [ ] Separate CSS for `<hello>` + webpack build
30+
- [x] Separate HTML template for `<hello>` + webpack build
31+
- [x] Separate CSS for `<hello>` + webpack build
3232
- [ ] Coverage report

‎dest/app.js

Lines changed: 31 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎karma.conf.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ module.exports = function (config) {
1515
devtool: 'eval',
1616
watch: false
1717
},
18-
exclude: [],
18+
exclude: [
19+
'*.sass'
20+
],
1921
preprocessors: {
2022
'test/webpack.js': ['webpack']
2123
},

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"devDependencies": {
1616
"angular": "^1.3.6",
1717
"angular-mocks": "^1.3.6",
18+
"css-loader": "^0.9.0",
1819
"exports-loader": "^0.6.2",
1920
"imports-loader": "^0.6.3",
2021
"jasmine-core": "^2.1.3",
@@ -23,6 +24,9 @@
2324
"karma-jasmine": "^0.3.2",
2425
"karma-sourcemap-loader": "^0.3.0",
2526
"karma-webpack": "^1.3.1",
27+
"ng-cache-loader": "0.0.7",
28+
"sass-loader": "^0.3.1",
29+
"style-loader": "^0.8.2",
2630
"webpack": "^1.4.13",
2731
"webpack-dev-server": "^1.6.6"
2832
}

‎src/hello/hello.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{{hello}}

‎src/hello/hello.sass

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
hello
2+
display: block
3+
width: 200px
4+
height: 100px
5+
line-height: 100px
6+
background: #f00
7+
color: #fff
8+
font-size: 20px

‎src/hello/hello_directive.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
require('./hello.sass');
2+
13
var $inject = ['HelloService'];
24
var Hello = function (helloService) {
35

@@ -8,7 +10,7 @@ var Hello = function (helloService) {
810

911

1012
return {
11-
template: '{{hello}}',
13+
template: require('./hello.html'),
1214
restrict: 'E',
1315
link: link,
1416
scope: {}

‎src/hello/tests/hello_directive_spec.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,12 @@ describe('Hello Directive', function () {
2323
expect($element.html()).toEqual('test');
2424
});
2525

26+
it('should apply styles from hello.sass', function () {
27+
var styles;
28+
29+
window.document.body.appendChild($element[0]);
30+
styles = window.getComputedStyle($element[0]);
31+
expect(styles['background-color']).toEqual('rgb(255, 0, 0)');
32+
window.document.body.removeChild($element[0]);
33+
});
2634
});

‎webpack.config.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,12 @@ module.exports = {
1616
}
1717
},
1818
module: {
19+
loaders: [
20+
{test: /\.sass$/, loader: 'style!css!sass?indentedSyntax=true'},
21+
{test: /\.html$/, loader: 'ng-cache?prefix=[dir]/[dir]'}
22+
],
1923
noParse: [
20-
/node_modules/
24+
/node_modules\/angular/
2125
]
2226
},
2327
devtool: 'eval'

0 commit comments

Comments
 (0)
0