Skip to content

Commit b7b97dd

Browse files
author
K.C. Hunter
committed
compile tutorial in directives
1 parent 127efb1 commit b7b97dd

9 files changed

Lines changed: 230 additions & 6 deletions

File tree

‎GruntFile.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ module.exports = function (grunt)
77
separator: "\n\n"
88
},
99
dist: {
10-
src: [],
11-
dest: 'src/resources/js/<%= pkg.name %>.js'
10+
src: ['src/resources/js/**/*.js'],
11+
dest: 'src/<%= pkg.name %>.js'
1212
},
1313
deps: {
1414
src: [
@@ -17,13 +17,17 @@ module.exports = function (grunt)
1717
'bower_components/bootstrap/dist/js/bootstrap.js',
1818
'bower_components/angularjs/angular.min.js',
1919
],
20-
dest: 'src/resources/js/<%= pkg.name %>-deps.js'
20+
dest: 'src/<%= pkg.name %>-deps.js'
2121
},
2222
css: {
2323
src: ['bower_components/bootstrap/dist/css/bootstrap.min.css',
2424
'src/resources/css/styles.css'
2525
],
2626
dest: 'src/resources/css/<%= pkg.name %>.css'
27+
},
28+
move: {
29+
src: ['bower_components/angularjs/angular.min.js.map'],
30+
dest: 'src/angular.min.js.map'
2731
}
2832
},
2933

‎src/angular.min.js.map‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/resources/js/angularjstutorial-deps.js renamed to src/angularjstutorial-deps.js

File renamed without changes.

‎src/angularjstutorial.js‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/* use strict */
2+
var app = angular.module('MyApp', [])
3+
app.controller('MainController', function ($scope)
4+
{
5+
$scope.labelName = "New Button";
6+
$scope.newElement = angular.element('<div class="btn btn-default">' +
7+
$scope.labelName + '</div>');
8+
})
9+
10+
.directive('pageDirective', function ()
11+
{
12+
return {
13+
restrict: 'E',
14+
template: '<div>Here is a new button</div>',
15+
controller: 'MainController',
16+
scope: '=',
17+
compile: function (tElem, tAttrs)
18+
{
19+
console.log('compile it. This is the original compiled DOM.');
20+
debugger;
21+
return {
22+
pre: function preLink (scope, iElement, iAttrs)
23+
{
24+
console.log('pre');
25+
iElement.html('<div class="panel panel-default">Now a panel</div>');
26+
debugger;
27+
},
28+
post: function postLink (scope, iElement, iAttrs)
29+
{
30+
console.log('post');
31+
iElement.append(scope.newElement);
32+
debugger;
33+
}
34+
}
35+
}
36+
}
37+
})
38+
39+
.directive('pageDirectiveTwo', function ()
40+
{
41+
return {
42+
restrict: 'E',
43+
template: '<div>Here is a second button</div>',
44+
controller: 'MainController',
45+
scope: '=',
46+
compile: function (tElem, tAttrs)
47+
{
48+
console.log('2 compile it. This is the original compiled DOM.');
49+
debugger;
50+
return {
51+
pre: function preLink (scope, iElement, iAttrs)
52+
{
53+
console.log('2 pre');
54+
debugger;
55+
},
56+
post: function postLink (scope, iElement, iAttrs)
57+
{
58+
console.log('2 post');
59+
iElement.append(scope.newElement);
60+
debugger;
61+
}
62+
}
63+
}
64+
}
65+
})
66+
67+
.directive('pageDirectiveThree', function ()
68+
{
69+
return {
70+
restrict: 'E',
71+
template: '<div>Here is a third button</div>',
72+
controller: 'MainController',
73+
scope: '=',
74+
compile: function (tElem, tAttrs)
75+
{
76+
console.log('3 compile it. This is the original compiled DOM.');
77+
debugger;
78+
return {
79+
pre: function preLink (scope, iElement, iAttrs)
80+
{
81+
console.log('3 pre');
82+
debugger;
83+
},
84+
post: function postLink (scope, iElement, iAttrs)
85+
{
86+
console.log('3 post');
87+
debugger;
88+
}
89+
}
90+
}
91+
}
92+
})

‎src/compile.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>AccioCode AngularJS Tutorial</title>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1">
7+
<meta name="viewport" content="width=device-width, user-scalable=no">
8+
<script src="angularjstutorial-deps.js"></script>
9+
<script src="angularjstutorial.js"></script>
10+
11+
<link rel="stylesheet" href="resources/css/angularjstutorial.css">
12+
</head>
13+
<body>
14+
<div class="mainContainer" data-ng-app="MyApp">
15+
<h1>Features</h1>
16+
<h2>Compile</h2>
17+
18+
<page-directive></page-directive>
19+
20+
<page-directive-two></page-directive-two>
21+
22+
<page-directive-three></page-directive-three>
23+
24+
<page-directive></page-directive>
25+
</div>
26+
</body>
27+
</html>

‎src/index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,10 @@
1313
<body>
1414

1515
<div class="mainContainer">
16-
<h1>AngularJS Tutorial</h1>
17-
<button class="btn btn-default">Here we go</button>
16+
<h1>Features</h1>
17+
<h2>Compile</h2>
18+
19+
1820
</div>
1921

2022
</body>

‎src/resources/js/angularjstutorial.js‎

Whitespace-only changes.

‎src/resources/js/binding.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/resources/js/compile.js‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/* use strict */
2+
var app = angular.module('MyApp', [])
3+
app.controller('MainController', function ($scope)
4+
{
5+
$scope.labelName = "New Button";
6+
$scope.newElement = angular.element('<div class="btn btn-default">' +
7+
$scope.labelName + '</div>');
8+
})
9+
10+
.directive('pageDirective', function ()
11+
{
12+
return {
13+
restrict: 'E',
14+
template: '<div>Here is a new button</div>',
15+
controller: 'MainController',
16+
scope: '=',
17+
compile: function (tElem, tAttrs)
18+
{
19+
console.log('compile it. This is the original compiled DOM.');
20+
debugger;
21+
return {
22+
pre: function preLink (scope, iElement, iAttrs)
23+
{
24+
console.log('pre');
25+
iElement.html('<div class="panel panel-default">Now a panel</div>');
26+
debugger;
27+
},
28+
post: function postLink (scope, iElement, iAttrs)
29+
{
30+
console.log('post');
31+
iElement.append(scope.newElement);
32+
debugger;
33+
}
34+
}
35+
}
36+
}
37+
})
38+
39+
.directive('pageDirectiveTwo', function ()
40+
{
41+
return {
42+
restrict: 'E',
43+
template: '<div>Here is a second button</div>',
44+
controller: 'MainController',
45+
scope: '=',
46+
compile: function (tElem, tAttrs)
47+
{
48+
console.log('2 compile it. This is the original compiled DOM.');
49+
debugger;
50+
return {
51+
pre: function preLink (scope, iElement, iAttrs)
52+
{
53+
console.log('2 pre');
54+
debugger;
55+
},
56+
post: function postLink (scope, iElement, iAttrs)
57+
{
58+
console.log('2 post');
59+
iElement.append(scope.newElement);
60+
debugger;
61+
}
62+
}
63+
}
64+
}
65+
})
66+
67+
.directive('pageDirectiveThree', function ()
68+
{
69+
return {
70+
restrict: 'E',
71+
template: '<div>Here is a third button</div>',
72+
controller: 'MainController',
73+
scope: '=',
74+
compile: function (tElem, tAttrs)
75+
{
76+
console.log('3 compile it. This is the original compiled DOM.');
77+
debugger;
78+
return {
79+
pre: function preLink (scope, iElement, iAttrs)
80+
{
81+
console.log('3 pre');
82+
debugger;
83+
},
84+
post: function postLink (scope, iElement, iAttrs)
85+
{
86+
console.log('3 post');
87+
debugger;
88+
}
89+
}
90+
}
91+
}
92+
})

0 commit comments

Comments
 (0)